/**
 * MS Core - CSS Variables (Design Tokens)
 *
 * Central location for all design tokens used across the MS component system.
 * Based on SLDS (Salesforce Lightning Design System) color palette.
 *
 * Usage:
 *   color: var(--ms-color-text-primary);
 *   padding: var(--ms-spacing-md);
 */

:root {
    /* =========================================================================
       COLORS - Primary (Brand)
       ========================================================================= */
    --ms-color-primary: #0070d2;
    --ms-color-primary-hover: #005fb2;
    --ms-color-primary-light: #eef4ff;
    --ms-color-primary-border: #b0c4de;

    /* =========================================================================
       COLORS - Text
       ========================================================================= */
    --ms-color-text-primary: #16325c;
    --ms-color-text-secondary: #54698d;
    --ms-color-text-muted: #9faab5;
    --ms-color-text-link: #0070d2;
    --ms-color-text-inverse: #ffffff;

    /* =========================================================================
       COLORS - Background
       ========================================================================= */
    --ms-color-bg-page: #f4f6f9;
    --ms-color-bg-surface: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --ms-color-bg-card: #ffffff;
    --ms-color-bg-header: #fafaf9;
    --ms-color-bg-hover: #f4f6f9;
    --ms-color-bg-selected: #eef4ff;

    /* =========================================================================
       COLORS - Border
       ========================================================================= */
    --ms-color-border: #d8dde6;
    --ms-color-border-light: #e0e5ee;
    --ms-color-border-focus: #1589ee;

    /* =========================================================================
       COLORS - Status/Feedback
       ========================================================================= */
    --ms-color-success: #4bca81;
    --ms-color-success-bg: #e6f9ee;
    --ms-color-error: #c23934;
    --ms-color-error-bg: #fef1f1;
    --ms-color-warning: #ffb75d;
    --ms-color-warning-bg: #fffbea;
    --ms-color-warning-border: #ffb75d;
    --ms-color-warning-text: #856404;
    --ms-color-info: #0070d2;
    --ms-color-info-bg: #eef4ff;

    /* =========================================================================
       SPACING
       ========================================================================= */
    --ms-spacing-xs: 0.25rem;   /* 4px */
    --ms-spacing-sm: 0.5rem;    /* 8px */
    --ms-spacing-md: 1rem;      /* 16px */
    --ms-spacing-lg: 1.5rem;    /* 24px */
    --ms-spacing-xl: 2rem;      /* 32px */
    --ms-spacing-xxl: 3rem;     /* 48px */

    /* =========================================================================
       BORDER RADIUS
       ========================================================================= */
    --ms-border-radius: 0.25rem; /* 4px - Default/alias */
    --ms-radius-sm: 0.25rem;    /* 4px - SLDS standard */
    --ms-radius-md: 0.25rem;    /* 4px */
    --ms-radius-lg: 0.5rem;     /* 8px */
    --ms-radius-full: 9999px;   /* Pill shape */

    /* =========================================================================
       TYPOGRAPHY
       ========================================================================= */
    --ms-font-family: 'Salesforce Sans', Arial, sans-serif;
    --ms-font-size-xs: 0.75rem;     /* 12px */
    --ms-font-size-sm: 0.8125rem;   /* 13px */
    --ms-font-size-base: 0.875rem;  /* 14px */
    --ms-font-size-md: 1rem;        /* 16px */
    --ms-font-size-lg: 1.25rem;     /* 20px */
    --ms-font-size-xl: 1.5rem;      /* 24px */
    --ms-font-size-xxl: 1.75rem;    /* 28px */

    --ms-font-weight-normal: 400;
    --ms-font-weight-medium: 500;
    --ms-font-weight-semibold: 600;
    --ms-font-weight-bold: 700;

    --ms-line-height-tight: 1.2;
    --ms-line-height-normal: 1.5;
    --ms-line-height-relaxed: 1.75;

    /* =========================================================================
       SHADOWS
       ========================================================================= */
    --ms-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ms-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --ms-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --ms-shadow-focus: 0 0 0 3px rgba(27, 150, 255, 0.15);

    /* =========================================================================
       TRANSITIONS
       ========================================================================= */
    --ms-transition-fast: 0.15s ease;
    --ms-transition-normal: 0.2s ease;
    --ms-transition-slow: 0.3s ease;

    /* =========================================================================
       Z-INDEX LAYERS
       ========================================================================= */
    --ms-z-dropdown: 80;
    --ms-z-sticky-column: 90;
    --ms-z-sticky-header: 100;
    --ms-z-sticky-footer: 100;
    --ms-z-page-header: 110;
    --ms-z-modal-backdrop: 9000;
    --ms-z-modal: 9001;
    --ms-z-toast: 10000;

    /* =========================================================================
       DYNAMIC LAYOUT TOKENS (updated via JS)
       ========================================================================= */
    /* Main view height - updated on resize via App.updateLayoutTokens() */
    --ms-main-view-height: 100vh;

    /* =========================================================================
       COMPONENT-SPECIFIC TOKENS
       ========================================================================= */
    /* Sticky positioning */
    --ms-sticky-header-height: 0px;
    --ms-sticky-column-width: 200px;

    /* Table */
    --ms-table-cell-padding: var(--ms-spacing-md);
    --ms-table-header-bg: var(--ms-color-bg-header);

    /* Input */
    --ms-input-height: 2.25rem;
    --ms-input-padding: 0 var(--ms-spacing-sm);
}

/**
 * MS Core - Layout Utilities
 *
 * Generic flexbox layout classes for building flexible layouts.
 * These utilities handle flex direction, sizing, scrolling, and alignment.
 *
 * Usage example - fullscreen page with scrollable content:
 *   <div class="ms-layout-column ms-layout-fill">
 *       <div class="ms-layout-fixed">Header (auto height)</div>
 *       <div class="ms-layout-grow ms-layout-scroll">Scrollable content</div>
 *       <div class="ms-layout-fixed">Footer (auto height)</div>
 *   </div>
 *
 * Key concepts:
 *   - ms-layout-column/row: Sets flex container direction
 *   - ms-layout-fill: Takes 100% width and height of parent
 *   - ms-layout-fixed: Content-sized, doesn't grow or shrink
 *   - ms-layout-grow: Fills remaining space, can shrink
 *   - ms-layout-scroll: Enables scrolling when content overflows
 */

/* =============================================================================
   CONTAINER TYPES
   ============================================================================= */

/**
 * Flex column container - children stack vertically
 */
.ms-layout-column {
    display: flex;
    flex-direction: column;
}

/**
 * Flex row container - children stack horizontally
 */
.ms-layout-row {
    display: flex;
    flex-direction: row;
}

/**
 * Inline flex variants
 */
.ms-layout-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.ms-layout-inline-column {
    display: inline-flex;
    flex-direction: column;
}


/* =============================================================================
   SIZING
   ============================================================================= */

/**
 * Fill parent container completely
 */
.ms-layout-fill {
    height: 100%;
    width: 100%;
}

/**
 * Fill width only
 */
.ms-layout-fill-width {
    width: 100%;
}

/**
 * Fill height only
 */
.ms-layout-fill-height {
    height: 100%;
}

/**
 * Fixed size - doesn't grow or shrink, uses content size
 * Use for headers, footers, toolbars that should maintain their natural height
 */
.ms-layout-fixed {
    flex: 0 0 auto;
}

/**
 * Grow to fill remaining space
 * flex: 1 1 0 means: grow=1, shrink=1, basis=0
 * min-height: 0 is critical - allows flex item to shrink below content height
 *
 * Use for main content areas that should fill available space
 */
.ms-layout-grow {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}

/**
 * Shrinkable but won't grow
 * Use for items that should shrink if needed but not expand
 */
.ms-layout-shrink {
    flex: 0 1 auto;
    min-height: 0;
    min-width: 0;
}

/**
 * Neither grow nor shrink - fixed at content size
 * Alias for fixed with explicit no-shrink
 */
.ms-layout-rigid {
    flex: 0 0 auto;
}


/* =============================================================================
   SCROLLING
   ============================================================================= */

/**
 * Enable scrolling on both axes
 */
.ms-layout-scroll {
    overflow: auto;
}

/**
 * Vertical scroll only
 */
.ms-layout-scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
}

/**
 * Horizontal scroll only
 */
.ms-layout-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
}

/**
 * Disable scrolling - clip overflow
 */
.ms-layout-no-scroll {
    overflow: hidden;
}

/**
 * Allow overflow to be visible (default browser behavior)
 */
.ms-layout-overflow-visible {
    overflow: visible;
}


/* =============================================================================
   ALIGNMENT
   ============================================================================= */

/**
 * Center both axes
 */
.ms-layout-center {
    align-items: center;
    justify-content: center;
}

/**
 * Center on main axis only
 */
.ms-layout-justify-center {
    justify-content: center;
}

/**
 * Center on cross axis only
 */
.ms-layout-align-center {
    align-items: center;
}

/**
 * Space between items
 */
.ms-layout-space-between {
    justify-content: space-between;
}

/**
 * Space around items
 */
.ms-layout-space-around {
    justify-content: space-around;
}

/**
 * Space evenly between items
 */
.ms-layout-space-evenly {
    justify-content: space-evenly;
}

/**
 * Align items to start of cross axis
 */
.ms-layout-align-start {
    align-items: flex-start;
}

/**
 * Align items to end of cross axis
 */
.ms-layout-align-end {
    align-items: flex-end;
}

/**
 * Stretch items to fill cross axis (default flex behavior)
 */
.ms-layout-align-stretch {
    align-items: stretch;
}

/**
 * Align items to baseline
 */
.ms-layout-align-baseline {
    align-items: baseline;
}

/**
 * Justify items to start
 */
.ms-layout-justify-start {
    justify-content: flex-start;
}

/**
 * Justify items to end
 */
.ms-layout-justify-end {
    justify-content: flex-end;
}


/* =============================================================================
   WRAPPING
   ============================================================================= */

/**
 * Allow items to wrap to next line
 */
.ms-layout-wrap {
    flex-wrap: wrap;
}

/**
 * Prevent wrapping (default)
 */
.ms-layout-nowrap {
    flex-wrap: nowrap;
}

/**
 * Wrap in reverse order
 */
.ms-layout-wrap-reverse {
    flex-wrap: wrap-reverse;
}


/* =============================================================================
   GAP UTILITIES
   ============================================================================= */

.ms-layout-gap-xs { gap: var(--ms-spacing-xs); }
.ms-layout-gap-sm { gap: var(--ms-spacing-sm); }
.ms-layout-gap-md { gap: var(--ms-spacing-md); }
.ms-layout-gap-lg { gap: var(--ms-spacing-lg); }
.ms-layout-gap-xl { gap: var(--ms-spacing-xl); }

/* Row gap only (for column layouts) */
.ms-layout-row-gap-xs { row-gap: var(--ms-spacing-xs); }
.ms-layout-row-gap-sm { row-gap: var(--ms-spacing-sm); }
.ms-layout-row-gap-md { row-gap: var(--ms-spacing-md); }
.ms-layout-row-gap-lg { row-gap: var(--ms-spacing-lg); }

/* Column gap only (for row layouts) */
.ms-layout-col-gap-xs { column-gap: var(--ms-spacing-xs); }
.ms-layout-col-gap-sm { column-gap: var(--ms-spacing-sm); }
.ms-layout-col-gap-md { column-gap: var(--ms-spacing-md); }
.ms-layout-col-gap-lg { column-gap: var(--ms-spacing-lg); }


/* =============================================================================
   SELF ALIGNMENT (for individual flex items)
   ============================================================================= */

.ms-layout-self-start { align-self: flex-start; }
.ms-layout-self-end { align-self: flex-end; }
.ms-layout-self-center { align-self: center; }
.ms-layout-self-stretch { align-self: stretch; }


/* =============================================================================
   BACKBONE VIEW WRAPPER FIX
   ============================================================================= */

/**
 * Backbone views create an extra wrapper div ($el) that can break height chains.
 * This ensures the wrapper takes full height when its parent uses ms-layout-fill.
 */
[data-tab-container].ms-layout-fill > div {
    height: 100%;
}

/**
 * MS Core - Page Structure
 *
 * Components for page-level layout structure including:
 * - Page container (ms-page)
 * - Generic sections (ms-page__section) with modifiers
 * - Header components (title, search, actions)
 * - Layout modes (fullscreen, scrollable)
 *
 * Usage:
 *   <div class="ms-page ms-page--fullscreen">
 *       <div class="ms-page__section ms-page__section--column">...</div>
 *       <div class="ms-page__section ms-page__section--compact ms-page__section--fixed">...</div>
 *       <div class="ms-page__section ms-page__section--grow ms-page__section--flush">...</div>
 *   </div>
 */

/* =============================================================================
   PAGE CONTAINER
   ============================================================================= */

/**
 * Base page container
 */
.ms-page {
    /* No padding or max-width — sections handle their own spacing */
}

/**
 * Fullscreen mode - page fills available space, sections stack vertically
 *
 * Uses flexbox so any number of sections can stack. Sections default to auto
 * height (shrink-to-fit). Use --grow on the section that should take remaining
 * space, and --fixed on sections that should never shrink.
 *
 * Uses --ms-main-view-height CSS variable which is updated by App.updateLayoutTokens()
 * on window resize to account for the app's top header.
 */
.ms-page--fullscreen {
    display: flex;
    flex-direction: column;
    height: var(--ms-main-view-height);
    overflow: hidden;
    gap: var(--ms-spacing-xs);
}

/**
 * Fullscreen with footer
 */
.ms-page--fullscreen-with-footer {
    display: flex;
    flex-direction: column;
    height: var(--ms-main-view-height);
    overflow: hidden;
    padding: 0;
    max-width: none;
    gap: var(--ms-spacing-xs);
}

/**
 * Scrollable mode - natural height, browser handles scrolling
 * Use for traditional page scrolling behavior
 */
.ms-page--scrollable {
    min-height: 100vh;
    overflow: visible;
}

/**
 * Compact mode - reduced padding
 */
.ms-page--compact {
    /* Compact variant — reserved for future use */
}

/**
 * No padding
 */
.ms-page--no-padding {
    padding: 0;
}

/**
 * Surface background - subtle gradient for dashboard-style pages
 */
.ms-page--surface {
    background: var(--ms-color-bg-surface);
}


/* =============================================================================
   PAGE SECTIONS
   ============================================================================= */

/**
 * Generic page section - any horizontal band on a page.
 * Default: horizontal padding only (consistent side alignment).
 * Vertical spacing is controlled by the parent's gap or --spaced/--compact modifiers.
 */
.ms-page__section {
    padding-left: var(--ms-spacing-lg);
    padding-right: var(--ms-spacing-lg);
}

/* --- Spacing modifiers --- */

/**
 * Spaced - adds vertical breathing room.
 * Use on header sections, standalone content blocks, or scrollable page sections.
 */
.ms-page__section--spaced {
    padding-top: var(--ms-spacing-md);
    padding-bottom: var(--ms-spacing-sm);
}

/**
 * Compact - minimal vertical padding.
 * Use for tab navs, toolbars, thin bands.
 */
.ms-page__section--compact {
    padding-top: var(--ms-spacing-xs);
    padding-bottom: var(--ms-spacing-xs);
}

/**
 * Flush - no padding, overflow hidden. For sections that manage their own
 * internal spacing or contain full-bleed content.
 */
.ms-page__section--flush {
    padding: 0;
    overflow: hidden;
}

/* --- Behavior modifiers --- */

/**
 * Grow - takes all remaining vertical space. Use on the main content section
 * in fullscreen layouts. Content manages its own scrolling.
 */
.ms-page__section--grow {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/**
 * Grow with scroll - like --grow but the section itself scrolls.
 * Use for simple pages where the grow area just needs to scroll.
 */
.ms-page__section--grow-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/**
 * Fixed - never shrink. Use for headers, footers, tab navs that must
 * keep their full height regardless of available space.
 */
.ms-page__section--fixed {
    flex-shrink: 0;
}

/**
 * Sticky - sticks to top when scrolling. Useful for headers in scrollable pages.
 */
.ms-page__section--sticky {
    position: sticky;
    top: 0;
    z-index: var(--ms-z-page-header);
}

/**
 * Bordered - bottom border. Use between sections for visual separation.
 */
.ms-page__section--bordered {
    border-bottom: 1px solid var(--ms-color-border);
}

/**
 * Column layout - flex column with gap. Use for headers that stack
 * title-row, search-row, and chips vertically.
 */
.ms-page__section--column {
    display: flex;
    flex-direction: column;
    gap: var(--ms-spacing-sm);
}

/* --- Section body (inner content padding) --- */

/**
 * Section body - provides content padding inside flush sections.
 * Maintains horizontal alignment with page sections.
 *
 * Usage:
 *   <div class="ms-page__section ms-page__section--grow ms-page__section--flush">
 *       <div class="ms-page__section-body">padded content here</div>
 *   </div>
 */
.ms-page__section-body {
    padding: var(--ms-spacing-md) var(--ms-spacing-lg);
}

/**
 * Compact body - less vertical padding.
 * Use for bulk action bars, status bars, toolbars inside flush sections.
 */
.ms-page__section-body--compact {
    padding: var(--ms-spacing-xs) var(--ms-spacing-lg);
}


/* =============================================================================
   HEADER COMPONENTS
   ============================================================================= */

/**
 * Page title
 */
.ms-page__title {
    font-size: var(--ms-font-size-xxl);
    font-weight: var(--ms-font-weight-bold);
    color: var(--ms-color-text-primary);
    line-height: var(--ms-line-height-tight);
}

.ms-page__title--small {
    font-size: var(--ms-font-size-xl);
}

.ms-page__title--large {
    font-size: 2rem;
}

/**
 * Page subtitle
 */
.ms-page__subtitle {
    font-size: var(--ms-font-size-base);
    color: var(--ms-color-text-muted);
    margin: 0;
}

/**
 * Title group - title + subtitle together
 */
.ms-page__title-group {
    margin-bottom: var(--ms-spacing-md);
}

/**
 * Search input in header
 */
.ms-page__search {
    border-radius: var(--ms-radius-md);
    border: 1px solid var(--ms-color-border);
    transition: border-color var(--ms-transition-fast), box-shadow var(--ms-transition-fast);
}

.ms-page__search:focus {
    border-color: var(--ms-color-border-focus);
    box-shadow: var(--ms-shadow-focus);
}

/**
 * Actions container
 */
.ms-page__actions {
    display: flex;
    gap: var(--ms-spacing-sm);
    align-items: center;
}

.ms-page__actions--stacked {
    flex-direction: column;
    align-items: stretch;
}

/**
 * Page button base - shared properties for all page-level action buttons.
 * Self-contained: no slds-button dependency needed.
 */
.ms-page__btn--primary,
.ms-page__btn--secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    border-radius: var(--ms-radius-md);
    padding: 0.625rem 1.25rem;
    font-family: inherit;
    font-size: var(--ms-font-size-base);
    font-weight: var(--ms-font-weight-semibold);
    line-height: var(--ms-line-height-tight);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ms-transition-fast), border-color var(--ms-transition-fast);
}

/**
 * Primary action button - brand colors
 */
.ms-page__btn--primary {
    background-color: var(--ms-color-primary);
    border-color: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
}

.ms-page__btn--primary:hover {
    background-color: var(--ms-color-primary-hover);
    border-color: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}

/**
 * Secondary action button - inverse of primary (white bg, blue text/border)
 */
.ms-page__btn--secondary {
    background-color: var(--ms-color-bg-card);
    border-color: var(--ms-color-primary);
    color: var(--ms-color-primary);
}

.ms-page__btn--secondary:hover {
    background-color: var(--ms-color-primary-light);
    color: var(--ms-color-primary);
}

/**
 * Compact page buttons - reduced padding for tighter layouts
 */
.ms-page__btn--compact {
    padding: 0.5rem 0.75rem;
    font-size: var(--ms-font-size-sm);
}

/**
 * Icon button - rounded border-radius for icon-only buttons (filter, settings).
 * Pairs with slds-button--icon-border-filled.
 */
.ms-page__btn--icon {
    border-radius: var(--ms-radius-md);
}


/* =============================================================================
   HEADER LAYOUTS
   ============================================================================= */

/**
 * Header with title on left, actions on right
 * By default: title truncates, actions stay on same line
 */
.ms-page__header--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ms-spacing-md);
    min-width: 0;
}

.ms-page__header--split > .ms-page__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-page__header--split > .ms-page__actions {
    flex-shrink: 0;
}

/**
 * Header toolbar row
 */
.ms-page__toolbar {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-md);
    padding: var(--ms-spacing-sm) 0;
}

.ms-page__toolbar--bordered {
    border-top: 1px solid var(--ms-color-border);
    padding-top: var(--ms-spacing-md);
    margin-top: var(--ms-spacing-md);
}


/* =============================================================================
   HEADER INNER COMPONENTS
   ============================================================================= */

/**
 * Title row - flex row with title left (truncates) and actions right (don't shrink)
 * Use inside ms-page__section for a single title + actions line.
 *
 * Usage:
 *   <div class="ms-page__section ms-page__section--column">
 *       <div class="ms-page__title-row">
 *           <h1 class="ms-page__title">...</h1>
 *           <div class="ms-page__actions">...</div>
 *       </div>
 *   </div>
 */
.ms-page__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ms-spacing-md);
    min-width: 0;
}

.ms-page__title-row > .ms-page__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-page__title-row > .ms-page__actions {
    flex-shrink: 0;
}

/**
 * Title row wrap modifier - on mobile, actions wrap below title
 * instead of title truncating.
 */
.ms-page__title-row--wrap {
    flex-wrap: wrap;
}

/**
 * Search row - flex row container for search input area.
 */
.ms-page__search-row {
    display: flex;
    align-items: center;
}

/**
 * Search group - groups search input + filter button.
 * Constrained to 400px, full-width on mobile.
 */
.ms-page__search-group {
    display: flex;
    align-items: center;
    max-width: 400px;
    width: 100%;
}


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

/**
 * Responsive layout on small screens
 * - Sections reduce to 16px padding
 * - Title and action button stay on same row
 * - Action button gets smaller padding
 * - Search row takes full width
 */
@media (max-width: 768px) {
    /* Section responsive - reduce horizontal padding */
    .ms-page__section {
        padding-left: var(--ms-spacing-md);
        padding-right: var(--ms-spacing-md);
    }

    /* Flush stays at 0 on all screen sizes */
    .ms-page__section--flush {
        padding: 0;
    }

    /* Section body responsive */
    .ms-page__section-body {
        padding: var(--ms-spacing-sm) var(--ms-spacing-md);
    }

    .ms-page__section-body--compact {
        padding: var(--ms-spacing-xs) var(--ms-spacing-md);
    }

    /* Title row responsive - smaller title font */
    .ms-page__title-row > .ms-page__title {
        font-size: var(--ms-font-size-lg);
    }

    /* Page action buttons - compact on mobile */
    .ms-page__title-row .ms-page__btn--primary,
    .ms-page__title-row .ms-page__btn--secondary {
        padding: 0.5rem 0.75rem;
        font-size: var(--ms-font-size-sm);
    }

    /* Search group - full width on mobile */
    .ms-page__search-group {
        max-width: none;
    }
}

/**
 * Form Styles
 *
 * Reusable form layout and styling classes.
 *
 * Structure:
 *   .ms-form                    - Form container
 *   .ms-form-section            - Section grouping
 *   .ms-form-section__content   - Collapsible section content
 *   .ms-form-row                - Row container (grid-based)
 *   .ms-form-row-columns        - Multi-column responsive row
 *   .ms-form-expandable-toggle  - Collapsible section toggle
 */


/* =============================================================================
   FORM CONTAINER
   ============================================================================= */

.ms-form-padded {
    padding: 1rem;
}


/* =============================================================================
   FORM SECTIONS
   ============================================================================= */

.ms-form-section {
    margin-bottom: 1.5rem;
}

.ms-form-section--first {
    margin-bottom: 1rem;
}

/**
 * Section content - used inside collapsible sections
 * Uses flexbox with gap for consistent spacing between all children
 */
.ms-form-section__content {
    padding: 0.5rem 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/**
 * Remove default margins from form elements inside sections
 * The parent's gap handles all spacing
 */
.ms-form-section__content > .slds-form-element {
    margin-bottom: 0;
}

.ms-form-section-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #16325c;
}

.ms-form-section-title-underlined {
    border-bottom: 2px solid #1589ee;
    padding-bottom: 0.5rem;
}

.ms-form-info-text {
    margin-bottom: 1rem;
}


/* =============================================================================
   FORM ROWS (Grid-based)
   ============================================================================= */

/**
 * Basic row - stacks children vertically by default
 */
.ms-form-row {
    display: grid;
    gap: 0.75rem;
}

/**
 * Multi-column row - responsive columns that wrap
 * Uses CSS Grid with auto-fit for flexible column count
 * Gap is consistent: 0.75rem for both row and column spacing
 */
.ms-form-row-columns {
    gap: 0.75rem; /* Same gap for rows and columns - consistent when wrapping */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/**
 * Row children - remove margins, gap handles spacing
 */
.ms-form-row > .slds-form-element,
.ms-form-row > div {
    margin-bottom: 0;
}

/* Min-width variants */
.ms-form-row-columns--min-width-none {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.ms-form-row-columns--min-width-150 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ms-form-row-columns--min-width-200 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ms-form-row-columns--min-width-250 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ms-form-row-columns--min-width-350 {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* Fixed column counts */
.ms-form-row-columns--2 {
    grid-template-columns: repeat(2, 1fr);
}

.ms-form-row-columns--3 {
    grid-template-columns: repeat(3, 1fr);
}

.ms-form-row-columns--4 {
    grid-template-columns: repeat(4, 1fr);
}


/* =============================================================================
   VALIDATION MESSAGES
   ============================================================================= */

.ms-form .validation-error-message {
    margin-top: 0.1rem;
    text-align: right;
    display: block;
    font-size: 0.75rem;
    color: #c23934;
    transition: all 0.5s ease;
}

/**
 * Reserve error space - reduced row-gap since error message adds vertical space
 * Keep column-gap normal for horizontal separation
 */
.ms-form-reserve-error-space .ms-form-section__content,
.ms-form-reserve-error-space .ms-form-row {
    gap: 0.25rem;
}

.ms-form-reserve-error-space .ms-form-row-columns {
    gap: 0.25rem 0.75rem; /* row-gap column-gap */
}

.ms-form-reserve-error-space .validation-error-message {
    min-height: 1.08rem;
}

.ms-form .show-on-error {
    visibility: hidden;
}

.ms-form .slds-has-error .show-on-error {
    visibility: visible;
}


/* =============================================================================
   EXPANDABLE TOGGLE (Collapsible Sections)
   ============================================================================= */

/**
 * Toggle header for collapsible sections
 * Usage: <div class="ms-form-expandable-toggle throughline">
 *          <div class="ms-form-expandable-toggle-header">
 *            <span class="ms-form-expandable-toggle__text">Section Title</span>
 *            <svg class="ms-form-expandable-toggle__icon">...</svg>
 *          </div>
 *        </div>
 */
.ms-form-expandable-toggle {
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.875rem 0;
    margin-top: 0.5rem;
    background: transparent;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0070d2;
    position: relative;
    transition: all 0.2s ease;
}

.ms-form-expandable-toggle:hover {
    color: #005fb2;
}

.ms-form-expandable-toggle.centered {
    justify-content: center;
}

/**
 * Toggle header content - sits above the throughline
 */
.ms-form-expandable-toggle-header {
    background: white;
    padding: 0 0.75rem 0 0;
    z-index: 1;
    display: flex;
    align-items: center;
}

.ms-form-expandable-toggle.centered .ms-form-expandable-toggle-header {
    padding-left: 0.75rem;
}

/**
 * Throughline - horizontal line behind the toggle
 */
.ms-form-expandable-toggle.throughline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #d8dde6;
    z-index: 0;
}

.ms-form-expandable-toggle__text {
    position: relative;
}

/**
 * Badge for showing filter count
 */
.ms-form-expandable-toggle__badge {
    display: none;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    margin-left: 0.5rem;
    background: #0070d2;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    border-radius: 0.625rem;
}

.ms-form-expandable-toggle__badge:not(:empty) {
    display: inline-block;
}

/**
 * Chevron icon - rotates when expanded
 */
.ms-form-expandable-toggle__icon {
    width: 0.875rem;
    height: 0.875rem;
    margin-left: 0.5rem;
    fill: currentColor;
    transition: transform 0.3s ease;
    z-index: 1;
    position: relative;
}

.ms-form-expandable-toggle.expanded .ms-form-expandable-toggle__icon {
    transform: rotate(180deg);
}

/**
 * MS Core - Tabs Component
 *
 * Tab navigation and content panel components.
 * Designed to work with SLDS tabs but provides additional utilities.
 *
 * Usage:
 *   <div class="ms-tabs">
 *       <ul class="ms-tabs__nav">
 *           <li><a class="ms-tabs__link ms-tabs__link--active">Tab 1</a></li>
 *           <li><a class="ms-tabs__link">Tab 2</a></li>
 *       </ul>
 *       <div class="ms-tabs__content">
 *           <div class="ms-tab-panel">Panel content</div>
 *       </div>
 *   </div>
 */

/* =============================================================================
   TABS CONTAINER
   ============================================================================= */

/**
 * Tabs container - uses grid for nav + content layout
 * Grid ensures content takes remaining space in fullscreen layouts
 */
.ms-tabs {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    overflow: hidden;
}

/**
 * Tabs in row layout (tabs on side)
 */
.ms-tabs--vertical {
    grid-template-rows: 1fr;
    grid-template-columns: auto 1fr;
}


/* =============================================================================
   TABS NAVIGATION
   ============================================================================= */

/**
 * Tab navigation container
 */
.ms-tabs__nav {
    border-bottom: 1px solid var(--ms-color-border);
    display: flex;
    list-style: none;
    padding: 0;
}

.ms-tabs--vertical .ms-tabs__nav {
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid var(--ms-color-border);
}

/**
 * Tab link/button
 */
.ms-tabs__link {
    display: flex !important;
    align-items: center;
    padding: var(--ms-spacing-md) 1.25rem !important;
    font-weight: var(--ms-font-weight-medium);
    color: var(--ms-color-text-muted);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--ms-transition-fast), border-color var(--ms-transition-fast);
}

.ms-tabs__link svg {
    fill: currentColor;
    margin-right: var(--ms-spacing-sm);
}

.ms-tabs__link:hover {
    text-decoration: none;
}

/**
 * Active tab state
 */
.ms-tabs__link--active,
.slds-tabs--default__item.slds-active .ms-tabs__link {
    color: var(--ms-color-primary);
    border-bottom-color: var(--ms-color-primary);
}

/**
 * Hover state (non-active)
 */
.ms-tabs__link:hover:not(.ms-tabs__link--active) {
    color: var(--ms-color-text-secondary);
    border-bottom-color: var(--ms-color-border);
}

/**
 * Disabled tab
 */
.ms-tabs__link--disabled {
    color: var(--ms-color-text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/**
 * Tab badge/count
 */
.ms-tabs__badge {
    margin-left: var(--ms-spacing-sm);
    padding: 0.125rem 0.5rem;
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-font-weight-semibold);
    background-color: var(--ms-color-bg-hover);
    border-radius: var(--ms-radius-full);
    color: var(--ms-color-text-secondary);
}

.ms-tabs__link--active .ms-tabs__badge {
    background-color: var(--ms-color-primary-light);
    color: var(--ms-color-primary);
}


/* =============================================================================
   TABS CONTENT
   ============================================================================= */

/**
 * Tab content container - holds all panels
 * Uses flex column to properly handle bulk actions bar + panel
 */
.ms-tabs__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/**
 * Bulk actions bar inside tabs content should not shrink
 */
.ms-tabs__content > .ms-bulk-bar {
    flex-shrink: 0;
}


/* =============================================================================
   TAB PANEL
   ============================================================================= */

/**
 * Tab panel wrapper - wraps individual tab content
 * Uses flex: 1 1 0 to fill remaining space
 */
.ms-tab-panel-wrapper {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.ms-tab-panel-wrapper.slds-hide {
    display: none !important;
}

/**
 * Tab panel container - inner container for tab view
 */
.ms-tab-panel-container {
    height: 100%;
    overflow: hidden;
}

/**
 * Tab panel - flex column layout for content
 * Children are auto-sized except those with ms-layout-grow
 */
.ms-tab-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Default: children don't shrink */
.ms-tab-panel > * {
    flex-shrink: 0;
}


/* =============================================================================
   TAB VARIANTS
   ============================================================================= */

/**
 * Compact tabs - smaller padding
 */
.ms-tabs--compact .ms-tabs__link {
    padding: var(--ms-spacing-sm) var(--ms-spacing-md) !important;
    font-size: var(--ms-font-size-sm);
}

/**
 * Pill tabs - rounded background instead of underline
 */
.ms-tabs--pills .ms-tabs__link {
    border-bottom: none;
    border-radius: var(--ms-radius-md);
    margin: var(--ms-spacing-xs);
}

.ms-tabs--pills .ms-tabs__link--active {
    background-color: var(--ms-color-primary-light);
    color: var(--ms-color-primary);
}

.ms-tabs--pills .ms-tabs__link:hover:not(.ms-tabs__link--active) {
    background-color: var(--ms-color-bg-hover);
}

/**
 * Bordered tabs - border around content area
 */
.ms-tabs--bordered .ms-tabs__content {
    border: 1px solid var(--ms-color-border);
    border-top: none;
    border-radius: 0 0 var(--ms-radius-md) var(--ms-radius-md);
}

/**
 * Full-width tabs - tabs stretch to fill width
 */
.ms-tabs--full-width .ms-tabs__nav {
    width: 100%;
}

.ms-tabs--full-width .ms-tabs__nav > li {
    flex: 1;
}

.ms-tabs--full-width .ms-tabs__link {
    justify-content: center;
}


/* =============================================================================
   RESPONSIVE TABS
   ============================================================================= */

/**
 * Scrollable tabs on small screens
 * Tabs become horizontally scrollable when they overflow
 */
@media (max-width: 768px) {
    .ms-tabs__nav,
    .slds-tabs--default__nav.ms-tabs__nav {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    /* Hide scrollbar in WebKit */
    .ms-tabs__nav::-webkit-scrollbar,
    .slds-tabs--default__nav.ms-tabs__nav::-webkit-scrollbar {
        display: none;
    }

    /* Prevent tab items from wrapping */
    .ms-tabs__nav > li,
    .slds-tabs--default__nav.ms-tabs__nav > li {
        flex-shrink: 0;
    }

    /* Smaller tab padding on mobile */
    .ms-tabs__link {
        padding: var(--ms-spacing-sm) var(--ms-spacing-md) !important;
        font-size: var(--ms-font-size-sm);
    }

    /* Ensure tabs container scrolls properly */
    .slds-tabs--default__nav.employees-admin-tab-nav {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .slds-tabs--default__nav.employees-admin-tab-nav::-webkit-scrollbar {
        display: none;
    }

    .slds-tabs--default__nav.employees-admin-tab-nav > li {
        flex-shrink: 0;
    }
}

/**
 * MS Core - Table System
 *
 * Comprehensive table styling including:
 * - Base table structure
 * - Sticky headers and columns
 * - Row states (hover, selected)
 * - Cell variants
 * - Table footer with totals
 *
 * Usage:
 *   <div class="ms-table-container ms-table-container--scrollable">
 *       <table class="ms-table">
 *           <thead class="ms-table__header ms-table__header--sticky">...</thead>
 *           <tbody class="ms-table__body">...</tbody>
 *           <tfoot class="ms-table__footer">...</tfoot>
 *       </table>
 *   </div>
 */

/* =============================================================================
   TABLE CONTAINER
   ============================================================================= */

/**
 * Table container - handles scrolling
 */
.ms-table-container {
    overflow-x: auto;
    position: relative;
}

/**
 * Scrollable table container - fills remaining space and scrolls
 * Use within flex containers (like ms-tab-panel) for fullscreen layouts
 *
 * flex: 1 1 0 means: grow to fill, can shrink, start from 0 (not content height)
 * min-height: 0 is critical for flex items to shrink below content height
 */
.ms-table-container--scrollable {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

/**
 * Fixed height container
 */
.ms-table-container--fixed {
    max-height: 400px;
    overflow: auto;
}


/* =============================================================================
   BASE TABLE
   ============================================================================= */

/**
 * Base table styling
 */
.ms-table {
    width: 100%;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
}

/**
 * Bordered table variant
 */
.ms-table--bordered {
    border: 1px solid var(--ms-color-border);
}

/**
 * Striped rows
 */
.ms-table--striped .ms-table__body tr:nth-child(even) {
    background-color: var(--ms-color-bg-page);
}

/**
 * Compact table levels - reduced padding (especially vertical)
 * Level 1: Moderate reduction
 * Level 2: More compact
 * Level 3: Very compact (minimal padding)
 */

/* Level 1 - moderate */
.ms-table--compact-1 th,
.ms-table--compact-1 td {
    padding: 0.5rem 0.75rem;
}

/* Level 2 - more compact */
.ms-table--compact-2 th,
.ms-table--compact-2 td {
    padding: 0.35rem 0.5rem;
}

/* Level 3 - very compact */
.ms-table--compact-3 th,
.ms-table--compact-3 td {
    padding: 0.25rem 0.5rem;
}

/* Backwards compatibility - .ms-table--compact maps to level 1 */
.ms-table--compact .ms-table__cell,
.ms-table--compact th,
.ms-table--compact td {
    padding: 0.5rem 0.75rem;
}


/* =============================================================================
   TABLE HEADER
   ============================================================================= */

/**
 * Table header
 */
.ms-table__header {
    background-color: var(--ms-color-bg-header);
}

/**
 * Sticky header - stays visible while scrolling
 */
.ms-table__header--sticky {
    position: sticky;
    top: var(--ms-sticky-header-height, 0);
    z-index: var(--ms-z-sticky-header);
}

.ms-table__header tr {
    border-bottom: 1px solid var(--ms-color-border);
}

.ms-table__header th {
    font-weight: var(--ms-font-weight-medium);
    font-size: var(--ms-font-size-xs);
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ms-color-border);
    background-color: var(--ms-color-bg-header);
    white-space: nowrap;
    text-align: left;
    color: var(--ms-color-text-secondary);
    /* Required for resize handles and column drag */
    position: relative;
    overflow: visible;
}

/* Right border between header columns (not last) */
.ms-table__header th:not(:last-child) {
    border-right: 1px solid var(--ms-color-border);
}

/**
 * Right-aligned header cells (for numeric columns)
 * More specific selector to override default left alignment
 */
.ms-table__header th.slds-text-align--right {
    text-align: right;
}

/**
 * Sortable column header
 */
.ms-table__header th.slds-is-sortable {
    cursor: pointer;
    user-select: none;
}

.ms-table__header th.slds-is-sortable:hover {
    background-color: var(--ms-color-bg-hover);
}

/**
 * Sorted column indicator
 */
.ms-table__header th.slds-is-sorted {
    color: var(--ms-color-primary);
}

.ms-table__header th.slds-is-sorted--ascending .slds-button__icon,
.ms-table__header th.slds-is-sorted--descending .slds-button__icon {
    fill: var(--ms-color-primary);
}


/* =============================================================================
   TABLE BODY
   ============================================================================= */

/**
 * Table body
 */
.ms-table__body {
    background: var(--ms-color-bg-card);
}

/**
 * Table row
 */
.ms-table__row {
    transition: background-color var(--ms-transition-fast);
    border-bottom: 1px solid var(--ms-color-border-light);
}

.ms-table__row:hover {
    background-color: var(--ms-color-bg-hover);
}

/* Override SLDS bordered table hover shadow for ms-table rows (except sticky columns) */
.slds-table--bordered.ms-table tbody tr:hover > td:not(.ms-table__cell--sticky-last):not(.ms-table__cell--sticky-right-first),
.slds-table--bordered.ms-table tbody tr:hover > th:not(.ms-table__cell--sticky-last):not(.ms-table__cell--sticky-right-first) {
    box-shadow: none !important;
}

/**
 * Selected row state
 */
.ms-table__row--selected {
    background-color: var(--ms-color-bg-selected) !important;
}

/**
 * Clickable row
 */
.ms-table__row--clickable {
    cursor: pointer;
}

/**
 * Disabled row
 */
.ms-table__row--disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* =============================================================================
   TABLE CELLS
   ============================================================================= */

/**
 * Base cell styling
 */
.ms-table__cell {
    padding: var(--ms-spacing-md);
    font-size: var(--ms-font-size-base);
    color: var(--ms-color-text-secondary);
    vertical-align: middle;
}

/**
 * Checkbox cell
 */
.ms-table__cell--checkbox {
    width: 3.5rem;
    padding: var(--ms-spacing-md);
    vertical-align: middle;
}

/**
 * Numeric cell - right-aligned with tabular numbers
 */
.ms-table__cell--number {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/**
 * Actions cell - buttons, icons
 */
.ms-table__cell--actions {
    white-space: nowrap;
    text-align: right;
}

/**
 * Row actions - use outline instead of border for better icon centering
 */
.ms-row-actions .slds-button--icon-border-filled {
    border: none;
    outline: 1px solid var(--ms-color-border, #dddbda) !important;
    outline-offset: -1px;
}

.ms-row-actions .slds-button--icon-border-filled:hover {
    outline-color: var(--ms-color-border-hover, #c9c7c5);
}

/**
 * Row actions compact levels
 * Applied via .ms-row-actions--compact-X or inherited from table compact level
 * Note: Level 3 uses same size as level 2 (minimum readable size)
 */

/* Compact level 1 - smaller buttons */
.ms-row-actions--compact-1 .slds-button--icon-border-filled,
.ms-table--compact-1 .ms-row-actions .slds-button--icon-border-filled {
    width: 1.625rem;
    height: 1.625rem;
    line-height: 1.625rem;
}

.ms-row-actions--compact-1 .slds-button--icon-border-filled .slds-button__icon,
.ms-table--compact-1 .ms-row-actions .slds-button--icon-border-filled .slds-button__icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* Compact level 2 and 3 - minimum size (level 3 doesn't go smaller) */
.ms-row-actions--compact-2 .slds-button--icon-border-filled,
.ms-row-actions--compact-3 .slds-button--icon-border-filled,
.ms-table--compact-2 .ms-row-actions .slds-button--icon-border-filled,
.ms-table--compact-3 .ms-row-actions .slds-button--icon-border-filled {
    width: 1.375rem;
    height: 1.375rem;
    line-height: 1.375rem;
}

.ms-row-actions--compact-2 .slds-button--icon-border-filled .slds-button__icon,
.ms-row-actions--compact-3 .slds-button--icon-border-filled .slds-button__icon,
.ms-table--compact-2 .ms-row-actions .slds-button--icon-border-filled .slds-button__icon,
.ms-table--compact-3 .ms-row-actions .slds-button--icon-border-filled .slds-button__icon {
    width: 0.75rem;
    height: 0.75rem;
}

/**
 * Row actions labeled mode - icon + text, same compactness as icon-only
 */
.ms-row-action--labeled {
    width: auto !important;
    display: inline-flex;
    align-items: center;
    padding: 0 0.375rem !important;
    gap: 0.25rem;
    white-space: nowrap;
}

.ms-row-action__label {
    font-size: 0.75rem;
    line-height: 1;
}

/* Compact level 1 */
.ms-row-actions--compact-1 .ms-row-action--labeled,
.ms-table--compact-1 .ms-row-actions .ms-row-action--labeled {
    padding: 0 0.25rem !important;
    gap: 0.125rem;
}

.ms-row-actions--compact-1 .ms-row-action__label,
.ms-table--compact-1 .ms-row-actions .ms-row-action__label {
    font-size: 0.6875rem;
}

/* Compact level 2 and 3 */
.ms-row-actions--compact-2 .ms-row-action--labeled,
.ms-row-actions--compact-3 .ms-row-action--labeled,
.ms-table--compact-2 .ms-row-actions .ms-row-action--labeled,
.ms-table--compact-3 .ms-row-actions .ms-row-action--labeled {
    padding: 0 0.1875rem !important;
    gap: 0.125rem;
}

.ms-row-actions--compact-2 .ms-row-action__label,
.ms-row-actions--compact-3 .ms-row-action__label,
.ms-table--compact-2 .ms-row-actions .ms-row-action__label,
.ms-table--compact-3 .ms-row-actions .ms-row-action__label {
    font-size: 0.625rem;
}

/**
 * Actions column - minimal padding
 * High specificity to override table cell padding
 */
.ms-table .ms-table__cell--actions,
.ms-table th.ms-table__cell--actions,
.ms-table td.ms-table__cell--actions {
    padding: 0.1rem !important;
}

/**
 * Compact cell
 */
.ms-table__cell--compact {
    padding: var(--ms-spacing-sm);
}

/**
 * Truncated cell content
 */
.ms-table__cell--truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =============================================================================
   STICKY COLUMNS
   ============================================================================= */

/**
 * Sticky column - left side
 * Position is set via inline style (left: Xpx) calculated from column config
 *
 * Usage:
 *   <th class="ms-table__cell--sticky" style="left: 0px; min-width: 40px;">
 *   <td class="ms-table__cell--sticky" style="left: 40px; min-width: 100px;">
 */
.ms-table__cell--sticky {
    position: sticky !important;
    z-index: 2;
    background-color: #ffffff;
}

/* Header cells get header background */
th.ms-table__cell--sticky {
    background-color: #f3f3f3;
    z-index: 3;
}

/* Hover state */
tr:hover > .ms-table__cell--sticky {
    background-color: #f4f6f9;
}

/* Selected row state */
.ms-table__row--selected .ms-table__cell--sticky,
.ms-table__row--selected > .ms-table__cell--sticky {
    background-color: #eef4ff;
}

/**
 * Shadow indicator for last left sticky column
 * Only shown when there's hidden content (table is scrolled or can scroll)
 */
.ms-table__cell--sticky-last {
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

/* Show shadow when content is scrolled behind left sticky columns */
.ms-table-container--scrolled-left .ms-table__cell--sticky-last {
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.2);
}

/**
 * Scroll indicator overlays
 * Visual hints showing there's more content to scroll to
 * The overlay wrapper (.generic-table-scroll-overlay) wraps the scroll wrapper
 * and provides a fixed positioning context for the gradient overlays
 */
.generic-table-container {
    position: relative;
}

/* Overlay wrapper - does NOT scroll, provides positioning context for gradients */
.generic-table-scroll-overlay {
    position: relative;
    overflow: hidden; /* Clips the pseudo-elements */
}

/* Left scroll indicator - gradient overlay on the non-scrolling wrapper */
.generic-table-scroll-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ms-table-sticky-left-width, 0px);
    width: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.2s ease;
}

/* Right scroll indicator - gradient overlay on the non-scrolling wrapper */
.generic-table-scroll-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--ms-table-sticky-right-width, 0px);
    width: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.2s ease;
}

/* Show left indicator when scrolled */
.ms-table-container--scrolled-left .generic-table-scroll-overlay::before {
    width: 24px;
    opacity: 1;
}

/* Show right indicator when content hidden on right */
.ms-table-container--scrolled-right .generic-table-scroll-overlay::after {
    width: 24px;
    opacity: 1;
}

/**
 * Sticky column - right side
 * Position is set via inline style (right: Xpx) calculated from column config
 *
 * Usage:
 *   <td class="ms-table__cell--sticky-right" style="right: 80px; min-width: 80px;">
 *   <td class="ms-table__cell--sticky-right ms-table__cell--sticky-right-first" style="right: 0; min-width: 80px;">
 */
.ms-table__cell--sticky-right {
    position: sticky !important;
    z-index: 2;
    background-color: #ffffff;
}

/* Header cells get header background */
th.ms-table__cell--sticky-right {
    background-color: #f3f3f3;
    z-index: 3;
}

/* Hover state */
tr:hover > .ms-table__cell--sticky-right {
    background-color: #f4f6f9;
}

/* Selected row state */
.ms-table__row--selected .ms-table__cell--sticky-right,
.ms-table__row--selected > .ms-table__cell--sticky-right {
    background-color: #eef4ff;
}

/**
 * Shadow indicator for first right sticky column (leftmost of right sticky group)
 * Only shown when there's hidden content to the right
 */
.ms-table__cell--sticky-right-first {
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

/* Show shadow when content is hidden behind right sticky columns */
.ms-table-container--scrolled-right .ms-table__cell--sticky-right-first {
    box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.2);
}

/**
 * Override SLDS cell-buffer padding for specific columns
 * Use these on columns where extra edge padding is not desired
 */
.ms-table__cell--no-padding-right {
    padding-right: 0.5rem !important;
}

.ms-table__cell--no-padding-left {
    padding-left: 0.5rem !important;
}


/* =============================================================================
   TABLE FOOTER
   ============================================================================= */

/**
 * Table footer - typically for totals
 */
.ms-table__footer {
    background-color: var(--ms-color-bg-header);
    border-top: 2px solid var(--ms-color-border);
}

/**
 * Sticky footer
 */
.ms-table__footer--sticky {
    position: sticky;
    bottom: 0;
    z-index: var(--ms-z-sticky-footer);
}

.ms-table__footer th,
.ms-table__footer td {
    padding: 0.5rem;
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-secondary);
}

/**
 * Total value styling
 */
.ms-table__total-value {
    color: var(--ms-color-primary);
    font-weight: var(--ms-font-weight-bold);
}


/* =============================================================================
   COMMON CELL CONTENT TYPES
   ============================================================================= */

/**
 * Clickable link in cell
 */
.ms-cell-link {
    color: var(--ms-color-text-link);
    font-weight: var(--ms-font-weight-semibold);
    text-decoration: none;
    transition: color var(--ms-transition-fast);
}

.ms-cell-link:hover {
    color: var(--ms-color-primary-hover);
    text-decoration: underline;
}

.ms-cell-link:focus {
    outline: none;
    text-decoration: underline;
}

/**
 * Code/ID in cell
 */
.ms-cell-code {
    color: var(--ms-color-text-muted);
    font-family: monospace;
    font-size: var(--ms-font-size-sm);
}

/**
 * Secondary/muted text
 */
.ms-cell-secondary {
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-sm);
}

/**
 * Primary text (emphasized)
 */
.ms-cell-primary {
    color: var(--ms-color-text-primary);
    font-weight: var(--ms-font-weight-medium);
}

/**
 * Status badges in cells
 */
.ms-cell-status {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-font-weight-medium);
    border-radius: var(--ms-radius-full);
}

.ms-cell-status--success {
    background-color: var(--ms-color-success-bg);
    color: var(--ms-color-success);
}

.ms-cell-status--error {
    background-color: var(--ms-color-error-bg);
    color: var(--ms-color-error);
}

.ms-cell-status--warning {
    background-color: var(--ms-color-warning-bg);
    color: #92400e;
}

.ms-cell-status--info {
    background-color: var(--ms-color-info-bg);
    color: var(--ms-color-info);
}


/* =============================================================================
   SKELETON LOADING
   ============================================================================= */

/**
 * Skeleton loading animation for lazy-loaded data
 * Displays pulsing gray bars that match expected content width
 */
@keyframes ms-skeleton-pulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}

.ms-skeleton {
    display: inline-block;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    vertical-align: middle;
}

/**
 * Skeleton bar - default size for text content
 */
.ms-skeleton--bar {
    height: 14px;
    min-width: 40px;
}

/**
 * Skeleton number - narrower, right-aligned for numeric data
 */
.ms-skeleton--number {
    height: 14px;
    width: 50px;
}

/**
 * Skeleton in right-aligned cells
 */
.slds-text-align--right .ms-skeleton {
    float: right;
}


/* =============================================================================
   TABLE MENU
   ============================================================================= */

/**
 * Table menu anchor - positioned at top-right of container
 * Height: 0 so it doesn't affect flex layout
 * pointer-events: none so it doesn't block clicks on header
 */
.ms-table-menu-anchor {
    position: absolute;
    top: 0;
    right: 0;
    height: 0;
    z-index: 101; /* above sticky header (100) */
    pointer-events: none;
}

/**
 * Table menu dropdown - positioned within the anchor
 */
.ms-table-menu {
    position: absolute;
    top: 8px;
    right: 12px;
    pointer-events: auto; /* re-enable clicks on the menu */
}

/**
 * Table menu button - borderless by default, shows border on hover
 */
.ms-table-menu .btn-table-menu {
    border-color: transparent;
    background-color: transparent;
}

.generic-table-container:hover .ms-table-menu .btn-table-menu,
.ms-table-menu .btn-table-menu:focus,
.ms-table-menu.slds-is-open .btn-table-menu {
    border-color: var(--ms-color-border, #dddbda);
    background-color: var(--ms-color-bg-input, #fff);
}

.ms-table-menu__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    min-width: 200px;
    margin-top: 4px;
}

.ms-table-menu.slds-is-open .ms-table-menu__dropdown {
    display: block;
}

/**
 * Export progress indicator
 */
.ms-table-menu__progress {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--ms-color-text-secondary);
    font-size: var(--ms-font-size-sm);
}

.ms-table-menu__progress .slds-spinner {
    margin-right: 0.5rem;
}

/**
 * Compact level slider in table menu
 */
.ms-table-menu__compact-item {
    padding: 0.5rem 0.75rem;
}

.ms-table-menu__compact-item:hover {
    background-color: transparent;
}

.ms-table-menu__slider-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ms-table-menu__slider-icon {
    flex-shrink: 0;
    fill: var(--ms-color-text-secondary, #706e6b);
}

.ms-table-menu__slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--ms-color-border, #dddbda);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.ms-table-menu__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--ms-color-brand, #0070d2);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.ms-table-menu__slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.ms-table-menu__slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--ms-color-brand, #0070d2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.ms-table-menu__slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

.ms-table-menu__slider::-moz-range-track {
    height: 4px;
    background: var(--ms-color-border, #dddbda);
    border-radius: 2px;
}


/* =============================================================================
   TABLE LOADING BAR
   ============================================================================= */

/**
 * Loading bar for table operations (export, bulk loading, etc.)
 * Shows progress with optional percentage and status text
 * Uses flex-shrink: 0 to show above the table content without overlapping
 */
.ms-table-loading-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--ms-color-bg-header, #f3f3f3);
    border-bottom: 1px solid var(--ms-color-border, #dddbda);
    padding-right: 40px; /* Leave space for menu button */
}

.ms-table-loading-bar.ms-hidden {
    display: none;
}

/**
 * Progress track (background)
 */
.ms-table-loading-bar__track {
    flex: 1;
    height: 6px;
    background-color: var(--ms-color-border, #dddbda);
    border-radius: 3px;
    overflow: hidden;
    margin-right: 12px;
}

/**
 * Progress bar (foreground)
 */
.ms-table-loading-bar__progress {
    height: 100%;
    width: 0%;
    background-color: var(--ms-color-primary, #0070d2);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/**
 * Indeterminate animation (when progress is unknown)
 */
.ms-table-loading-bar--indeterminate .ms-table-loading-bar__progress {
    width: 30%;
    animation: ms-loading-bar-indeterminate 1.5s ease-in-out infinite;
}

@keyframes ms-loading-bar-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

/**
 * Status text
 */
.ms-table-loading-bar__text {
    font-size: var(--ms-font-size-sm, 0.8125rem);
    color: var(--ms-color-text-secondary, #706e6b);
    white-space: nowrap;
    min-width: 100px;
}

/**
 * Cancel button
 */
.ms-table-loading-bar__cancel {
    margin-left: 8px;
    flex-shrink: 0;
}

.ms-table-loading-bar__cancel:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* =============================================================================
   COLUMN SETTINGS PANEL
   ============================================================================= */

/**
 * Column settings panel - modal/dropdown for column customization
 */
.ms-column-settings-panel {
    background: var(--ms-color-bg, #fff);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/**
 * Panel header (hidden when inside side panel)
 */
.ms-column-settings-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ms-color-border, #e5e5e5);
    flex-shrink: 0;
}

.ms-column-settings-panel__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--ms-color-text, #181818);
}

/**
 * Panel body - contains zones
 */
.ms-column-settings-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/**
 * Column Zone - groups columns by sticky behavior
 */
.ms-column-zone {
    border-bottom: 1px solid var(--ms-color-border, #e5e5e5);
}

.ms-column-zone:last-child {
    border-bottom: none;
}

.ms-column-zone--scrollable {
    display: flex;
    flex-direction: column;
    min-height: 100px;
}

.ms-column-zone__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ms-color-bg-alt, #f4f6f9);
    border-bottom: 1px solid var(--ms-color-border, #e5e5e5);
    position: sticky;
    top: 0;
    z-index: 1;
}

.ms-column-zone__icon {
    width: 16px;
    height: 16px;
    fill: var(--ms-color-text-secondary, #706e6b);
}

.ms-column-zone__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ms-color-text-secondary, #706e6b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ms-column-zone__count {
    font-size: 0.75rem;
    color: var(--ms-color-text-secondary, #706e6b);
    background: var(--ms-color-bg, #fff);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

.ms-column-zone__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    min-height: 40px;
}

.ms-column-zone--scrollable .ms-column-zone__list {
    flex: 1;
    overflow-y: auto;
}

.ms-column-zone__empty {
    padding: 12px 16px;
    color: var(--ms-color-text-secondary, #706e6b);
    font-style: italic;
    font-size: 0.8125rem;
    text-align: center;
}

/**
 * Zone drag over state
 */
.ms-column-zone__list--drag-over {
    background-color: var(--ms-color-brand-light, #e5f1ff);
}

/**
 * Column settings item
 */
.ms-column-settings-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    transition: background-color 0.15s ease;
    cursor: default;
    background: var(--ms-color-bg, #fff);
}

.ms-column-settings-item:hover {
    background-color: var(--ms-color-bg-hover, #f3f2f2);
}

.ms-column-settings-item--protected {
    opacity: 0.7;
}

.ms-column-settings-item--dragging {
    background-color: var(--ms-color-brand-light, #e5f1ff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

.ms-column-settings-item--drag-over {
    border-top: 2px solid var(--ms-color-brand, #0070d2);
}

.ms-column-settings-item--drag-over-after {
    border-bottom: 2px solid var(--ms-color-brand, #0070d2);
}

/**
 * Drag handle - FIX: Added fill color for visibility
 */
.ms-column-settings-item__drag-handle {
    cursor: grab;
    padding: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-column-settings-item__drag-handle .slds-icon {
    fill: var(--ms-color-text-secondary, #706e6b);
}

.ms-column-settings-item__drag-handle:hover .slds-icon {
    fill: var(--ms-color-text, #181818);
}

.ms-column-settings-item__drag-handle:active {
    cursor: grabbing;
}

.ms-column-settings-item__drag-handle--disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.ms-column-settings-item__drag-handle--disabled .slds-icon {
    fill: var(--ms-color-text-secondary, #706e6b);
}

/**
 * Checkbox
 */
.ms-column-settings-item__checkbox {
    flex-shrink: 0;
}

.ms-column-settings-item__checkbox--disabled {
    opacity: 0.5;
    pointer-events: none;
}

/**
 * Label
 */
.ms-column-settings-item__label {
    flex: 1;
    font-size: 0.875rem;
    color: var(--ms-color-text, #181818);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
 * Sticky dropdown
 */
.ms-column-settings-item__sticky {
    flex-shrink: 0;
    width: 80px;
}

.ms-column-settings-item__sticky .slds-select {
    padding: 4px 8px;
    font-size: 0.75rem;
    height: auto;
}

.ms-column-settings-item__sticky--disabled {
    opacity: 0.5;
}

.ms-column-settings-item__sticky-label {
    font-size: 0.75rem;
    color: var(--ms-color-text-secondary, #706e6b);
    text-align: center;
    display: block;
}

/**
 * Protected icon
 */
.ms-column-settings-item__protected-icon {
    flex-shrink: 0;
    color: var(--ms-color-text-secondary, #706e6b);
}

/**
 * Panel footer
 */
.ms-column-settings-panel__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--ms-color-border, #e5e5e5);
    flex-shrink: 0;
}

/* =============================================================================
   COLUMN RESIZE HANDLES
   ============================================================================= */

/**
 * Resize handle on column headers
 * Right-side handles only (like Excel/Google Sheets)
 */
.ms-column-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 50;  /* Above column content but below sticky columns (101) */
    background: transparent;
    pointer-events: auto;
}

/* Handles on sticky columns need higher z-index to stay on top */
.ms-table__cell--sticky .ms-column-resize-handle,
.ms-table__cell--sticky-right .ms-column-resize-handle {
    z-index: 102;  /* Above sticky columns (101) */
}

/* Hover: show visual feedback and expand hit area */
.ms-column-resize-handle:hover {
    right: -5px;
    width: 10px;
    background: var(--ms-color-brand, #0070d2);
}

/**
 * Ensure scrollable columns have higher z-index than previous column content
 * but lower than sticky columns
 */
.ms-table__header th:not(.ms-table__cell--sticky):not(.ms-table__cell--sticky-right) {
    z-index: 1;
}

/**
 * Body class during resize - prevents text selection
 */
body.ms-column-resize-active {
    cursor: col-resize !important;
    user-select: none;
}

/**
 * Table class during resize
 */
.ms-table--resizing {
    cursor: col-resize;
}

/**
 * Column currently being resized
 */
.ms-column-resizing {
    background-color: var(--ms-color-brand-light, #e5f1ff) !important;
}

/**
 * Resize indicator line (optional - for visual feedback)
 */
.ms-table__resize-indicator {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--ms-color-brand, #0070d2);
    pointer-events: none;
    z-index: 100;
}

/* =============================================================================
   COLUMN DRAG AND DROP REORDERING
   ============================================================================= */

/**
 * Draggable column header
 */
.ms-column-draggable {
    cursor: grab;
}

.ms-column-draggable:active {
    cursor: grabbing;
}

/**
 * Column being dragged
 */
.ms-column-dragging {
    opacity: 0.4;
    background-color: var(--ms-color-brand-light, #e5f1ff) !important;
}

/**
 * Body class during column reorder - prevents text selection
 */
body.ms-column-reorder-active {
    cursor: grabbing !important;
    user-select: none;
}

/**
 * Ghost element during drag
 */
.ms-column-drag-ghost {
    font-size: var(--ms-font-size-xs, 0.75rem);
    font-weight: var(--ms-font-weight-medium, 500);
    color: var(--ms-color-text-secondary, #706e6b);
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.ms-column-drag-ghost .slds-truncate {
    max-width: 100%;
}

.ms-column-drag-ghost button {
    display: none; /* Hide sort buttons in ghost */
}

/**
 * Drop indicator line
 */
.ms-column-drop-indicator {
    border-radius: 2px;
}

.ms-column-drop-indicator::before,
.ms-column-drop-indicator::after {
    content: '';
    position: absolute;
    left: -4px;
    width: 10px;
    height: 10px;
    background: var(--ms-color-brand, #0070d2);
    border-radius: 50%;
}

.ms-column-drop-indicator::before {
    top: -5px;
}

.ms-column-drop-indicator::after {
    bottom: -5px;
}

/* =============================================================================
   COLUMN SETTINGS BUTTON
   ============================================================================= */

/**
 * Button to open column settings (in table menu)
 */
.btn-column-settings {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =============================================================================
   RESPONSIVE LIST VIEW
   ============================================================================= */

/**
 * Container for list view - replaces table on smaller screens
 * Uses flexbox for proper height management with scrollable content
 */
.ms-table-list {
    display: none; /* Hidden by default, shown via responsive toggle */
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Allow flex shrinking */
}

/* List view mode - container becomes flex column for proper height distribution */
.ms-table-container--list-view.generic-table-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ms-table-container--list-view .ms-table-list {
    display: flex;
    flex: 1;
    min-height: 0; /* Allow flex item to shrink and enable scrolling */
}

.ms-table-container--list-view .generic-table-scroll-overlay,
.ms-table-container--list-view .generic-table-scroll-wrapper,
.ms-table-container--list-view .ms-table {
    display: none;
}

/**
 * Small screen list view adjustments:
 * - Remove card styling (border-radius, shadow)
 * - Make pagination part of scrollable content (not fixed)
 */
@media (max-width: 768px) {
    /* Remove ms-card styling from table wrapper on small screens */
    .ms-table-container--list-view.ms-card,
    .ms-card:has(.ms-table-container--list-view),
    [data-tab-container] .ms-card,
    .js-table-container.ms-card {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    /*
     * List view scrollable layout for small screens:
     * - The entire container scrolls (list + pagination together)
     * - User scrolls to bottom to see pagination
     */

    /* Make the container itself scrollable */
    .ms-table-container--list-view.generic-table-container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* List doesn't need its own scroll - container handles it */
    .ms-table-container--list-view .ms-table-list {
        flex: none;
        height: auto;
        overflow: visible;
    }

    /* Inner scroll container doesn't scroll either */
    .ms-table-container--list-view .ms-table-list__scroll {
        flex: none;
        overflow: visible;
    }

    /* Pagination flows naturally after list content */
    .ms-table-container--list-view .generic-table-pagination,
    .ms-table-container--list-view .infinite-scroll-footer {
        flex-shrink: 0;
    }
}

/**
 * List item - card style for each row
 */
.ms-table-list-item {
    background: #ffffff;
    border: 1px solid #dddbda;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Spaced list items - margin between items */
.ms-table-list--spaced .ms-table-list-item {
    margin-bottom: 8px;
}

.ms-table-list--spaced .ms-table-list-item:last-child {
    margin-bottom: 0;
}

/* Non-spaced list items - no gap, connected borders */
.ms-table-list:not(.ms-table-list--spaced) .ms-table-list-item {
    border-radius: 0;
    margin-bottom: -1px; /* Collapse borders */
}

.ms-table-list:not(.ms-table-list--spaced) .ms-table-list-item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ms-table-list:not(.ms-table-list--spaced) .ms-table-list-item:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-bottom: 0;
}

.ms-table-list-item:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ms-table-list-item--selected {
    border-color: #0070d2;
    background: #f0f8ff;
}

/**
 * List item header - contains checkbox, title, and actions
 */
.ms-table-list-item__header {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 12px;
}

.ms-table-list-item--selected .ms-table-list-item__header {
    background: #e6f2ff;
    border-bottom-color: #b0d4ff;
}

.ms-table-list-item__checkbox {
    flex-shrink: 0;
}

.ms-table-list-item__title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: #16325c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-table-list-item__title-link {
    color: #0070d2;
    text-decoration: none;
}

.ms-table-list-item__title-link:hover {
    text-decoration: underline;
}

.ms-table-list-item__actions {
    flex-shrink: 0;
}

/**
 * List item body - data rows
 */
.ms-table-list-item__body {
    padding: 8px 12px;
}

.ms-table-list-item__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f3f3f3;
}

.ms-table-list-item__row:last-child {
    border-bottom: none;
}

.ms-table-list-item__label {
    color: #706e6b;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 12px;
}

.ms-table-list-item__value {
    color: #16325c;
    font-size: 13px;
    text-align: right;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-table-list-item__value--number {
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}

.ms-table-list-item__value .ms-cell-link {
    color: #0070d2;
    text-decoration: none;
}

.ms-table-list-item__value .ms-cell-link:hover {
    text-decoration: underline;
}

.ms-table-list-item__no-data {
    color: #b0adab;
    font-style: italic;
}

/**
 * Skeleton loading in list view
 */
.ms-table-list-item .ms-skeleton--bar-small {
    display: inline-block;
    width: 60px;
    height: 14px;
}

/**
 * No labels variant - values aligned left
 */
.ms-table-list--no-labels .ms-table-list-item__value {
    text-align: left;
}

/**
 * Compact levels for list view
 * Reduces padding progressively for denser display
 */
/* Compact level 1 */
.ms-table-list--compact-1 .ms-table-list-item__header {
    padding: 10px;
    gap: 10px;
}

.ms-table-list--compact-1 .ms-table-list-item__body {
    padding: 6px 10px;
}

.ms-table-list--compact-1 .ms-table-list-item__row {
    padding: 5px 0;
}

.ms-table-list--compact-1 .ms-table-list-item__title {
    font-size: 13px;
}

.ms-table-list--compact-1 .ms-table-list-item__value {
    font-size: 12px;
}

.ms-table-list--compact-1 .ms-table-list-item__label {
    font-size: 11px;
}

/* Compact level 2 */
.ms-table-list--compact-2 .ms-table-list-item__header {
    padding: 8px;
    gap: 8px;
}

.ms-table-list--compact-2 .ms-table-list-item__body {
    padding: 4px 8px;
}

.ms-table-list--compact-2 .ms-table-list-item__row {
    padding: 4px 0;
}

.ms-table-list--compact-2 .ms-table-list-item__title {
    font-size: 13px;
}

.ms-table-list--compact-2 .ms-table-list-item__value {
    font-size: 12px;
}

.ms-table-list--compact-2 .ms-table-list-item__label {
    font-size: 11px;
}

/* Compact level 3 */
.ms-table-list--compact-3 .ms-table-list-item__header {
    padding: 6px 8px;
    gap: 6px;
}

.ms-table-list--compact-3 .ms-table-list-item__body {
    padding: 2px 8px;
}

.ms-table-list--compact-3 .ms-table-list-item__row {
    padding: 3px 0;
}

.ms-table-list--compact-3 .ms-table-list-item__title {
    font-size: 12px;
}

.ms-table-list--compact-3 .ms-table-list-item__value {
    font-size: 11px;
}

.ms-table-list--compact-3 .ms-table-list-item__label {
    font-size: 10px;
}

/* Spaced list compact adjustments */
.ms-table-list--spaced.ms-table-list--compact-1 .ms-table-list-item {
    margin-bottom: 8px;
}

.ms-table-list--spaced.ms-table-list--compact-2 .ms-table-list-item {
    margin-bottom: 8px;
}

.ms-table-list--spaced.ms-table-list--compact-3 .ms-table-list-item {
    margin-bottom: 8px;
}

/**
 * Select all row in list view header
 */
.ms-table-list__select-all {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    gap: 12px;
    flex-shrink: 0; /* Don't shrink - keep fixed height */
}

.ms-table-list__select-all-label {
    font-size: 12px;
    color: #706e6b;
    font-weight: 500;
}

/**
 * List view scroll container - takes remaining height and scrolls
 */
.ms-table-list__scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Critical for flex scrolling to work */
}

/* Spaced list items - add top padding when there's a select-all row */
.ms-table-list--spaced .ms-table-list__scroll {
    padding-top: 8px;
}

/**
 * List view pagination info
 */
.ms-table-list__info {
    padding: 12px;
    text-align: center;
    color: #706e6b;
    font-size: 12px;
    border-top: 1px solid #dddbda;
}


/* =============================================================================
   EMPTY STATE / NO RESULTS
   ============================================================================= */

/**
 * Empty state container - used when no results found
 * Positioned absolute to center in table container, doesn't scroll with table
 */
.ms-table-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 2rem;
    z-index: 5;
}

.ms-table-empty__icon {
    width: 48px;
    height: 48px;
    fill: var(--ms-color-text-muted, #706e6b);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.ms-table-empty__text {
    color: var(--ms-color-text-muted, #706e6b);
    font-size: var(--ms-font-size-base, 0.875rem);
}

/**
 * Hide the scroll wrapper content when empty (table is hidden but the wrapper is visible)
 * The empty message is positioned in the generic-table-container parent
 */
.generic-table-container--empty .generic-table-scroll-wrapper {
    visibility: hidden;
}

/**
 * Hide shadows when table is empty (no scrollable content)
 */
.generic-table-container--empty .generic-table-scroll-overlay::before,
.generic-table-container--empty .generic-table-scroll-overlay::after {
    display: none;
}

.generic-table-container--empty .ms-table__cell--sticky-last,
.generic-table-container--empty .ms-table__cell--sticky-right-first {
    box-shadow: none !important;
}

/**
 * List view empty state - centered in scroll container
 */
.ms-table-list__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    text-align: center;
    min-height: 120px;
}

.ms-table-list__empty-icon {
    width: 40px;
    height: 40px;
    fill: var(--ms-color-text-muted, #706e6b);
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.ms-table-list__empty-text {
    color: var(--ms-color-text-muted, #706e6b);
    font-size: var(--ms-font-size-sm, 0.8125rem);
}


/* =============================================================================
   LOADING STATE
   ============================================================================= */

/**
 * Hide content and no-results message during loading/search
 * Applied via JavaScript when server data is loading
 */

/* Hide ALL empty state messages during loading */
.generic-table-container--loading .ms-table-empty,
.generic-table-container--loading .ms-table-list__empty {
    display: none !important;
}

/* Table view loading: dim content */
.generic-table-container--loading .ms-table__body {
    opacity: 0.3;
    pointer-events: none;
}

/* List view loading: dim content */
.generic-table-container--loading .ms-table-list__scroll {
    opacity: 0.3;
    pointer-events: none;
}

/* List view loading: also dim the select-all header */
.generic-table-container--loading .ms-table-list__select-all {
    opacity: 0.3;
    pointer-events: none;
}

/**
 * MS Core - Side Panel / Drawer
 *
 * Slide-in panel component for settings, filters, details, or any content.
 * Used by views/components/side-panel.js
 *
 * Structure:
 *   .ms-side-panel-container        - Fixed overlay container
 *     .ms-side-panel__backdrop      - Click-to-close overlay
 *     .ms-side-panel                - The actual panel
 *       .ms-side-panel__header      - Title and close button
 *       .ms-side-panel__content     - Scrollable content area
 *
 * Panel content views can use the generic .ms-panel-content classes
 * for consistent loading, error, and empty states.
 */

/* =============================================================================
   SIDE PANEL CONTAINER
   ============================================================================= */

/**
 * Side panel container - covers the entire viewport
 */
.ms-side-panel-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    pointer-events: none;
}

.ms-side-panel-container--open {
    pointer-events: auto;
}

/**
 * Body class when panel is open - prevents background scroll
 */
body.ms-side-panel-open {
    overflow: hidden;
}


/* =============================================================================
   BACKDROP
   ============================================================================= */

/**
 * Backdrop overlay
 */
.ms-side-panel__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ms-side-panel-container--open .ms-side-panel__backdrop {
    opacity: 1;
}

.ms-side-panel__backdrop--hidden {
    background: transparent;
}


/* =============================================================================
   PANEL
   ============================================================================= */

/**
 * The panel itself
 */
.ms-side-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    max-width: 90vw;
}

.ms-side-panel--right {
    right: 0;
    transform: translateX(100%);
}

.ms-side-panel--left {
    left: 0;
    transform: translateX(-100%);
}

.ms-side-panel-container--open .ms-side-panel--right,
.ms-side-panel-container--open .ms-side-panel--left {
    transform: translateX(0);
}


/* =============================================================================
   PANEL HEADER
   ============================================================================= */

/**
 * Panel header
 */
.ms-side-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #dddbda;
    background: linear-gradient(to bottom, #ffffff, #f7f7f7);
    flex-shrink: 0;
    min-height: 56px;
}

.ms-side-panel__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.ms-side-panel__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-color-primary, #0070d2);
    border-radius: 6px;
}

.ms-side-panel__icon .slds-icon {
    fill: #fff;
}

.ms-side-panel__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #080707;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-side-panel__close {
    flex-shrink: 0;
    margin-left: 12px;
}


/* =============================================================================
   RESPONSIVE - FULLSCREEN ON SMALL SCREENS
   ============================================================================= */

@media (max-width: 600px) {
    .ms-side-panel {
        width: 100% !important;
        max-width: 100vw;
    }

    .ms-side-panel__header {
        padding: 12px 16px;
    }

    .ms-side-panel__title {
        font-size: 16px;
    }
}


/* =============================================================================
   PANEL CONTENT AREA
   ============================================================================= */

/**
 * Panel content area - where the content view is rendered
 */
.ms-side-panel__content {
    flex: 1;
    overflow: auto;
    padding: 0;
    position: relative; /* For overlay positioning */
    display: flex;
    flex-direction: column;
}

/**
 * Content view wrappers - ensure they fill available space
 * This allows ms-panel-content inside to use full height for sticky footer
 */
.ms-side-panel__content > * {
    flex: 1;
    min-height: 0; /* Allow flex shrinking */
}

/**
 * Panel content wrapper - use this class on views that contain ms-panel-content
 * to enable sticky footer behavior
 */
.ms-panel-content-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Let ms-panel-content__body handle scrolling */
}

/**
 * Side panel loading state (used by showLoading())
 */
.ms-side-panel__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    height: 100%;
    gap: 1rem;
}

.ms-side-panel__spinner {
    display: flex;
    gap: 0.5rem;
}

.ms-side-panel__spinner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--ms-color-primary, #0070d2);
    animation: ms-side-panel-bounce 1.4s ease-in-out infinite both;
}

.ms-side-panel__spinner-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.ms-side-panel__spinner-dot:nth-child(2) {
    animation-delay: -0.16s;
}

.ms-side-panel__spinner-dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes ms-side-panel-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.ms-side-panel__loading-text {
    font-size: var(--ms-font-size-sm, 0.875rem);
    color: var(--ms-color-text-muted, #706e6b);
}

/**
 * Side panel error state (used by showError())
 */
.ms-side-panel__error {
    padding: var(--ms-spacing-lg, 1.5rem);
}

/**
 * Side panel saving overlay (used by showSaving())
 * Covers the entire panel (header, content, footer) with semi-transparent overlay and spinner
 * Prevents all interaction while save is in progress
 */
.ms-side-panel__saving-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100; /* Above all panel content */
}

/**
 * Saving state - disable close button
 */
.ms-side-panel--saving .ms-side-panel__close {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/**
 * Saving state - prevent backdrop from receiving clicks
 */
.ms-side-panel-container--saving .ms-side-panel__backdrop {
    pointer-events: none;
    cursor: not-allowed;
}

/* =============================================================================
   PANEL CONTENT STATES (generic, reusable)
   ============================================================================= */

/**
 * Panel content container - use this class on your content view
 */
.ms-panel-content {
    height: 100%;
    flex: 1;
    min-height: 0; /* Allow shrinking in flex context */
    display: flex;
    flex-direction: column;
}

/**
 * Loading state
 */
.ms-panel-content__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ms-spacing-xl, 2rem);
    min-height: 200px;
}

.ms-panel-content__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ms-color-border, #dddbda);
    border-top-color: var(--ms-color-primary, #0070d2);
    border-radius: 50%;
    animation: ms-panel-spin 0.8s linear infinite;
}

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

.ms-panel-content__loading-text {
    margin-top: var(--ms-spacing-md, 1rem);
    color: var(--ms-color-text-muted, #706e6b);
    font-size: var(--ms-font-size-sm, 0.875rem);
}

/**
 * Error state
 */
.ms-panel-content__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ms-spacing-xl, 2rem);
    text-align: center;
}

.ms-panel-content__error-icon {
    width: 48px;
    height: 48px;
    fill: var(--ms-color-error, #c23934);
    margin-bottom: var(--ms-spacing-md, 1rem);
}

.ms-panel-content__error-text {
    color: var(--ms-color-error, #c23934);
    font-size: var(--ms-font-size-sm, 0.875rem);
}

/**
 * Empty state
 */
.ms-panel-content__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ms-spacing-xl, 2rem);
    text-align: center;
}

.ms-panel-content__empty-icon {
    width: 48px;
    height: 48px;
    fill: var(--ms-color-text-muted, #706e6b);
    opacity: 0.5;
    margin-bottom: var(--ms-spacing-md, 1rem);
}

.ms-panel-content__empty-text {
    color: var(--ms-color-text-muted, #706e6b);
    font-size: var(--ms-font-size-sm, 0.875rem);
}

/**
 * Body area - main scrollable content
 */
.ms-panel-content__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--ms-spacing-md, 1rem);
}

/**
 * Body for edit panels - no padding, let inner form handle it
 */
.ms-panel-content__body--edit {
    padding: 0;
}

.ms-panel-content__body--edit .ms-form {
    max-width: none;
    padding-bottom: var(--ms-spacing-lg, 1.5rem);
}

/**
 * Footer area - fixed at bottom for save/cancel buttons
 */
.ms-panel-content__footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--ms-spacing-sm, 0.5rem);
    padding: var(--ms-spacing-md, 1rem);
    border-top: 1px solid var(--ms-color-border, #dddbda);
    background: var(--ms-color-bg-header, #fafaf9);
}


/* =============================================================================
   CONTENT VIEW ADAPTATIONS
   ============================================================================= */

/**
 * Column settings panel - adapts to side panel container
 */
.ms-side-panel__content .ms-column-settings-panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: static;
    width: 100%;
    max-width: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ms-side-panel__content .ms-column-settings-panel__header {
    display: none; /* Use side panel header instead */
}

.ms-side-panel__content .ms-column-settings-panel__body {
    flex: 1;
    overflow-y: auto;
}

.ms-side-panel__content .ms-column-settings-panel__footer {
    padding: 12px 16px;
    border-top: 1px solid #dddbda;
    background: #fafaf9;
}

/**
 * Metadata view - adapts to panel content
 */
.ms-panel-content__body .metadata-actiontransaction-container {
    padding: 0;
}

.ms-panel-content__body .metadata-form-container {
    margin: 0;
}

.ms-panel-content__body .toggle-edit-container {
    display: flex;
    gap: var(--ms-spacing-sm, 0.5rem);
    margin-bottom: var(--ms-spacing-md, 1rem);
    padding-bottom: var(--ms-spacing-md, 1rem);
    border-bottom: 1px solid var(--ms-color-border-light, #e5e5e5);
}

.ms-panel-content__body .form-loaded-buttons {
    display: flex;
    gap: var(--ms-spacing-sm, 0.5rem);
}


/* =============================================================================
   PANEL LIST (Generic, reusable list component for side panels)
   ============================================================================= */

/**
 * Panel list actions bar
 */
.ms-panel-list__actions {
    margin-bottom: var(--ms-spacing-md, 1rem);
}

/**
 * Panel list group - for grouped items with headers
 */
.ms-panel-list__group {
    margin-bottom: var(--ms-spacing-lg, 1.5rem);
}

.ms-panel-list__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ms-spacing-sm, 0.5rem) 0;
}

.ms-panel-list__group-title {
    margin: 0;
    font-size: var(--ms-font-size-sm, 0.875rem);
    font-weight: var(--ms-font-weight-bold, 700);
    color: var(--ms-color-text-primary, #080707);
}

/**
 * Panel list - container
 */
.ms-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/**
 * Panel list item - card style
 */
.ms-panel-list__item {
    display: flex;
    align-items: center;
    padding: var(--ms-spacing-sm, 0.5rem);
    border: 1px solid var(--ms-color-border-light, #e5e5e5);
    border-radius: var(--ms-border-radius, 4px);
    margin-bottom: var(--ms-spacing-sm, 0.5rem);
    gap: var(--ms-spacing-sm, 0.5rem);
    background: #fff;
}

.ms-panel-list__item:last-child {
    margin-bottom: 0;
}

/**
 * Clickable item variant
 */
.ms-panel-list__item--clickable {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ms-panel-list__item--clickable:hover {
    background-color: var(--ms-color-background-highlight, #f4f6f9);
    border-color: var(--ms-color-border, #dddbda);
}

/**
 * Item content area
 */
.ms-panel-list__item-content {
    flex: 1;
    min-width: 0;
}

/**
 * Item primary row (main title/name)
 */
.ms-panel-list__item-primary {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs, 0.25rem);
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.ms-panel-list__item-name {
    font-size: var(--ms-font-size-sm, 0.875rem);
    font-weight: var(--ms-font-weight-medium, 500);
    color: var(--ms-color-text-primary, #080707);
}

.ms-panel-list__item-badge {
    font-size: var(--ms-font-size-xs, 0.75rem);
    color: var(--ms-color-text-muted, #706e6b);
}

/**
 * Item secondary row (subtitle)
 */
.ms-panel-list__item-secondary {
    margin-bottom: 2px;
}

.ms-panel-list__item-subtitle {
    font-size: var(--ms-font-size-xs, 0.75rem);
    color: var(--ms-color-text-secondary, #3e3e3c);
}

/**
 * Item meta row (dates, description)
 */
.ms-panel-list__item-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.ms-panel-list__item-dates {
    font-size: var(--ms-font-size-xs, 0.75rem);
    color: var(--ms-color-text-muted, #706e6b);
}

.ms-panel-list__item-description {
    font-size: var(--ms-font-size-xs, 0.75rem);
    color: var(--ms-color-text-muted, #706e6b);
    font-style: italic;
}

/**
 * Item actions (delete button, arrow, etc.)
 */
.ms-panel-list__item-actions {
    flex-shrink: 0;
}

.ms-panel-list__item-arrow {
    flex-shrink: 0;
    color: var(--ms-color-text-muted, #706e6b);
}

/**
 * MS Dashboard Layout System
 *
 * A responsive 12-column grid layout for dashboard pages.
 * Follows the bento-box widget layout pattern.
 *
 * Usage:
 *   <div class="ms-dashboard">
 *     <div class="ms-dashboard__header">...</div>
 *     <div class="ms-dashboard__grid">
 *       <div class="ms-widget ms-widget--col-8">...</div>
 *       <div class="ms-widget ms-widget--col-4">...</div>
 *     </div>
 *   </div>
 */

/* =============================================================================
   DASHBOARD VARIABLES
   ============================================================================= */

:root {
    /* Dashboard layout */
    --ms-dashboard-gap: 1.5rem;
    --ms-dashboard-padding: 1.5rem;
    --ms-dashboard-max-width: 2000px;

    /* Dashboard background - uses shared surface token */
    --ms-dashboard-bg: var(--ms-color-bg-surface);
}


/* =============================================================================
   DASHBOARD CONTAINER
   ============================================================================= */

.ms-dashboard {
    min-height: 100%;
    background: var(--ms-dashboard-bg);
    padding: var(--ms-dashboard-padding);
}

.ms-dashboard__container {
    max-width: var(--ms-dashboard-max-width);
    margin: 0 auto;
}


/* =============================================================================
   DASHBOARD HEADER
   ============================================================================= */

.ms-dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ms-spacing-lg);
    flex-wrap: wrap;
    gap: var(--ms-spacing-md);
}

.ms-dashboard__header-left {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-md);
}

.ms-dashboard__back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ms-radius-full);
    background: var(--ms-color-bg-card);
    border: 1px solid var(--ms-color-border);
    color: var(--ms-color-text-secondary);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
}

.ms-dashboard__back-btn:hover {
    background: var(--ms-color-bg-hover);
    color: var(--ms-color-text-primary);
    border-color: var(--ms-color-border-focus);
}

.ms-dashboard__title {
    font-size: var(--ms-font-size-xl);
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-primary);
    margin: 0;
    line-height: var(--ms-line-height-tight);
}

.ms-dashboard__subtitle {
    font-size: var(--ms-font-size-sm);
    color: var(--ms-color-text-secondary);
    margin: 0;
}

.ms-dashboard__header-right {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
}


/* =============================================================================
   DASHBOARD GRID - ROW-BASED LAYOUT SYSTEM

   Supports two modes:
   1. Flat grid: Widgets placed directly in grid, auto-wrap
   2. Row-based: Explicit rows with widgets, re-renders on breakpoint change

   Structure (row-based):
   .ms-dashboard__grid
     .ms-dashboard__row
       .ms-widget.ms-widget--col-8
       .ms-widget.ms-widget--col-4
     .ms-dashboard__row
       .ms-widget.ms-widget--col-6
       .ms-widget.ms-widget--col-6
   ============================================================================= */

.ms-dashboard__grid {
    display: flex;
    flex-direction: column;
    gap: var(--ms-dashboard-gap);
}

/* Dashboard row - horizontal container for widgets */
.ms-dashboard__row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--ms-dashboard-gap);
}

/* Hide empty rows */
.ms-dashboard__row:empty {
    display: none;
}

/* Column spans - full width by default for mobile */
.ms-widget--col-1,
.ms-widget--col-2,
.ms-widget--col-3,
.ms-widget--col-4,
.ms-widget--col-5,
.ms-widget--col-6,
.ms-widget--col-7,
.ms-widget--col-8,
.ms-widget--col-9,
.ms-widget--col-10,
.ms-widget--col-11,
.ms-widget--col-12 {
    grid-column: span 12;
}

/* Medium screens (768px+) - enable grid columns */
@media (min-width: 768px) {
    .ms-widget--col-1 { grid-column: span 1; }
    .ms-widget--col-2 { grid-column: span 2; }
    .ms-widget--col-3 { grid-column: span 3; }
    .ms-widget--col-4 { grid-column: span 4; }
    .ms-widget--col-5 { grid-column: span 5; }
    .ms-widget--col-6 { grid-column: span 6; }
    .ms-widget--col-7 { grid-column: span 7; }
    .ms-widget--col-8 { grid-column: span 8; }
    .ms-widget--col-9 { grid-column: span 9; }
    .ms-widget--col-10 { grid-column: span 10; }
    .ms-widget--col-11 { grid-column: span 11; }
    .ms-widget--col-12 { grid-column: span 12; }
}

/* Flat grid fallback - when no rows, widgets go directly in grid */
.ms-dashboard__grid:not(:has(.ms-dashboard__row)) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}


/* =============================================================================
   LOADING STATE
   ============================================================================= */

.ms-dashboard--loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.ms-dashboard__loader {
    text-align: center;
}

.ms-dashboard__loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--ms-color-border);
    border-top-color: var(--ms-color-primary);
    border-radius: 50%;
    animation: ms-dashboard-spin 0.8s linear infinite;
    margin: 0 auto var(--ms-spacing-md);
}

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

.ms-dashboard__loader-text {
    color: var(--ms-color-text-secondary);
    font-size: var(--ms-font-size-sm);
}


/* =============================================================================
   ERROR STATE
   ============================================================================= */

.ms-dashboard--error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.ms-dashboard__error {
    text-align: center;
    max-width: 400px;
    padding: var(--ms-spacing-xl);
}

.ms-dashboard__error-icon {
    width: 64px;
    height: 64px;
    fill: var(--ms-color-error);
    margin-bottom: var(--ms-spacing-md);
}

.ms-dashboard__error-title {
    font-size: var(--ms-font-size-lg);
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-primary);
    margin: 0 0 var(--ms-spacing-sm);
}

.ms-dashboard__error-message {
    color: var(--ms-color-text-secondary);
    margin: 0 0 var(--ms-spacing-lg);
}

/**
 * MS Widget Components
 *
 * Reusable widget card components for dashboard layouts.
 * Includes card structure, badges, avatars, and action items.
 *
 * Usage:
 *   <div class="ms-widget">
 *     <div class="ms-widget__header">
 *       <div class="ms-widget__header-icon">...</div>
 *       <div class="ms-widget__header-text">
 *         <h3 class="ms-widget__title">Title</h3>
 *         <p class="ms-widget__subtitle">Subtitle</p>
 *       </div>
 *     </div>
 *     <div class="ms-widget__content">...</div>
 *     <div class="ms-widget__footer">...</div>
 *   </div>
 */

/* =============================================================================
   WIDGET VARIABLES
   ============================================================================= */

:root {
    /* Widget card */
    --ms-widget-bg: rgba(255, 255, 255, 0.95);
    --ms-widget-border: 1px solid rgba(226, 232, 240, 0.8);
    --ms-widget-radius: 1rem;
    --ms-widget-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --ms-widget-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
    --ms-widget-padding: 1.25rem;

    /* Widget header icon */
    --ms-widget-header-icon-size: 2.5rem;
    --ms-widget-header-icon-bg: var(--ms-color-primary-light);
    --ms-widget-header-icon-color: var(--ms-color-primary);

    /* Badges */
    --ms-badge-success-bg: #ecfdf5;
    --ms-badge-success-color: #047857;
    --ms-badge-warning-bg: #fffbeb;
    --ms-badge-warning-color: #b45309;
    --ms-badge-danger-bg: #fef2f2;
    --ms-badge-danger-color: #dc2626;
    --ms-badge-info-bg: #eff6ff;
    --ms-badge-info-color: #2563eb;
    --ms-badge-neutral-bg: #f3f4f6;
    --ms-badge-neutral-color: #6b7280;

    /* Avatar */
    --ms-avatar-size-sm: 2rem;
    --ms-avatar-size-md: 3rem;
    --ms-avatar-size-lg: 4.5rem;
    --ms-avatar-size-xl: 6rem;
}


/* =============================================================================
   UTILITY: LINK RESET
   Reset default anchor styling for custom link components.
   Only resets inherited link styles (color, underline) - preserves custom hover effects.
   ============================================================================= */

.ms-link-reset {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

.ms-link-reset:hover,
.ms-link-reset:focus {
    text-decoration: none;
}

.ms-link-reset:focus {
    outline: none;
}

.ms-link-reset:visited {
    color: inherit;
}

/* Reset for links inside containers */
.ms-link-reset-container a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

.ms-link-reset-container a:hover,
.ms-link-reset-container a:focus {
    text-decoration: none;
}

.ms-link-reset-container a:visited {
    color: inherit;
}


/* =============================================================================
   WIDGET CARD BASE
   ============================================================================= */

.ms-widget {
    background: var(--ms-widget-bg);
    border: var(--ms-widget-border);
    border-radius: var(--ms-widget-radius);
    box-shadow: var(--ms-widget-shadow);
    /* Section-based padding - no single padding on widget itself */
    padding: 0;
    transition: transform var(--ms-transition-normal), box-shadow var(--ms-transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.ms-widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--ms-widget-shadow-hover);
}

/* Non-interactive widget (no hover effect) */
.ms-widget--static:hover {
    transform: none;
    box-shadow: var(--ms-widget-shadow);
}


/* =============================================================================
   WIDGET HEADER
   ============================================================================= */

.ms-widget__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* Section padding: top + horizontal */
    padding: var(--ms-widget-padding) var(--ms-widget-padding) 0;
    margin-bottom: var(--ms-spacing-md);
}

.ms-widget__header-main {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
}

.ms-widget__header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-widget-header-icon-size);
    height: var(--ms-widget-header-icon-size);
    background: var(--ms-widget-header-icon-bg);
    border-radius: var(--ms-radius-lg);
    flex-shrink: 0;
}

.ms-widget__header-icon svg,
.ms-widget__header-icon .slds-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--ms-widget-header-icon-color);
}

.ms-widget__header-text {
    flex: 1;
    min-width: 0;
}

.ms-widget__title {
    font-size: var(--ms-font-size-base);
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-primary);
    margin: 0;
    line-height: var(--ms-line-height-tight);
}

.ms-widget__subtitle {
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
    margin: 0;
}

.ms-widget__header-actions {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
}


/* =============================================================================
   WIDGET CONTENT
   ============================================================================= */

.ms-widget__content {
    flex: 1;
    /* Section padding: horizontal only, bottom spacing handled by margin */
    padding: 0 var(--ms-widget-padding);
    /* Default bottom margin for spacing before any footer sections */
    margin-bottom: var(--ms-spacing-md);
}

/* When widget has NO footer sections, add bottom padding instead of margin */
.ms-widget:not(:has(.ms-widget__actions)):not(:has(.ms-widget__footer)):not(:has(.ms-widget__period-footer)) .ms-widget__content {
    padding-bottom: var(--ms-widget-padding);
    margin-bottom: 0;
}

/* Widget without header - content needs top padding */
.ms-widget--no-header .ms-widget__content {
    padding-top: var(--ms-widget-padding);
}


/* =============================================================================
   WIDGET FOOTER (Legacy)
   ============================================================================= */

.ms-widget__footer {
    /* Section padding with top border */
    padding: var(--ms-spacing-sm) var(--ms-widget-padding) var(--ms-widget-padding);
    border-top: 1px solid var(--ms-color-border-light);
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
}


/* =============================================================================
   WIDGET ACTION LINKS
   ============================================================================= */

.ms-widget__actions {
    /* Section padding with top border */
    padding: var(--ms-spacing-sm) var(--ms-widget-padding);
    border-top: 1px solid var(--ms-color-border-light);
}

/* When actions is the last section, add bottom padding */
.ms-widget__actions:last-child {
    padding-bottom: var(--ms-widget-padding);
}

/* When widget only has action links (no other content), remove border */
.ms-widget--actions-only .ms-widget__actions {
    border-top: none;
    padding-top: var(--ms-widget-padding);
}


/* =============================================================================
   PERIOD FOOTER
   Period picker component renders inside with 'footer' display mode
   ============================================================================= */

.ms-widget__period-footer {
    /* Section padding with top border + subtle background */
    padding: var(--ms-spacing-sm) var(--ms-widget-padding);
    border-top: 1px solid var(--ms-color-border-light);
    background: var(--ms-color-bg-header);
    border-radius: 0 0 var(--ms-widget-radius) var(--ms-widget-radius);
}

/* Remove bottom margin from content when period footer follows */
.ms-widget:has(.ms-widget__period-footer) .ms-widget__content {
    margin-bottom: var(--ms-spacing-sm);
}

/* When actions exist above period footer, reduce actions bottom padding */
.ms-widget:has(.ms-widget__period-footer) .ms-widget__actions {
    padding-bottom: var(--ms-spacing-sm);
}


/* =============================================================================
   WIDGET STATES
   ============================================================================= */

/* Loading state */
.ms-widget--loading .ms-widget__content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.ms-widget__loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--ms-color-border);
    border-top-color: var(--ms-color-primary);
    border-radius: 50%;
    animation: ms-widget-spin 0.7s linear infinite;
}

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

/* Error state */
.ms-widget--error {
    border-color: var(--ms-color-error);
}

.ms-widget__error {
    text-align: center;
    padding: var(--ms-spacing-md);
}

.ms-widget__error-icon {
    width: 32px;
    height: 32px;
    fill: var(--ms-color-error);
    margin-bottom: var(--ms-spacing-sm);
}

.ms-widget__error-message {
    color: var(--ms-color-error);
    font-size: var(--ms-font-size-sm);
}

/* Empty state */
.ms-widget__empty {
    text-align: center;
    padding: var(--ms-spacing-lg);
    color: var(--ms-color-text-muted);
}

.ms-widget__empty-icon {
    width: 40px;
    height: 40px;
    fill: var(--ms-color-text-muted);
    opacity: 0.5;
    margin-bottom: var(--ms-spacing-sm);
}

.ms-widget__empty-text {
    font-size: var(--ms-font-size-sm);
}


/* =============================================================================
   BADGES
   ============================================================================= */

.ms-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-font-weight-medium);
    border-radius: var(--ms-radius-full);
    line-height: 1.4;
    white-space: nowrap;
}

/* Badge variants */
.ms-badge--success {
    background: var(--ms-badge-success-bg);
    color: var(--ms-badge-success-color);
}

.ms-badge--warning {
    background: var(--ms-badge-warning-bg);
    color: var(--ms-badge-warning-color);
}

.ms-badge--danger {
    background: var(--ms-badge-danger-bg);
    color: var(--ms-badge-danger-color);
}

.ms-badge--info {
    background: var(--ms-badge-info-bg);
    color: var(--ms-badge-info-color);
}

.ms-badge--neutral {
    background: var(--ms-badge-neutral-bg);
    color: var(--ms-badge-neutral-color);
}

/* Badge with dot indicator */
.ms-badge--dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 0.375rem;
    background: currentColor;
}

/* Small badge */
.ms-badge--sm {
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
}

/* Filter count badge - positioned on filter buttons */
.ms-badge--filter-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: var(--ms-badge-info-bg);
    color: var(--ms-badge-info-color);
    border: 2px solid var(--ms-color-bg-page, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* =============================================================================
   AVATAR
   ============================================================================= */

.ms-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: var(--ms-font-weight-semibold);
    text-transform: uppercase;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

/* Avatar sizes */
.ms-avatar--sm {
    width: var(--ms-avatar-size-sm);
    height: var(--ms-avatar-size-sm);
    font-size: var(--ms-font-size-xs);
}

.ms-avatar--md {
    width: var(--ms-avatar-size-md);
    height: var(--ms-avatar-size-md);
    font-size: var(--ms-font-size-base);
}

.ms-avatar--lg {
    width: var(--ms-avatar-size-lg);
    height: var(--ms-avatar-size-lg);
    font-size: var(--ms-font-size-lg);
}

.ms-avatar--xl {
    width: var(--ms-avatar-size-xl);
    height: var(--ms-avatar-size-xl);
    font-size: var(--ms-font-size-xl);
}

/* Avatar gradient backgrounds (deterministic based on initials) */
.ms-avatar--gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.ms-avatar--gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.ms-avatar--gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.ms-avatar--gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.ms-avatar--gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.ms-avatar--gradient-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #555; }
.ms-avatar--gradient-7 { background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%); color: #555; }
.ms-avatar--gradient-8 { background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); }

/* Avatar with image */
.ms-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =============================================================================
   ACTION LIST (for Quick Actions widget)
   ============================================================================= */

.ms-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ms-action-list__item {
    border-bottom: 1px solid var(--ms-color-border-light);
}

.ms-action-list__item:last-child {
    border-bottom: none;
}

.ms-action-list__link {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    padding: var(--ms-spacing-sm) 0;
    color: var(--ms-color-text-primary);
    text-decoration: none;
    transition: all var(--ms-transition-fast);
    cursor: pointer;
}

.ms-action-list__link:hover {
    color: var(--ms-color-primary);
}

.ms-action-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--ms-color-bg-hover);
    border-radius: var(--ms-radius-md);
    margin-right: var(--ms-spacing-sm);
    flex-shrink: 0;
}

.ms-action-list__icon svg,
.ms-action-list__icon .slds-icon {
    width: 1rem;
    height: 1rem;
    fill: var(--ms-color-text-secondary);
}

.ms-action-list__link:hover .ms-action-list__icon {
    background: var(--ms-color-primary-light);
}

.ms-action-list__link:hover .ms-action-list__icon svg,
.ms-action-list__link:hover .ms-action-list__icon .slds-icon {
    fill: var(--ms-color-primary);
}

.ms-action-list__text {
    flex: 1;
    font-size: var(--ms-font-size-sm);
    font-weight: var(--ms-font-weight-medium);
}

.ms-action-list__chevron {
    width: 1rem;
    height: 1rem;
    fill: var(--ms-color-text-muted);
    transition: transform var(--ms-transition-fast);
}

.ms-action-list__link:hover .ms-action-list__chevron {
    transform: translateX(2px);
    fill: var(--ms-color-primary);
}


/* =============================================================================
   INFO ROWS (for displaying labeled data)
   ============================================================================= */

.ms-info-row {
    display: flex;
    align-items: flex-start;
    padding: var(--ms-spacing-sm) 0;
    gap: var(--ms-spacing-sm);
}

.ms-info-row:first-child {
    padding-top: 0;
}

.ms-info-row:last-child {
    padding-bottom: 0;
}

.ms-info-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.ms-info-row__icon svg,
.ms-info-row__icon .slds-icon {
    width: 1rem;
    height: 1rem;
    fill: var(--ms-color-text-muted);
}

.ms-info-row__content {
    flex: 1;
    min-width: 0;
}

.ms-info-row__label {
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
    margin-bottom: 0.125rem;
}

.ms-info-row__value {
    font-size: var(--ms-font-size-sm);
    color: var(--ms-color-text-primary);
    word-break: break-word;
}

.ms-info-row__value--link {
    color: var(--ms-color-text-link);
    text-decoration: none;
}

.ms-info-row__value--link:hover {
    text-decoration: underline;
}


/* =============================================================================
   PROFILE WIDGET SPECIFIC
   ============================================================================= */

.ms-profile-widget__header {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-md);
    margin-bottom: var(--ms-spacing-md);
}

.ms-profile-widget__info {
    flex: 1;
    min-width: 0;
}

.ms-profile-widget__name {
    font-size: var(--ms-font-size-lg);
    font-weight: var(--ms-font-weight-bold);
    color: var(--ms-color-text-primary);
    margin: 0 0 var(--ms-spacing-xs);
    line-height: var(--ms-line-height-tight);
}

.ms-profile-widget__role {
    font-size: var(--ms-font-size-sm);
    color: var(--ms-color-text-secondary);
    margin: 0 0 var(--ms-spacing-sm);
}

.ms-profile-widget__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ms-spacing-xs);
}

.ms-profile-widget__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ms-spacing-md);
    padding-top: var(--ms-spacing-md);
    border-top: 1px solid var(--ms-color-border-light);
}

.ms-profile-widget__meta-item {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-secondary);
}

.ms-profile-widget__meta-item svg,
.ms-profile-widget__meta-item .slds-icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: var(--ms-color-text-muted);
}

/* Inline info section for employment/customer details */
.ms-profile-widget__inline-info {
    margin-top: var(--ms-spacing-md);
    padding-top: var(--ms-spacing-md);
    border-top: 1px solid var(--ms-color-border-light);
}

.ms-profile-widget__inline-title {
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin: 0 0 var(--ms-spacing-sm);
}

.ms-profile-widget__inline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--ms-spacing-sm) var(--ms-spacing-md);
}

.ms-profile-widget__inline-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ms-profile-widget__inline-label {
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
}

.ms-profile-widget__inline-value {
    font-size: var(--ms-font-size-sm);
    color: var(--ms-color-text-primary);
    font-weight: var(--ms-font-weight-medium);
}

/* Upcoming employment warning style */
.ms-profile-widget__inline-info--warning {
    background: var(--ms-color-warning-bg);
    border: 1px solid var(--ms-color-warning-border);
    border-radius: var(--ms-border-radius);
    padding: var(--ms-spacing-sm) var(--ms-spacing-md);
    margin-top: var(--ms-spacing-md);
}

.ms-profile-widget__inline-info--warning .ms-profile-widget__inline-title {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    color: var(--ms-color-warning-text);
}

.ms-profile-widget__inline-icon {
    width: 16px;
    height: 16px;
    fill: var(--ms-color-warning-text);
    flex-shrink: 0;
}

/* Employment change styles */
.ms-profile-widget__changes {
    display: flex;
    flex-direction: column;
    gap: var(--ms-spacing-xs);
    margin-top: var(--ms-spacing-xs);
}

.ms-profile-widget__change-item {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    font-size: var(--ms-font-size-sm);
}

.ms-profile-widget__change-label {
    color: var(--ms-color-text-secondary);
}

.ms-profile-widget__change-value {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
}

.ms-profile-widget__change-from {
    color: var(--ms-color-text-muted);
    text-decoration: line-through;
}

.ms-profile-widget__change-to {
    color: var(--ms-color-warning-text);
    font-weight: var(--ms-font-weight-medium);
}

.ms-profile-widget__change-text {
    margin: 0;
    font-size: var(--ms-font-size-sm);
    color: var(--ms-color-warning-text);
}

/* Subtitle line (for manager info) */
.ms-profile-widget__subtitle {
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
    margin: 0 0 var(--ms-spacing-xs);
}

.ms-profile-widget__subtitle-label {
    color: var(--ms-color-text-muted);
    margin-right: var(--ms-spacing-xs);
}

/* Inline links (for customer/manager navigation) */
.ms-profile-widget__inline-link {
    color: var(--ms-color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ms-profile-widget__inline-link:hover {
    color: var(--ms-color-primary-dark);
    text-decoration: underline;
}

/* Role separator (dash between role and customers) */
.ms-profile-widget__role-separator {
    color: var(--ms-color-text-muted);
}

/* Details section (company, manager info below header) */
.ms-profile-widget__details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ms-spacing-sm) var(--ms-spacing-lg);
    margin-top: var(--ms-spacing-md);
    padding-top: var(--ms-spacing-md);
    border-top: 1px solid var(--ms-color-border-light);
}

.ms-profile-widget__detail-item {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    font-size: var(--ms-font-size-sm);
    color: var(--ms-color-text-secondary);
}

.ms-profile-widget__detail-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    fill: var(--ms-color-text-muted);
}

/* Widget without header modifier - content needs top padding */
.ms-widget--no-header .ms-widget__content {
    padding-top: var(--ms-widget-padding);
}


/* =============================================================================
   HOURS SUMMARY WIDGET
   ============================================================================= */

.ms-hours-summary {
    display: flex;
    flex-direction: column;
    gap: var(--ms-spacing-md);
}

.ms-hours-summary__cards {
    display: flex;
    gap: var(--ms-spacing-sm);
}

/* Hours card */
.ms-hours-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
    padding: var(--ms-spacing-sm);
    background: var(--ms-color-bg-header);
    border-radius: var(--ms-radius-md);
    min-width: 0;
}

.ms-hours-card--primary {
    background: var(--ms-color-primary-light);
}

.ms-hours-card--positive {
    background: var(--ms-badge-success-bg);
}

.ms-hours-card--negative {
    background: var(--ms-badge-danger-bg);
}

.ms-hours-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--ms-radius-sm);
    flex-shrink: 0;
}

.ms-hours-card__icon svg {
    width: 1rem;
    height: 1rem;
    fill: var(--ms-color-text-secondary);
}

.ms-hours-card--primary .ms-hours-card__icon svg {
    fill: var(--ms-color-primary);
}

.ms-hours-card--positive .ms-hours-card__icon svg {
    fill: var(--ms-badge-success-color);
}

.ms-hours-card--negative .ms-hours-card__icon svg {
    fill: var(--ms-badge-danger-color);
}

.ms-hours-card__content {
    flex: 1;
    min-width: 0;
}

.ms-hours-card__value {
    font-size: var(--ms-font-size-md);
    font-weight: var(--ms-font-weight-bold);
    color: var(--ms-color-text-primary);
    line-height: var(--ms-line-height-tight);
}

.ms-hours-card--positive .ms-hours-card__value {
    color: var(--ms-badge-success-color);
}

.ms-hours-card--negative .ms-hours-card__value {
    color: var(--ms-badge-danger-color);
}

.ms-hours-card__label {
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Period indicator */
.ms-hours-summary__period {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ms-spacing-xs);
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
    padding-top: var(--ms-spacing-xs);
    border-top: 1px solid var(--ms-color-border-light);
}

.ms-hours-summary__period svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
}

/* Loading skeleton */
.ms-hours-card--skeleton {
    background: var(--ms-color-bg-header);
}

.ms-hours-card__value-skeleton {
    width: 60%;
    height: 1.25rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-sm);
    margin-bottom: var(--ms-spacing-xs);
}

.ms-hours-card__label-skeleton {
    width: 80%;
    height: 0.75rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-sm);
}

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

/* Responsive adjustments */
@media (max-width: 480px) {
    .ms-hours-summary__cards {
        flex-direction: column;
    }

    .ms-hours-card {
        flex-direction: row;
    }
}


/* =============================================================================
   EMPLOYEE UTILIZATION WIDGET
   ============================================================================= */

.ms-utilization {
    display: flex;
    flex-direction: column;
    gap: var(--ms-spacing-sm);
}

.ms-utilization__boxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ms-spacing-sm);
}

/* Utilization box - Contract/Planned */
.ms-utilization-box {
    flex: 1 1 120px;
    min-width: 120px;
    padding: var(--ms-spacing-sm) var(--ms-spacing-md);
    background: var(--ms-color-bg-header);
    border-radius: var(--ms-radius-md);
}

.ms-utilization-box__label {
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-font-weight-medium);
    color: var(--ms-color-text-secondary);
    margin-bottom: 2px;
}

.ms-utilization-box__percent {
    font-size: 1.5rem;
    font-weight: var(--ms-font-weight-bold);
    color: var(--ms-color-text-primary);
    line-height: 1.2;
}

.ms-utilization-box__hours {
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
}

/* Planned variant - uses primary color background */
.ms-utilization-box--planned {
    background: var(--ms-color-primary-light);
}

.ms-utilization-box--planned .ms-utilization-box__label {
    color: var(--ms-color-primary);
}

.ms-utilization-box--planned .ms-utilization-box__percent {
    color: var(--ms-color-primary-dark, var(--ms-color-primary));
}

.ms-utilization-box--planned .ms-utilization-box__hours {
    color: var(--ms-color-primary);
    opacity: 0.8;
}

/* Capacity bar */
.ms-utilization-capacity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ms-spacing-sm) var(--ms-spacing-md);
    border-radius: var(--ms-radius-md);
    background: var(--ms-color-bg-header);
}

.ms-utilization-capacity--positive {
    background: var(--ms-badge-success-bg);
}

.ms-utilization-capacity--negative {
    background: var(--ms-badge-danger-bg);
}

.ms-utilization-capacity__label {
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-font-weight-medium);
    color: var(--ms-color-text-secondary);
}

.ms-utilization-capacity--positive .ms-utilization-capacity__label {
    color: var(--ms-badge-success-color);
}

.ms-utilization-capacity--negative .ms-utilization-capacity__label {
    color: var(--ms-badge-danger-color);
}

.ms-utilization-capacity__value {
    font-size: var(--ms-font-size-md);
    font-weight: var(--ms-font-weight-bold);
    color: var(--ms-color-text-primary);
}

.ms-utilization-capacity--positive .ms-utilization-capacity__value {
    color: var(--ms-badge-success-color);
}

.ms-utilization-capacity--negative .ms-utilization-capacity__value {
    color: var(--ms-badge-danger-color);
}

/* Skeleton loading */
.ms-utilization-box--skeleton {
    background: var(--ms-color-bg-header);
}

.ms-utilization-box__label-skeleton {
    width: 60%;
    height: 0.75rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-xs);
    margin-bottom: var(--ms-spacing-xs);
}

.ms-utilization-box__percent-skeleton {
    width: 70%;
    height: 1.5rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-xs);
    margin-bottom: 2px;
}

.ms-utilization-box__hours-skeleton {
    width: 40%;
    height: 0.75rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-xs);
}

.ms-utilization-capacity--skeleton {
    background: var(--ms-color-bg-header);
}

.ms-utilization-capacity__skeleton {
    width: 100%;
    height: 1rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-xs);
}


/* =============================================================================
   EMPLOYEE UTILIZATION TREND WIDGET
   ============================================================================= */

.ms-utilization-trend {
    display: flex;
    flex-direction: column;
    gap: var(--ms-spacing-md);
}

/* Trend Chart - Chart.js Canvas Container */
.ms-trend-chart {
    position: relative;
    height: 200px;
    width: 100%;
}

.ms-trend-chart__canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Summary Section */
.ms-trend-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ms-spacing-sm);
    padding-top: var(--ms-spacing-sm);
    border-top: 1px solid var(--ms-color-border-light);
}

.ms-trend-summary__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ms-spacing-xs) var(--ms-spacing-sm);
    background: var(--ms-color-bg-header);
    border-radius: var(--ms-radius-sm);
}

.ms-trend-summary__item--positive {
    background: var(--ms-badge-success-bg);
}

.ms-trend-summary__item--positive .ms-trend-summary__value {
    color: var(--ms-badge-success-color);
}

.ms-trend-summary__item--negative {
    background: var(--ms-badge-danger-bg);
}

.ms-trend-summary__item--negative .ms-trend-summary__value {
    color: var(--ms-badge-danger-color);
}

.ms-trend-summary__item--highlight {
    background: var(--ms-color-primary-light);
}

.ms-trend-summary__item--highlight .ms-trend-summary__value {
    color: var(--ms-color-primary);
}

.ms-trend-summary__item--over {
    background: var(--ms-badge-danger-bg);
}

.ms-trend-summary__item--over .ms-trend-summary__value {
    color: var(--ms-badge-danger-color);
}

.ms-trend-summary__item--optimal {
    background: var(--ms-badge-success-bg);
}

.ms-trend-summary__item--optimal .ms-trend-summary__value {
    color: var(--ms-badge-success-color);
}

.ms-trend-summary__item--moderate {
    background: var(--ms-badge-warning-bg);
}

.ms-trend-summary__item--moderate .ms-trend-summary__value {
    color: var(--ms-badge-warning-color);
}

.ms-trend-summary__item--under {
    background: var(--ms-badge-info-bg);
}

.ms-trend-summary__item--under .ms-trend-summary__value {
    color: var(--ms-badge-info-color);
}

.ms-trend-summary__label {
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
}

.ms-trend-summary__value {
    font-size: var(--ms-font-size-md);
    font-weight: var(--ms-font-weight-bold);
    color: var(--ms-color-text-primary);
}

/* Legend */
.ms-trend-legend {
    display: flex;
    justify-content: center;
    gap: var(--ms-spacing-md);
    padding-top: var(--ms-spacing-xs);
}

.ms-trend-legend__item {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
}

.ms-trend-legend__indicator {
    width: 12px;
    height: 12px;
    border-radius: var(--ms-radius-xs);
}

.ms-trend-legend__item--positive .ms-trend-legend__indicator {
    background: var(--ms-badge-success-color);
}

.ms-trend-legend__item--negative .ms-trend-legend__indicator {
    background: var(--ms-badge-danger-color);
}

/* Empty State */
.ms-trend-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: var(--ms-spacing-lg);
}

.ms-trend-empty__text {
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-sm);
    text-align: center;
}

/* Skeleton Loading */
.ms-trend-chart--skeleton {
    height: 200px;
    position: relative;
    background: var(--ms-color-bg-header);
    border-radius: var(--ms-radius-md);
}

.ms-trend-chart__skeleton-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 100%;
    padding: var(--ms-spacing-md) var(--ms-spacing-sm);
    gap: var(--ms-spacing-sm);
}

.ms-trend-chart__skeleton-bar {
    flex: 1;
    max-width: 50px;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-sm) var(--ms-radius-sm) 0 0;
}

.ms-trend-chart__skeleton-bar:nth-child(1) { animation-delay: 0s; }
.ms-trend-chart__skeleton-bar:nth-child(2) { animation-delay: 0.1s; }
.ms-trend-chart__skeleton-bar:nth-child(3) { animation-delay: 0.2s; }
.ms-trend-chart__skeleton-bar:nth-child(4) { animation-delay: 0.3s; }
.ms-trend-chart__skeleton-bar:nth-child(5) { animation-delay: 0.4s; }
.ms-trend-chart__skeleton-bar:nth-child(6) { animation-delay: 0.5s; }

.ms-trend-summary--skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ms-spacing-sm);
    padding-top: var(--ms-spacing-sm);
    border-top: 1px solid var(--ms-color-border-light);
}

.ms-trend-summary__item-skeleton {
    height: 48px;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-sm);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .ms-trend-chart {
        height: 180px;
    }

    .ms-trend-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-trend-legend {
        flex-direction: column;
        align-items: center;
        gap: var(--ms-spacing-xs);
    }
}


/* =============================================================================
   VACATION BALANCE WIDGET
   ============================================================================= */

.ms-vacation-balance {
    display: flex;
    flex-direction: column;
    gap: var(--ms-spacing-md);
}

/* Hero section - remaining days */
.ms-vacation-balance__hero {
    text-align: left;
}

.ms-vacation-balance__hero-label {
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ms-spacing-xs);
}

.ms-vacation-balance__hero-value {
    display: flex;
    align-items: baseline;
    gap: var(--ms-spacing-xs);
}

.ms-vacation-balance__hero-number {
    font-size: 2.5rem;
    font-weight: var(--ms-font-weight-bold);
    color: #10b981; /* Green color for remaining days */
    line-height: 1;
}

.ms-vacation-balance__hero-unit {
    font-size: var(--ms-font-size-lg);
    color: var(--ms-color-text-secondary);
    font-weight: var(--ms-font-weight-normal);
}

/* Progress bar */
.ms-vacation-balance__progress {
    width: 100%;
}

.ms-vacation-balance__progress-bar {
    display: flex;
    height: 0.75rem;
    border-radius: var(--ms-radius-full);
    overflow: hidden;
    background: var(--ms-color-bg-header);
}

.ms-vacation-balance__progress-segment {
    height: 100%;
    transition: width var(--ms-transition-normal);
}

.ms-vacation-balance__progress-segment--used {
    background: #d1d5db; /* Gray for used */
}

.ms-vacation-balance__progress-segment--planned {
    background: #818cf8; /* Purple/blue for planned */
}

.ms-vacation-balance__progress-segment--remaining {
    background: #a7f3d0; /* Light green for remaining */
}

/* Stats row */
.ms-vacation-balance__stats {
    display: flex;
    border-top: 1px solid var(--ms-color-border-light);
    padding-top: var(--ms-spacing-sm);
}

.ms-vacation-balance__stat {
    flex: 1;
    text-align: center;
    padding: 0 var(--ms-spacing-sm);
}

.ms-vacation-balance__stat:not(:last-child) {
    border-right: 1px solid var(--ms-color-border-light);
}

.ms-vacation-balance__stat-label {
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-font-weight-medium);
    color: var(--ms-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 2px;
}

.ms-vacation-balance__stat-value {
    font-size: var(--ms-font-size-md);
    font-weight: var(--ms-font-weight-bold);
}

.ms-vacation-balance__stat-value--used {
    color: var(--ms-color-text-primary);
}

.ms-vacation-balance__stat-value--planned {
    color: #6366f1; /* Purple/blue */
}

.ms-vacation-balance__stat-value--remaining {
    color: #10b981; /* Green */
}

/* Next vacation info box */
.ms-vacation-balance__next-vacation,
.ms-vacation-balance__next-vacation:visited,
.ms-vacation-balance__next-vacation:active {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
    padding: var(--ms-spacing-md);
    background: #1e293b; /* Dark slate */
    border-radius: var(--ms-radius-lg);
    color: #fff;
    text-decoration: none;
    transition: transform var(--ms-transition-fast), box-shadow var(--ms-transition-fast);
}

.ms-vacation-balance__next-vacation:hover,
.ms-vacation-balance__next-vacation:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3);
}

.ms-vacation-balance__next-vacation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--ms-radius-md);
    flex-shrink: 0;
}

.ms-vacation-balance__next-vacation-icon .slds-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: rgba(255, 255, 255, 0.8);
}

.ms-vacation-balance__next-vacation-content {
    flex: 1;
    min-width: 0;
}

.ms-vacation-balance__next-vacation-label {
    font-size: var(--ms-font-size-xs);
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.ms-vacation-balance__next-vacation-dates {
    font-size: var(--ms-font-size-base);
    font-weight: var(--ms-font-weight-semibold);
    color: #fff;
}

.ms-vacation-balance__next-vacation-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ms-vacation-balance__next-vacation-chevron .slds-icon {
    width: 1rem;
    height: 1rem;
    fill: rgba(255, 255, 255, 0.6);
    transition: transform var(--ms-transition-fast);
}

.ms-vacation-balance__next-vacation:hover .ms-vacation-balance__next-vacation-chevron .slds-icon {
    transform: translateX(2px);
    fill: #fff;
}

/* Pending application card (styled similar to nextVacation but neutral/subtle) */
.ms-vacation-balance__application,
.ms-vacation-balance__application:visited,
.ms-vacation-balance__application:active {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
    padding: var(--ms-spacing-md);
    background: var(--ms-color-bg-header); /* Same as header background */
    border-radius: var(--ms-radius-lg);
    color: var(--ms-color-text-primary);
    text-decoration: none;
    transition: transform var(--ms-transition-fast), box-shadow var(--ms-transition-fast);
}

.ms-vacation-balance__application:hover,
.ms-vacation-balance__application:focus {
    color: var(--ms-color-text-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ms-vacation-balance__application-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--ms-radius-md);
    flex-shrink: 0;
}

.ms-vacation-balance__application-icon .slds-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--ms-color-text-secondary);
}

.ms-vacation-balance__application-content {
    flex: 1;
    min-width: 0;
}

.ms-vacation-balance__application-label {
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.ms-vacation-balance__application-dates {
    font-size: var(--ms-font-size-base);
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-primary);
}

.ms-vacation-balance__application-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ms-vacation-balance__application-chevron .slds-icon {
    width: 1rem;
    height: 1rem;
    fill: var(--ms-color-text-muted);
    transition: transform var(--ms-transition-fast);
}

.ms-vacation-balance__application:hover .ms-vacation-balance__application-chevron .slds-icon {
    transform: translateX(2px);
    fill: var(--ms-color-text-secondary);
}

/* Footer note */
.ms-vacation-balance__note {
    display: flex;
    align-items: flex-start;
    gap: var(--ms-spacing-xs);
    padding-top: var(--ms-spacing-sm);
    border-top: 1px solid var(--ms-color-border-light);
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
}

.ms-vacation-balance__note svg {
    width: 1rem;
    height: 1rem;
    fill: var(--ms-color-text-muted);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Loading skeleton */
.ms-vacation-balance__hero-label-skeleton {
    width: 50%;
    height: 0.75rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-sm);
    margin-bottom: var(--ms-spacing-xs);
}

.ms-vacation-balance__hero-value-skeleton {
    width: 40%;
    height: 2.5rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-sm);
}

.ms-vacation-balance__progress-skeleton {
    width: 100%;
    height: 0.75rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-full);
}

.ms-vacation-balance__stat--skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ms-spacing-xs);
}

.ms-vacation-balance__stat-value-skeleton {
    width: 60%;
    height: 1.25rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-sm);
}

.ms-vacation-balance__stat-label-skeleton {
    width: 80%;
    height: 0.75rem;
    background: linear-gradient(90deg, var(--ms-color-border-light) 25%, var(--ms-color-bg-hover) 50%, var(--ms-color-border-light) 75%);
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s infinite;
    border-radius: var(--ms-radius-sm);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .ms-vacation-balance__hero-number {
        font-size: 2rem;
    }

    .ms-vacation-balance__next-vacation {
        padding: var(--ms-spacing-sm);
    }

    .ms-vacation-balance__stats {
        flex-wrap: wrap;
    }

    .ms-vacation-balance__stat {
        flex: 1 1 33%;
    }
}


/* =============================================================================
   WIDGET SKELETON LOADING
   Skeleton placeholders to maintain layout consistency while widgets load.
   ============================================================================= */

.ms-widget--skeleton {
    pointer-events: none;
}

.ms-widget--skeleton .ms-widget__header-icon--skeleton {
    background: var(--ms-color-bg-hover);
}

/* Profile skeleton */
.ms-widget-skeleton__profile {
    padding: 0;
}

.ms-widget-skeleton__profile-header {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-md);
}

.ms-widget-skeleton__profile-info {
    flex: 1;
    min-width: 0;
}

.ms-widget-skeleton__profile-badges {
    display: flex;
    gap: var(--ms-spacing-xs);
    margin-top: var(--ms-spacing-xs);
}

/* Contact skeleton */
.ms-widget-skeleton__contact {
    padding: 0;
}

.ms-widget-skeleton__row {
    display: flex;
    align-items: flex-start;
    gap: var(--ms-spacing-sm);
}

/* Utilization skeleton */
.ms-widget-skeleton__utilization {
    padding: 0;
}

.ms-widget-skeleton__boxes {
    display: flex;
    gap: var(--ms-spacing-sm);
}

/* Vacation skeleton */
.ms-widget-skeleton__vacation {
    padding: 0;
}

.ms-widget-skeleton__stats {
    display: flex;
    gap: var(--ms-spacing-sm);
    padding-top: var(--ms-spacing-sm);
    border-top: 1px solid var(--ms-color-border-light);
}

/* Chart skeleton */
.ms-widget-skeleton__chart {
    padding: 0;
}

.ms-widget-skeleton__chart-area {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 180px;
    padding: var(--ms-spacing-md);
    background: var(--ms-color-bg-header);
    border-radius: var(--ms-radius-md);
}

/* Actions skeleton */
.ms-widget-skeleton__actions {
    padding: 0;
}

.ms-widget-skeleton__action-row {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
    padding: var(--ms-spacing-sm) 0;
    border-bottom: 1px solid var(--ms-color-border-light);
}

.ms-widget-skeleton__action-row:last-child {
    border-bottom: none;
}

/* Generic skeleton */
.ms-widget-skeleton__generic {
    padding: var(--ms-spacing-md) 0;
}

/* Fade-in animation for widgets replacing skeletons */
.ms-widget--fade-in {
    animation: ms-widget-fade-in 0.3s ease-out;
}

@keyframes ms-widget-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/**
 * MS Core - Period Picker Component
 *
 * A compact period picker with calendar-based selection UI.
 * Supports day, week, month, year, salary-period, and custom range modes.
 */

/* =============================================================================
   INLINE TRIGGER
   ============================================================================= */

.ms-period-picker {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    max-width: 100%;
}

.ms-period-picker--readonly {
    pointer-events: none;
}

/* Navigation buttons */
.ms-period-picker__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-color-bg-card);
    color: var(--ms-color-text-secondary);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}

.ms-period-picker__nav:hover:not(:disabled) {
    background: var(--ms-color-bg-hover);
    border-color: var(--ms-color-primary);
    color: var(--ms-color-primary);
}

.ms-period-picker__nav:focus {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
    border-color: var(--ms-color-border-focus);
}

.ms-period-picker__nav:disabled,
.ms-period-picker__nav--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ms-period-picker__nav-icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

/* Trigger button */
.ms-period-picker__trigger {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-color-bg-card);
    color: var(--ms-color-text-primary);
    font-size: var(--ms-font-size-base);
    font-weight: var(--ms-font-weight-medium);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
    min-width: 0;
    max-width: 200px;
}

/* Full/minimal: match SLDS icon button height (2rem) */
.ms-period-picker--full .ms-period-picker__trigger,
.ms-period-picker--minimal .ms-period-picker__trigger {
    height: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

.ms-period-picker__trigger:hover:not(:disabled) {
    background: var(--ms-color-bg-hover);
    border-color: var(--ms-color-primary);
}

.ms-period-picker__trigger:focus {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
    border-color: var(--ms-color-border-focus);
}

.ms-period-picker__trigger--active {
    background: var(--ms-color-primary-light);
    border-color: var(--ms-color-primary);
}

.ms-period-picker__trigger:disabled {
    cursor: default;
}

.ms-period-picker__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-period-picker__icon {
    width: 0.75rem;
    height: 0.75rem;
    fill: var(--ms-color-text-secondary);
    flex-shrink: 0;
    transition: transform var(--ms-transition-fast);
}

.ms-period-picker__trigger--active .ms-period-picker__icon {
    transform: rotate(180deg);
}


/* =============================================================================
   DROPDOWN CONTAINER
   ============================================================================= */

.ms-pp-dropdown {
    background: var(--ms-color-bg-card);
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-lg);
    box-shadow: var(--ms-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ms-pp-dropdown::-webkit-scrollbar {
    width: 6px;
}

.ms-pp-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.ms-pp-dropdown::-webkit-scrollbar-thumb {
    background: var(--ms-color-border);
    border-radius: 3px;
}

.ms-pp-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--ms-color-text-muted);
}


/* =============================================================================
   MODE TABS
   ============================================================================= */

.ms-pp-modes {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ms-color-border);
    background: var(--ms-color-bg-header);
    padding: var(--ms-spacing-xs);
    gap: 4px;
    flex-shrink: 0;
}

.ms-pp-mode-tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: var(--ms-radius-sm);
    background: transparent;
    color: var(--ms-color-text-secondary);
    font-size: var(--ms-font-size-sm);
    font-weight: var(--ms-font-weight-medium);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
    white-space: nowrap;
    text-align: center;
}

.ms-pp-mode-tab:hover {
    background: var(--ms-color-bg-hover);
    color: var(--ms-color-text-primary);
}

.ms-pp-mode-tab--active {
    background: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
}

.ms-pp-mode-tab--active:hover {
    background: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}


/* =============================================================================
   QUICK SELECTS
   ============================================================================= */

.ms-pp-quick-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--ms-spacing-sm) var(--ms-spacing-md);
    border-bottom: 1px solid var(--ms-color-border-light);
    background: var(--ms-color-bg-header);
}

.ms-pp-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-full);
    background: var(--ms-color-bg-card);
    color: var(--ms-color-text-secondary);
    font-size: var(--ms-font-size-xs);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
}

.ms-pp-quick-btn:hover {
    background: var(--ms-color-primary-light);
    border-color: var(--ms-color-primary);
    color: var(--ms-color-primary);
}

.ms-pp-quick-btn--selected {
    background: var(--ms-color-primary);
    border-color: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
}

.ms-pp-quick-btn--selected:hover {
    background: var(--ms-color-primary-hover);
    border-color: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}

.ms-pp-quick-btn:focus {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
}

.ms-pp-quick-icon {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
}


/* =============================================================================
   CONTENT AREA
   ============================================================================= */

.ms-pp-content {
    padding: var(--ms-spacing-md);
    overflow-y: auto;
    max-height: 420px;
}


/* =============================================================================
   CALENDAR
   ============================================================================= */

.ms-pp-calendar {
    width: 100%;
}

.ms-pp-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ms-spacing-sm);
}

.ms-pp-cal-nav {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--ms-radius-sm);
    background: transparent;
    color: var(--ms-color-text-secondary);
    font-size: 1.25rem;
    transition: all var(--ms-transition-fast);
}

/* Only buttons get pointer and hover effect */
button.ms-pp-cal-nav {
    cursor: pointer;
}

button.ms-pp-cal-nav:hover {
    background: var(--ms-color-bg-hover);
    color: var(--ms-color-primary);
}

/* Placeholder takes space but has no interaction */
.ms-pp-cal-nav--placeholder {
    pointer-events: none;
}

/* Hidden in side-by-side mode, shown when wrapped */
.ms-pp-cal-nav--wrapped-only {
    visibility: hidden;
}

.ms-pp-cal-title {
    font-size: var(--ms-font-size-base);
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-primary);
}

.ms-pp-cal-days-header {
    display: grid;
    grid-template-columns: 1.5rem repeat(7, 1fr);
    text-align: center;
    margin-bottom: 4px;
}

.ms-pp-cal-wk-header {
    padding: 4px 4px 4px 0;
}

.ms-pp-cal-day-name {
    font-size: var(--ms-font-size-xs);
    font-weight: var(--ms-font-weight-medium);
    color: var(--ms-color-text-muted);
    padding: 4px 0;
    text-transform: uppercase;
}

.ms-pp-cal-grid {
    display: grid;
    grid-template-columns: 1.5rem repeat(7, 1fr);
    gap: 2px;
}

.ms-pp-cal-wk {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
    font-size: 0.625rem;
    color: var(--ms-color-text-muted);
    user-select: none;
    opacity: 0.6;
}


/* =============================================================================
   CALENDAR DAYS
   ============================================================================= */

/* Day cells - using buttons for better click handling */
.ms-pp-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    border: none;
    border-radius: var(--ms-radius-sm);
    background: transparent;
    font-size: var(--ms-font-size-sm);
    font-family: inherit;
    color: var(--ms-color-text-primary);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
    user-select: none;
    padding: 0;
    margin: 0;
    outline: none;
}

.ms-pp-day:focus {
    box-shadow: 0 0 0 2px var(--ms-color-primary-light);
}

.ms-pp-day:hover:not(.ms-pp-day--disabled):not(.ms-pp-day--empty):not(.ms-pp-day--selected):not(.ms-pp-day--in-range):not(.ms-pp-day--range-start):not(.ms-pp-day--range-end):not(.ms-pp-day--hover-range) {
    background: var(--ms-color-bg-hover);
}

.ms-pp-day--empty {
    cursor: default;
}

.ms-pp-day--disabled {
    color: var(--ms-color-text-disabled);
    cursor: not-allowed;
    background: var(--ms-color-bg-disabled, rgba(0, 0, 0, 0.03));
    text-decoration: line-through;
    opacity: 0.5;
}

.ms-pp-day--disabled:hover {
    background: var(--ms-color-bg-disabled, rgba(0, 0, 0, 0.03));
}

.ms-pp-day--today {
    font-weight: var(--ms-font-weight-bold);
    color: var(--ms-color-primary);
}

.ms-pp-day--today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ms-color-primary);
}

.ms-pp-day {
    position: relative;
}

/* Selected single day */
.ms-pp-day--selected {
    background: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
    font-weight: var(--ms-font-weight-medium);
}

.ms-pp-day--selected:hover {
    background: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}

/* Range selection */
.ms-pp-day--in-range {
    background: var(--ms-color-primary-light);
    color: var(--ms-color-primary);
    border-radius: 0;
}

.ms-pp-day--in-range:hover {
    background: color-mix(in srgb, var(--ms-color-primary-light), var(--ms-color-primary) 15%);
}

.ms-pp-day--range-start {
    background: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
    border-radius: var(--ms-radius-sm) 0 0 var(--ms-radius-sm);
}

.ms-pp-day--range-start:hover {
    background: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}

.ms-pp-day--range-end {
    background: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
    border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
}

.ms-pp-day--range-end:hover {
    background: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}

.ms-pp-day--range-start.ms-pp-day--range-end {
    border-radius: var(--ms-radius-sm);
}

/* Week hover highlighting */
.ms-pp-day--hover-range {
    background: var(--ms-color-bg-hover);
    border-radius: 0;
}

.ms-pp-day--hover-start {
    border-radius: var(--ms-radius-sm) 0 0 var(--ms-radius-sm);
}

.ms-pp-day--hover-end {
    border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
}

/* When both selected and hovered, keep selected styling */
.ms-pp-day--in-range.ms-pp-day--hover-range {
    background: color-mix(in srgb, var(--ms-color-primary-light), var(--ms-color-primary) 15%);
}

.ms-pp-day--range-start.ms-pp-day--hover-range,
.ms-pp-day--range-end.ms-pp-day--hover-range {
    background: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}


/* =============================================================================
   DUAL CALENDAR (Custom Range)
   ============================================================================= */

.ms-pp-dual-calendar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ms-spacing-lg);
}

.ms-pp-range-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ms-spacing-sm);
    padding: var(--ms-spacing-md);
    margin-top: var(--ms-spacing-sm);
    border-top: 1px solid var(--ms-color-border-light);
    font-size: var(--ms-font-size-sm);
    color: var(--ms-color-text-secondary);
    flex-wrap: wrap;
}

.ms-pp-range-date {
    font-weight: var(--ms-font-weight-medium);
    color: var(--ms-color-text-primary);
    padding: 0.25rem 0.5rem;
    background: var(--ms-color-primary-light);
    border-radius: var(--ms-radius-sm);
}

.ms-pp-range-arrow {
    color: var(--ms-color-text-muted);
    cursor: help;
    font-size: 1.125rem;
}

.ms-pp-range-placeholder {
    color: var(--ms-color-text-muted);
    font-style: italic;
}

/* Range Input Groups - for manual date entry */
.ms-pp-range-input-group {
    display: flex;
    flex: 1;
    min-width: 0;
    max-width: 180px;
}

.ms-pp-range-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
}

.ms-pp-range-input {
    flex: 1;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--ms-color-border);
    background: var(--ms-color-bg-card);
    color: var(--ms-color-text-primary);
    font-size: var(--ms-font-size-sm);
    font-family: inherit;
    transition: all var(--ms-transition-fast);
}

/* From input - rounded left corners only */
.ms-pp-range-input--from {
    border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
    border-left: none;
}

/* To input - rounded right corners only */
.ms-pp-range-input--to {
    border-radius: var(--ms-radius-sm) 0 0 var(--ms-radius-sm);
    border-right: none;
}

.ms-pp-range-input:focus {
    outline: none;
    border-color: var(--ms-color-primary);
    box-shadow: var(--ms-shadow-focus);
    z-index: 1;
    position: relative;
}

.ms-pp-range-input:hover:not(:focus) {
    border-color: var(--ms-color-border-hover, var(--ms-color-text-muted));
}

/* Goto button - scrolls calendar to the date */
.ms-pp-goto-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--ms-color-border);
    background: var(--ms-color-bg-card);
    color: var(--ms-color-text-secondary);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
    flex-shrink: 0;
}

/* From goto button - left side, rounded left */
.ms-pp-goto-btn--from {
    border-radius: var(--ms-radius-sm) 0 0 var(--ms-radius-sm);
    border-right: 1px solid var(--ms-color-border);

}

/* To goto button - right side, rounded right */
.ms-pp-goto-btn--to {
    border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
    border-left: 1px solid var(--ms-color-border);
}

.ms-pp-goto-btn svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

.ms-pp-goto-btn:hover:not(:disabled) {
    background: var(--ms-color-primary-light);
    border-color: var(--ms-color-primary);
    color: var(--ms-color-primary);
}

.ms-pp-goto-btn:focus {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
    border-color: var(--ms-color-border-focus);
    z-index: 1;
    position: relative;
}

.ms-pp-goto-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* =============================================================================
   MONTH GRID
   ============================================================================= */

.ms-pp-year-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ms-spacing-md);
    margin-bottom: var(--ms-spacing-md);
}

.ms-pp-year-prev,
.ms-pp-year-next {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--ms-radius-sm);
    background: transparent;
    color: var(--ms-color-text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--ms-transition-fast);
}

.ms-pp-year-prev:hover,
.ms-pp-year-next:hover {
    background: var(--ms-color-bg-hover);
    color: var(--ms-color-primary);
}

.ms-pp-year-label {
    font-size: var(--ms-font-size-lg);
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-primary);
    min-width: 60px;
    text-align: center;
}

.ms-pp-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ms-spacing-sm);
}

.ms-pp-month-chip {
    position: relative;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-color-bg-card);
    color: var(--ms-color-text-primary);
    font-size: var(--ms-font-size-sm);
    font-weight: var(--ms-font-weight-medium);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
    text-align: center;
}

.ms-pp-month-chip:hover:not(.ms-pp-month-chip--disabled):not(.ms-pp-month-chip--selected) {
    background: var(--ms-color-bg-hover);
    border-color: var(--ms-color-primary);
}

.ms-pp-month-chip--current {
    color: var(--ms-color-primary);
    font-weight: var(--ms-font-weight-semibold);
}

.ms-pp-month-chip--current::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ms-color-primary);
}

.ms-pp-month-chip--selected {
    background: var(--ms-color-primary);
    border-color: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
}

.ms-pp-month-chip--selected:hover {
    background: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}

.ms-pp-month-chip--selected.ms-pp-month-chip--current::after {
    background: var(--ms-color-text-inverse);
}

.ms-pp-month-chip--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* =============================================================================
   YEAR GRID
   ============================================================================= */

.ms-pp-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ms-spacing-sm);
}

.ms-pp-year-chip {
    position: relative;
    padding: 1rem 0.75rem;
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-color-bg-card);
    color: var(--ms-color-text-primary);
    font-size: var(--ms-font-size-base);
    font-weight: var(--ms-font-weight-medium);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
    text-align: center;
}

.ms-pp-year-chip:hover:not(.ms-pp-year-chip--disabled):not(.ms-pp-year-chip--selected) {
    background: var(--ms-color-bg-hover);
    border-color: var(--ms-color-primary);
}

.ms-pp-year-chip--current {
    color: var(--ms-color-primary);
    font-weight: var(--ms-font-weight-semibold);
}

.ms-pp-year-chip--current::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ms-color-primary);
}

.ms-pp-year-chip--selected {
    background: var(--ms-color-primary);
    border-color: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
}

.ms-pp-year-chip--selected:hover {
    background: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}

.ms-pp-year-chip--selected.ms-pp-year-chip--current::after {
    background: var(--ms-color-text-inverse);
}

.ms-pp-year-chip--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* =============================================================================
   SALARY PERIOD CHIPS
   ============================================================================= */

.ms-pp-salary-grid {
    display: grid;
    gap: var(--ms-spacing-sm);
}

.ms-pp-salary-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--ms-spacing-sm) var(--ms-spacing-md);
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-color-bg-card);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
    text-align: left;
}

.ms-pp-salary-chip:hover:not(.ms-pp-salary-chip--disabled):not(.ms-pp-salary-chip--selected) {
    background: var(--ms-color-bg-hover);
    border-color: var(--ms-color-primary);
}

.ms-pp-salary-chip--current .ms-pp-salary-name {
    color: var(--ms-color-primary);
    font-weight: var(--ms-font-weight-semibold);
}

.ms-pp-salary-chip--current::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--ms-spacing-sm);
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ms-color-primary);
}

.ms-pp-salary-chip--selected {
    background: var(--ms-color-primary);
    border-color: var(--ms-color-primary);
}

.ms-pp-salary-chip--selected:hover {
    background: var(--ms-color-primary-hover);
}

.ms-pp-salary-chip--selected.ms-pp-salary-chip--current::after {
    background: var(--ms-color-text-inverse);
}

.ms-pp-salary-chip--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ms-pp-salary-name {
    font-size: var(--ms-font-size-sm);
    font-weight: var(--ms-font-weight-medium);
    color: var(--ms-color-text-primary);
}

.ms-pp-salary-chip--selected .ms-pp-salary-name {
    color: var(--ms-color-text-inverse);
}

.ms-pp-salary-dates {
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-secondary);
    margin-top: 2px;
}

.ms-pp-salary-chip--selected .ms-pp-salary-dates {
    color: rgba(255, 255, 255, 0.8);
}


/* =============================================================================
   LOADING & EMPTY STATES
   ============================================================================= */

.ms-pp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ms-spacing-xl);
}

.ms-pp-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--ms-color-border);
    border-top-color: var(--ms-color-primary);
    border-radius: 50%;
    animation: ms-pp-spin 0.8s linear infinite;
}

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

.ms-pp-empty {
    text-align: center;
    padding: var(--ms-spacing-xl);
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-sm);
}


/* =============================================================================
   INLINE DROPDOWN MODE
   ============================================================================= */

.ms-pp-dropdown--inline {
    position: static;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: 1px solid var(--ms-color-border);
}

.ms-pp-dropdown--inline .ms-pp-content {
    max-height: none;
    overflow: visible;
}


/* =============================================================================
   COMPACT VARIANT
   ============================================================================= */

/* Calendar icon for icon-only mode */
.ms-period-picker__calendar-icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* -----------------------------------------------------------------------------
   COMPACT MODE - Smaller version with all elements
   ----------------------------------------------------------------------------- */

.ms-period-picker--compact {
    gap: 2px;
}

.ms-period-picker--compact .ms-period-picker__nav {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.875rem;
}

.ms-period-picker--compact .ms-period-picker__trigger {
    padding: 0.25rem 0.5rem;
    font-size: var(--ms-font-size-sm);
    max-width: 150px;
}

.ms-period-picker--compact .ms-period-picker__icon {
    width: 0.625rem;
    height: 0.625rem;
}

/* -----------------------------------------------------------------------------
   MINIMAL MODE - DEPRECATED: Use display:'full' with showNav:false instead
   ----------------------------------------------------------------------------- */

.ms-period-picker--minimal {
    gap: 0;
}

.ms-period-picker--minimal .ms-period-picker__trigger {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: var(--ms-font-size-sm);
}

.ms-period-picker--minimal .ms-period-picker__icon {
    width: 0.625rem;
    height: 0.625rem;
}

/* -----------------------------------------------------------------------------
   ICON MODE - Calendar icon only
   ----------------------------------------------------------------------------- */

.ms-period-picker--icon {
    gap: 0;
}

.ms-period-picker--icon .ms-period-picker__trigger {
    padding: 0.375rem;
    min-width: auto;
}

.ms-period-picker--icon .ms-period-picker__calendar-icon {
    width: 1.125rem;
    height: 1.125rem;
}

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

@media (max-width: 640px) {
    .ms-pp-dropdown {
        max-width: calc(100vw - 16px);
    }

    .ms-pp-dual-calendar {
        grid-template-columns: 1fr;
        gap: var(--ms-spacing-md);
    }

    /* When wrapped: show next button on first calendar, hide nav on second */
    .ms-pp-dual-calendar .ms-pp-calendar--first .ms-pp-cal-nav--wrapped-only {
        visibility: visible;
    }

    .ms-pp-dual-calendar .ms-pp-calendar--second .ms-pp-cal-nav {
        visibility: hidden;
    }

    .ms-pp-mode-tab {
        padding: 0.5rem 0.5rem;
        font-size: var(--ms-font-size-xs);
    }

    .ms-pp-month-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ms-pp-year-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ms-pp-quick-selects {
        padding: var(--ms-spacing-xs) var(--ms-spacing-sm);
    }

    .ms-pp-quick-btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.6875rem;
    }

    .ms-pp-content {
        padding: var(--ms-spacing-sm);
    }

    .ms-pp-day {
        height: 2rem;
        font-size: var(--ms-font-size-xs);
    }
}


/* =============================================================================
   INSIDE SIDE PANEL
   ============================================================================= */

/* Dropdown inside side panel - fill entire panel */
.ms-side-panel__content .ms-pp-dropdown {
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    max-height: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ms-side-panel__content .ms-pp-content {
    flex: 1;
    max-height: none;
    overflow-y: auto;
}

/* Force single column for calendars in side panel on small screens */
@media (max-width: 400px) {
    .ms-side-panel__content .ms-pp-dual-calendar {
        grid-template-columns: 1fr;
    }

    .ms-side-panel__content .ms-pp-dual-calendar .ms-pp-calendar--first .ms-pp-cal-nav--wrapped-only {
        visibility: visible;
    }

    .ms-side-panel__content .ms-pp-dual-calendar .ms-pp-calendar--second .ms-pp-cal-nav {
        visibility: hidden;
    }
}


/* =============================================================================
   FOOTER MODE - Simple inline info display for widget footers
   ============================================================================= */

.ms-period-picker--footer {
    width: 100%;
    justify-content: center;
}

.ms-period-picker__footer-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ms-spacing-xs);
    font-size: var(--ms-font-size-xs);
    color: var(--ms-color-text-muted);
}

.ms-period-picker__footer-icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
    flex-shrink: 0;
}

.ms-period-picker--footer .ms-period-picker__text {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

.ms-period-picker__change-link {
    color: var(--ms-color-text-link);
    text-decoration: none;
    cursor: pointer;
    margin-left: var(--ms-spacing-2xs);
    padding: 0;
    border: none;
    background: none;
    font-size: inherit;
    font-family: inherit;
}

.ms-period-picker__change-link:hover {
    text-decoration: underline;
}

/**
 * MS Core - Pagination Component
 *
 * Pagination controls for navigating through paged data.
 * Includes info text and navigation buttons.
 *
 * Usage:
 *   <div class="ms-pagination">
 *       <span class="ms-pagination__info">Showing 1-50 of 200</span>
 *       <div class="ms-pagination__controls">
 *           <button class="ms-pagination__btn">Previous</button>
 *           <button class="ms-pagination__btn">Next</button>
 *       </div>
 *   </div>
 */

/* =============================================================================
   PAGINATION CONTAINER
   ============================================================================= */

/**
 * Base pagination container
 */
.ms-pagination {
    padding: var(--ms-spacing-md);
    border-top: 1px solid var(--ms-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/**
 * Ensure inner content fills the width
 */
.ms-pagination > * {
    width: 100%;
}

/**
 * Fixed pagination - stays at bottom, never scrolls
 * Use in flex containers as the last child
 */
.ms-pagination--fixed {
    flex-shrink: 0;
    background: var(--ms-color-bg-card);
}

/**
 * Compact pagination - reduced padding
 */
.ms-pagination--compact {
    padding: var(--ms-spacing-sm) var(--ms-spacing-md);
}

/**
 * Centered pagination
 */
.ms-pagination--centered {
    justify-content: center;
}


/* =============================================================================
   PAGINATION INFO
   ============================================================================= */

/**
 * Pagination info text - "Showing X-Y of Z"
 */
.ms-pagination__info {
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-base);
}

/**
 * Highlighted count in info
 */
.ms-pagination__count {
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-secondary);
}


/* =============================================================================
   PAGINATION CONTROLS
   ============================================================================= */

/**
 * Pagination controls container
 */
.ms-pagination__controls {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
}

/**
 * Pagination button
 */
.ms-pagination__btn {
    border-radius: var(--ms-radius-md) !important;
    transition: background-color var(--ms-transition-fast);
}

.ms-pagination__btn:hover:not(:disabled) {
    background-color: var(--ms-color-primary-light);
}

.ms-pagination__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/**
 * Page number buttons
 */
.ms-pagination__page {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ms-font-size-sm);
    color: var(--ms-color-text-secondary);
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-color-bg-card);
    cursor: pointer;
    transition: all var(--ms-transition-fast);
}

.ms-pagination__page:hover {
    border-color: var(--ms-color-primary);
    color: var(--ms-color-primary);
}

.ms-pagination__page--active {
    background-color: var(--ms-color-primary);
    border-color: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
}

.ms-pagination__page--active:hover {
    background-color: var(--ms-color-primary-hover);
    border-color: var(--ms-color-primary-hover);
    color: var(--ms-color-text-inverse);
}

/**
 * Ellipsis between page numbers
 */
.ms-pagination__ellipsis {
    padding: 0 var(--ms-spacing-xs);
    color: var(--ms-color-text-muted);
}


/* =============================================================================
   PAGINATION WITH PAGE SIZE SELECTOR
   ============================================================================= */

/**
 * Page size selector container
 */
.ms-pagination__size {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
}

.ms-pagination__size-label {
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-sm);
}

.ms-pagination__size-select {
    min-width: 70px;
    font-size: var(--ms-font-size-sm);
}


/* =============================================================================
   PAGINATION VARIANTS
   ============================================================================= */

/**
 * Simple pagination - just prev/next
 */
.ms-pagination--simple {
    justify-content: flex-end;
}

.ms-pagination--simple .ms-pagination__info {
    display: none;
}

/**
 * Full pagination - includes page numbers
 */
.ms-pagination--full .ms-pagination__controls {
    gap: var(--ms-spacing-sm);
}

/**
 * Borderless pagination
 */
.ms-pagination--borderless {
    border-top: none;
}


/* =============================================================================
   GENERIC TABLE PAGE SIZE SELECTOR
   ============================================================================= */

/**
 * Page size selector inline with pagination info
 * Uses SLDS form elements with custom sizing
 */
.generic-table-pagination .page-size-select {
    min-width: 70px;
    max-width: 80px;
    height: 28px;
    padding: 0 var(--ms-spacing-md) 0 var(--ms-spacing-sm);
    font-size: var(--ms-font-size-sm);
    line-height: 1;
}

.generic-table-pagination .slds-form-element--horizontal {
    margin-bottom: 0;
}

.generic-table-pagination .slds-form-element--horizontal .slds-form-element__label {
    margin-bottom: 0;
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-sm);
    padding-top: 0;
    white-space: nowrap;
}

.generic-table-pagination .slds-form-element--horizontal .slds-form-element__control {
    margin-top: 0;
}


/* =============================================================================
   INFINITE SCROLL FOOTER
   ============================================================================= */

/**
 * Infinite scroll footer - shows count info
 */
.infinite-scroll-footer {
    padding: var(--ms-spacing-sm) var(--ms-spacing-md);
    border-top: 1px solid var(--ms-color-border);
    background: var(--ms-color-bg-card);
}

/**
 * Infinite scroll loader
 */
.infinite-scroll-loader {
    padding: var(--ms-spacing-md);
    background: var(--ms-color-bg-page);
}


/* =============================================================================
   COMPACT LEVELS - REDUCED PADDING
   ============================================================================= */

/**
 * Compact level 1 - moderate reduction
 */
.generic-table-container.ms-table--compact-1 .generic-table-pagination {
    padding: 0.625rem 0.75rem;
}

.generic-table-container.ms-table--compact-1 .infinite-scroll-footer {
    padding: 0.375rem 0.75rem;
}

/**
 * Compact level 2 - more compact
 */
.generic-table-container.ms-table--compact-2 .generic-table-pagination {
    padding: 0.5rem 0.625rem;
}

.generic-table-container.ms-table--compact-2 .generic-table-pagination .pagination-info {
    font-size: 0.8125rem;
}

.generic-table-container.ms-table--compact-2 .generic-table-pagination .page-size-select {
    height: 26px;
    font-size: 0.75rem;
}

.generic-table-container.ms-table--compact-2 .generic-table-pagination .ms-pagination__btn {
    width: 1.625rem;
    height: 1.625rem;
}

.generic-table-container.ms-table--compact-2 .generic-table-pagination .ms-pagination__btn .slds-button__icon {
    width: 0.75rem;
    height: 0.75rem;
}

.generic-table-container.ms-table--compact-2 .infinite-scroll-footer {
    padding: 0.25rem 0.625rem;
}

.generic-table-container.ms-table--compact-2 .infinite-scroll-footer .pagination-info {
    font-size: 0.8125rem;
}

/**
 * Compact level 3 - very compact
 */
.generic-table-container.ms-table--compact-3 .generic-table-pagination {
    padding: 0.375rem 0.5rem;
}

.generic-table-container.ms-table--compact-3 .generic-table-pagination .pagination-info {
    font-size: 0.75rem;
}

.generic-table-container.ms-table--compact-3 .generic-table-pagination .page-size-select {
    height: 24px;
    min-width: 60px;
    max-width: 70px;
    font-size: 0.75rem;
    padding: 0 0.5rem;
}

.generic-table-container.ms-table--compact-3 .generic-table-pagination label[for^="page-size"] {
    font-size: 0.75rem;
}

.generic-table-container.ms-table--compact-3 .generic-table-pagination .ms-pagination__btn {
    width: 1.5rem;
    height: 1.5rem;
}

.generic-table-container.ms-table--compact-3 .generic-table-pagination .ms-pagination__btn .slds-button__icon {
    width: 0.625rem;
    height: 0.625rem;
}

.generic-table-container.ms-table--compact-3 .infinite-scroll-footer {
    padding: 0.1875rem 0.5rem;
}

.generic-table-container.ms-table--compact-3 .infinite-scroll-footer .pagination-info {
    font-size: 0.75rem;
}


/* =============================================================================
   RESPONSIVE PAGINATION - SMALL SCREENS
   ============================================================================= */

/**
 * Compact pagination for mobile/small screens
 * Applied when in list view mode or at small breakpoints
 */
@media (max-width: 768px) {
    .generic-table-pagination {
        padding: 0.5rem 0.75rem;
    }

    .generic-table-pagination .slds-grid {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .generic-table-pagination .slds-col.slds-grow {
        flex: 0 0 100%;
        order: 2;
        text-align: center;
    }

    .generic-table-pagination .slds-col.slds-no-flex {
        flex: 1 1 100%;
        order: 1;
    }

    .generic-table-pagination .slds-col.slds-no-flex > .slds-grid {
        justify-content: space-between;
        width: 100%;
    }

    /* Page size selector - more compact */
    .generic-table-pagination .slds-m-right--medium {
        margin-right: 0.5rem !important;
    }

    .generic-table-pagination .slds-m-right--medium label {
        display: none; /* Hide "Rows:" label on small screens */
    }

    .generic-table-pagination .page-size-select {
        min-width: 60px;
        max-width: 70px;
        height: 26px;
        padding: 0 0.5rem;
        font-size: 0.75rem;
    }

    /* Pagination buttons - more compact */
    .generic-table-pagination .slds-button-group {
        display: flex;
        gap: 2px;
    }

    .generic-table-pagination .ms-pagination__btn {
        width: 28px;
        height: 28px;
        padding: 0;
    }

    .generic-table-pagination .ms-pagination__btn .slds-button__icon {
        width: 0.75rem;
        height: 0.75rem;
    }

    /* Pagination info text - smaller */
    .generic-table-pagination .pagination-info {
        font-size: 0.75rem;
    }
}

/**
 * List view pagination - always compact
 */
.ms-table-container--list-view .generic-table-pagination {
    padding: 0.5rem 0.75rem;
}

.ms-table-container--list-view .generic-table-pagination .slds-grid {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ms-table-container--list-view .generic-table-pagination .slds-col.slds-grow {
    flex: 0 0 100%;
    order: 2;
    text-align: center;
}

.ms-table-container--list-view .generic-table-pagination .slds-col.slds-no-flex {
    flex: 1 1 100%;
    order: 1;
}

.ms-table-container--list-view .generic-table-pagination .slds-col.slds-no-flex > .slds-grid {
    justify-content: space-between;
    width: 100%;
}

.ms-table-container--list-view .generic-table-pagination .slds-m-right--medium {
    margin-right: 0.5rem !important;
}

.ms-table-container--list-view .generic-table-pagination .slds-m-right--medium label {
    display: none;
}

.ms-table-container--list-view .generic-table-pagination .page-size-select {
    min-width: 60px;
    max-width: 70px;
    height: 26px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
}

.ms-table-container--list-view .generic-table-pagination .slds-button-group {
    display: flex;
    gap: 2px;
}

.ms-table-container--list-view .generic-table-pagination .ms-pagination__btn {
    width: 28px;
    height: 28px;
    padding: 0;
}

.ms-table-container--list-view .generic-table-pagination .ms-pagination__btn .slds-button__icon {
    width: 0.75rem;
    height: 0.75rem;
}

.ms-table-container--list-view .generic-table-pagination .pagination-info {
    font-size: 0.75rem;
}

/**
 * MS Core - Filter Bar & Bulk Actions
 *
 * Components for filtering data and bulk operations:
 * - Filter bars with inputs, selects, buttons
 * - Period/date range selectors
 * - Bulk action bars for multi-select operations
 *
 * Usage:
 *   <div class="ms-filter-bar">
 *       <label class="ms-filter-bar__label">Period:</label>
 *       <input class="ms-filter-bar__input" />
 *       <button class="ms-filter-bar__btn">Apply</button>
 *   </div>
 */

/* =============================================================================
   FILTER BAR
   ============================================================================= */

/**
 * Base filter bar
 */
.ms-filter-bar {
    flex-shrink: 0;
    background-color: var(--ms-color-bg-header);
    padding: 0.75rem var(--ms-spacing-md);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ms-spacing-sm);
}

/**
 * Warning variant - for absence/year selectors
 */
.ms-filter-bar--warning {
    background-color: var(--ms-color-warning-bg);
    border-color: var(--ms-color-warning-border);
}

/**
 * Success variant
 */
.ms-filter-bar--success {
    background-color: var(--ms-color-success-bg);
    border-color: var(--ms-color-success);
}

/**
 * Neutral variant
 */
.ms-filter-bar--neutral {
    background-color: var(--ms-color-bg-header);
    border-color: var(--ms-color-border);
}

/**
 * Compact filter bar
 */
.ms-filter-bar--compact {
    padding: var(--ms-spacing-sm);
}


/* =============================================================================
   FILTER BAR ELEMENTS
   ============================================================================= */

/**
 * Filter bar label
 */
.ms-filter-bar__label {
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-secondary);
    font-size: var(--ms-font-size-base);
}

/**
 * Filter bar icon (before label)
 */
.ms-filter-bar__icon {
    width: 1rem;
    height: 1rem;
    margin-right: var(--ms-spacing-xs);
}

/**
 * Text separator between inputs
 */
.ms-filter-bar__separator {
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-base);
}

/**
 * Filter bar input
 */
.ms-filter-bar__input {
    border-radius: var(--ms-radius-sm);
    max-width: 140px;
    font-size: var(--ms-font-size-base);
}

/**
 * Filter bar select
 */
.ms-filter-bar__select {
    border-radius: var(--ms-radius-sm);
    min-width: 100px;
}

/**
 * Filter bar button
 */
.ms-filter-bar__btn {
    border-radius: var(--ms-radius-sm) !important;
}

/**
 * Hint text
 */
.ms-filter-bar__hint {
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-sm);
}


/* =============================================================================
   FILTER BAR GROUPS
   ============================================================================= */

/**
 * Group of related filter elements
 */
.ms-filter-bar__group {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
}

/**
 * Spacer to push elements to the right
 */
.ms-filter-bar__spacer {
    flex: 1;
}


/* =============================================================================
   BULK ACTIONS BAR
   ============================================================================= */

/**
 * Bulk actions bar - shows when items are selected
 * Hidden by default (use slds-hide class in template)
 */
.ms-bulk-bar {
    flex-shrink: 0; /* Never shrink in flex container */
    background-color: var(--ms-color-primary-light);
    border: 1px solid var(--ms-color-primary-border);
    border-radius: var(--ms-radius-md);
    padding: var(--ms-spacing-sm) var(--ms-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-md);
    transition: opacity var(--ms-transition-fast);
}

.ms-bulk-bar > * {
    width: 100%;
}

/**
 * Selection count
 */
.ms-bulk-bar__count {
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-primary);
    margin-right: var(--ms-spacing-xs);
}

/**
 * Selection text
 */
.ms-bulk-bar__text {
    color: var(--ms-color-text-secondary);
    font-size: var(--ms-font-size-base);
}

/**
 * Bulk actions container
 */
.ms-bulk-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
    margin-left: auto;
}

/**
 * Clear selection button
 */
.ms-bulk-bar__clear {
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-sm);
    cursor: pointer;
}

.ms-bulk-bar__clear:hover {
    color: var(--ms-color-text-secondary);
    text-decoration: underline;
}


/* =============================================================================
   SEARCH BAR
   ============================================================================= */

/**
 * Search bar variant of filter bar
 */
.ms-search-bar {
    display: flex;
    align-items: center;
    gap: var(--ms-spacing-sm);
    background-color: var(--ms-color-bg-card);
    border: 1px solid var(--ms-color-border);
    border-radius: var(--ms-radius-md);
    padding: var(--ms-spacing-sm);
}

.ms-search-bar__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--ms-font-size-base);
}

.ms-search-bar__input::placeholder {
    color: var(--ms-color-text-muted);
}

.ms-search-bar__icon {
    color: var(--ms-color-text-muted);
}

.ms-search-bar:focus-within {
    border-color: var(--ms-color-border-focus);
    box-shadow: var(--ms-shadow-focus);
}


/* =============================================================================
   ACTIVE FILTERS DISPLAY
   ============================================================================= */

/**
 * Active filters container - shows applied filters as chips
 */
.ms-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ms-spacing-xs);
    margin-bottom: var(--ms-spacing-md);
}

/**
 * Individual filter chip
 */
.ms-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-spacing-xs);
    padding: 0.25rem 0.5rem;
    background-color: var(--ms-color-bg-hover);
    border-radius: var(--ms-radius-full);
    font-size: var(--ms-font-size-sm);
    color: var(--ms-color-text-secondary);
}

.ms-filter-chip__label {
    color: var(--ms-color-text-muted);
}

.ms-filter-chip__value {
    font-weight: var(--ms-font-weight-medium);
}

.ms-filter-chip__remove {
    cursor: pointer;
    color: var(--ms-color-text-muted);
    margin-left: var(--ms-spacing-xs);
}

.ms-filter-chip__remove:hover {
    color: var(--ms-color-error);
}

/**
 * Clear all filters link
 */
.ms-active-filters__clear {
    color: var(--ms-color-text-link);
    font-size: var(--ms-font-size-sm);
    cursor: pointer;
}

.ms-active-filters__clear:hover {
    text-decoration: underline;
}

/**
 * MS Core - Loading States
 *
 * Loading indicators and skeleton screens for async content.
 *
 * Usage:
 *   <div class="ms-loading">
 *       <div class="ms-loading__spinner"></div>
 *       <p class="ms-loading__text">Loading...</p>
 *   </div>
 */

/* =============================================================================
   LOADING CONTAINER
   ============================================================================= */

/**
 * Base loading container - centers content
 */
.ms-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ms-spacing-xl);
}

/**
 * Full-height loading - fills available space
 */
.ms-loading--full {
    flex: 1;
    min-height: 200px;
}

/**
 * Inline loading - horizontal layout
 */
.ms-loading--inline {
    flex-direction: row;
    gap: var(--ms-spacing-sm);
    padding: var(--ms-spacing-md);
}

/**
 * Overlay loading - covers parent content
 */
.ms-loading--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
}


/* =============================================================================
   LOADING TEXT
   ============================================================================= */

/**
 * Loading message text
 */
.ms-loading__text {
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-base);
    margin-top: var(--ms-spacing-md);
}

.ms-loading--inline .ms-loading__text {
    margin-top: 0;
}


/* =============================================================================
   SPINNER
   ============================================================================= */

/**
 * Simple CSS spinner
 */
.ms-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--ms-color-border);
    border-top-color: var(--ms-color-primary);
    border-radius: 50%;
    animation: ms-spin 0.8s linear infinite;
}

.ms-spinner--small {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.ms-spinner--large {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

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


/* =============================================================================
   SKELETON LOADING
   ============================================================================= */

/**
 * Skeleton loading placeholder
 */
.ms-skeleton {
    background: linear-gradient(
        90deg,
        var(--ms-color-bg-hover) 25%,
        var(--ms-color-bg-header) 50%,
        var(--ms-color-bg-hover) 75%
    );
    background-size: 200% 100%;
    animation: ms-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--ms-radius-sm);
}

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

/**
 * Skeleton text line
 */
.ms-skeleton--text {
    height: 1rem;
    margin-bottom: var(--ms-spacing-sm);
}

.ms-skeleton--text-short {
    width: 60%;
}

.ms-skeleton--text-medium {
    width: 80%;
}

/**
 * Skeleton heading
 */
.ms-skeleton--heading {
    height: 1.5rem;
    width: 40%;
    margin-bottom: var(--ms-spacing-md);
}

/**
 * Skeleton avatar
 */
.ms-skeleton--avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

/**
 * Skeleton button
 */
.ms-skeleton--button {
    height: 2.25rem;
    width: 100px;
}

/**
 * Skeleton table row
 */
.ms-skeleton--row {
    height: 3rem;
    margin-bottom: var(--ms-spacing-xs);
}


/* =============================================================================
   EMPTY STATE
   ============================================================================= */

/**
 * Empty state container
 */
.ms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ms-spacing-xxl);
    text-align: center;
}

.ms-empty__icon {
    color: var(--ms-color-text-muted);
    margin-bottom: var(--ms-spacing-md);
}

.ms-empty__title {
    font-size: var(--ms-font-size-lg);
    font-weight: var(--ms-font-weight-semibold);
    color: var(--ms-color-text-secondary);
    margin: 0 0 var(--ms-spacing-sm) 0;
}

.ms-empty__text {
    color: var(--ms-color-text-muted);
    font-size: var(--ms-font-size-base);
    margin: 0 0 var(--ms-spacing-md) 0;
    max-width: 400px;
}

.ms-empty__action {
    margin-top: var(--ms-spacing-md);
}

/**
 * MS Core - Utility Classes
 *
 * Single-purpose utility classes for common styling needs.
 * These complement SLDS utilities with ms-prefixed variants.
 *
 * Categories:
 * - Display
 * - Text
 * - Spacing
 * - Colors
 * - Borders
 */

/* =============================================================================
   DISPLAY UTILITIES
   ============================================================================= */

.ms-hidden {
    display: none !important;
}

.ms-visible {
    display: block !important;
}

.ms-invisible {
    visibility: hidden !important;
}

.ms-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =============================================================================
   TEXT UTILITIES
   ============================================================================= */

/* Alignment */
.ms-text-left { text-align: left; }
.ms-text-center { text-align: center; }
.ms-text-right { text-align: right; }

/* Wrapping */
.ms-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-nowrap {
    white-space: nowrap;
}

.ms-break-word {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Font weight */
.ms-font-normal { font-weight: var(--ms-font-weight-normal); }
.ms-font-medium { font-weight: var(--ms-font-weight-medium); }
.ms-font-semibold { font-weight: var(--ms-font-weight-semibold); }
.ms-font-bold { font-weight: var(--ms-font-weight-bold); }

/* Font size */
.ms-text-xs { font-size: var(--ms-font-size-xs); }
.ms-text-sm { font-size: var(--ms-font-size-sm); }
.ms-text-base { font-size: var(--ms-font-size-base); }
.ms-text-md { font-size: var(--ms-font-size-md); }
.ms-text-lg { font-size: var(--ms-font-size-lg); }
.ms-text-xl { font-size: var(--ms-font-size-xl); }

/* Text color */
.ms-text-primary { color: var(--ms-color-text-primary); }
.ms-text-secondary { color: var(--ms-color-text-secondary); }
.ms-text-muted { color: var(--ms-color-text-muted); }
.ms-text-link { color: var(--ms-color-text-link); }
.ms-text-success { color: var(--ms-color-success); }
.ms-text-error { color: var(--ms-color-error); }
.ms-text-warning { color: #92400e; }

/* Text transform */
.ms-uppercase { text-transform: uppercase; }
.ms-lowercase { text-transform: lowercase; }
.ms-capitalize { text-transform: capitalize; }


/* =============================================================================
   SPACING UTILITIES
   ============================================================================= */

/* Margin */
.ms-m-0 { margin: 0; }
.ms-m-xs { margin: var(--ms-spacing-xs); }
.ms-m-sm { margin: var(--ms-spacing-sm); }
.ms-m-md { margin: var(--ms-spacing-md); }
.ms-m-lg { margin: var(--ms-spacing-lg); }
.ms-m-xl { margin: var(--ms-spacing-xl); }

/* Margin top */
.ms-mt-0 { margin-top: 0; }
.ms-mt-xs { margin-top: var(--ms-spacing-xs); }
.ms-mt-sm { margin-top: var(--ms-spacing-sm); }
.ms-mt-md { margin-top: var(--ms-spacing-md); }
.ms-mt-lg { margin-top: var(--ms-spacing-lg); }
.ms-mt-xl { margin-top: var(--ms-spacing-xl); }

/* Margin bottom */
.ms-mb-0 { margin-bottom: 0; }
.ms-mb-xs { margin-bottom: var(--ms-spacing-xs); }
.ms-mb-sm { margin-bottom: var(--ms-spacing-sm); }
.ms-mb-md { margin-bottom: var(--ms-spacing-md); }
.ms-mb-lg { margin-bottom: var(--ms-spacing-lg); }
.ms-mb-xl { margin-bottom: var(--ms-spacing-xl); }

/* Margin left */
.ms-ml-0 { margin-left: 0; }
.ms-ml-xs { margin-left: var(--ms-spacing-xs); }
.ms-ml-sm { margin-left: var(--ms-spacing-sm); }
.ms-ml-md { margin-left: var(--ms-spacing-md); }
.ms-ml-lg { margin-left: var(--ms-spacing-lg); }
.ms-ml-auto { margin-left: auto; }

/* Margin right */
.ms-mr-0 { margin-right: 0; }
.ms-mr-xs { margin-right: var(--ms-spacing-xs); }
.ms-mr-sm { margin-right: var(--ms-spacing-sm); }
.ms-mr-md { margin-right: var(--ms-spacing-md); }
.ms-mr-lg { margin-right: var(--ms-spacing-lg); }
.ms-mr-auto { margin-right: auto; }

/* Margin horizontal */
.ms-mx-0 { margin-left: 0; margin-right: 0; }
.ms-mx-sm { margin-left: var(--ms-spacing-sm); margin-right: var(--ms-spacing-sm); }
.ms-mx-md { margin-left: var(--ms-spacing-md); margin-right: var(--ms-spacing-md); }
.ms-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin vertical */
.ms-my-0 { margin-top: 0; margin-bottom: 0; }
.ms-my-sm { margin-top: var(--ms-spacing-sm); margin-bottom: var(--ms-spacing-sm); }
.ms-my-md { margin-top: var(--ms-spacing-md); margin-bottom: var(--ms-spacing-md); }

/* Padding */
.ms-p-0 { padding: 0; }
.ms-p-xs { padding: var(--ms-spacing-xs); }
.ms-p-sm { padding: var(--ms-spacing-sm); }
.ms-p-md { padding: var(--ms-spacing-md); }
.ms-p-lg { padding: var(--ms-spacing-lg); }
.ms-p-xl { padding: var(--ms-spacing-xl); }

/* Padding top */
.ms-pt-0 { padding-top: 0; }
.ms-pt-sm { padding-top: var(--ms-spacing-sm); }
.ms-pt-md { padding-top: var(--ms-spacing-md); }
.ms-pt-lg { padding-top: var(--ms-spacing-lg); }

/* Padding bottom */
.ms-pb-0 { padding-bottom: 0; }
.ms-pb-sm { padding-bottom: var(--ms-spacing-sm); }
.ms-pb-md { padding-bottom: var(--ms-spacing-md); }
.ms-pb-lg { padding-bottom: var(--ms-spacing-lg); }

/* Padding left */
.ms-pl-0 { padding-left: 0; }
.ms-pl-sm { padding-left: var(--ms-spacing-sm); }
.ms-pl-md { padding-left: var(--ms-spacing-md); }
.ms-pl-lg { padding-left: var(--ms-spacing-lg); }

/* Padding right */
.ms-pr-0 { padding-right: 0; }
.ms-pr-sm { padding-right: var(--ms-spacing-sm); }
.ms-pr-md { padding-right: var(--ms-spacing-md); }
.ms-pr-lg { padding-right: var(--ms-spacing-lg); }

/* Padding horizontal */
.ms-px-0 { padding-left: 0; padding-right: 0; }
.ms-px-sm { padding-left: var(--ms-spacing-sm); padding-right: var(--ms-spacing-sm); }
.ms-px-md { padding-left: var(--ms-spacing-md); padding-right: var(--ms-spacing-md); }

/* Padding vertical */
.ms-py-0 { padding-top: 0; padding-bottom: 0; }
.ms-py-sm { padding-top: var(--ms-spacing-sm); padding-bottom: var(--ms-spacing-sm); }
.ms-py-md { padding-top: var(--ms-spacing-md); padding-bottom: var(--ms-spacing-md); }


/* =============================================================================
   BACKGROUND UTILITIES
   ============================================================================= */

.ms-bg-page { background-color: var(--ms-color-bg-page); }
.ms-bg-card { background-color: var(--ms-color-bg-card); }
.ms-bg-header { background-color: var(--ms-color-bg-header); }
.ms-bg-hover { background-color: var(--ms-color-bg-hover); }
.ms-bg-selected { background-color: var(--ms-color-bg-selected); }
.ms-bg-success { background-color: var(--ms-color-success-bg); }
.ms-bg-error { background-color: var(--ms-color-error-bg); }
.ms-bg-warning { background-color: var(--ms-color-warning-bg); }
.ms-bg-primary-light { background-color: var(--ms-color-primary-light); }
.ms-bg-shade { background-color: #f3f3f3; } /* Simple shaded background without affecting child element styling */


/* =============================================================================
   BORDER UTILITIES
   ============================================================================= */

.ms-border { border: 1px solid var(--ms-color-border); }
.ms-border-0 { border: none; }
.ms-border-t { border-top: 1px solid var(--ms-color-border); }
.ms-border-b { border-bottom: 1px solid var(--ms-color-border); }
.ms-border-l { border-left: 1px solid var(--ms-color-border); }
.ms-border-r { border-right: 1px solid var(--ms-color-border); }

.ms-border-light { border-color: var(--ms-color-border-light); }
.ms-border-primary { border-color: var(--ms-color-primary); }

.ms-rounded { border-radius: var(--ms-radius-md); }
.ms-rounded-sm { border-radius: var(--ms-radius-sm); }
.ms-rounded-lg { border-radius: var(--ms-radius-lg); }
.ms-rounded-full { border-radius: var(--ms-radius-full); }
.ms-rounded-0 { border-radius: 0; }


/* =============================================================================
   WIDTH & HEIGHT UTILITIES
   ============================================================================= */

.ms-w-full { width: 100%; }
.ms-w-auto { width: auto; }
.ms-w-50 { width: 50%; }

.ms-h-full { height: 100%; }
.ms-h-auto { height: auto; }
.ms-h-screen { height: 100vh; }

.ms-min-h-0 { min-height: 0; }
.ms-min-w-0 { min-width: 0; }


/* =============================================================================
   CURSOR UTILITIES
   ============================================================================= */

.ms-cursor-pointer { cursor: pointer; }
.ms-cursor-default { cursor: default; }
.ms-cursor-not-allowed { cursor: not-allowed; }
.ms-cursor-grab { cursor: grab; }
.ms-cursor-grabbing { cursor: grabbing; }


/* =============================================================================
   INTERACTION UTILITIES
   ============================================================================= */

.ms-pointer-events-none { pointer-events: none; }
.ms-pointer-events-auto { pointer-events: auto; }
.ms-select-none { user-select: none; }
.ms-select-text { user-select: text; }
.ms-select-all { user-select: all; }


/* =============================================================================
   OPACITY UTILITIES
   ============================================================================= */

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


/* =============================================================================
   SHADOW UTILITIES
   ============================================================================= */

.ms-shadow-none { box-shadow: none; }
.ms-shadow-sm { box-shadow: var(--ms-shadow-sm); }
.ms-shadow { box-shadow: var(--ms-shadow-md); }
.ms-shadow-lg { box-shadow: var(--ms-shadow-lg); }

/**
 * MS Core - Responsive Adjustments
 *
 * Media queries for responsive behavior across all ms-* components.
 * Mobile-first approach with breakpoints:
 * - sm: 640px
 * - md: 768px
 * - lg: 1024px
 * - xl: 1280px
 */

/* =============================================================================
   BREAKPOINT VARIABLES (for reference)
   ============================================================================= */

/*
 * --ms-breakpoint-sm: 640px;
 * --ms-breakpoint-md: 768px;
 * --ms-breakpoint-lg: 1024px;
 * --ms-breakpoint-xl: 1280px;
 */


/* =============================================================================
   MOBILE (max-width: 768px)
   ============================================================================= */

@media (max-width: 768px) {

    .ms-page__title {
        font-size: var(--ms-font-size-xl);
    }

    /* Only wrap header when explicitly requested with --wrap modifier */
    .ms-page__header--split.ms-page__header--wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .ms-page__header--split.ms-page__header--wrap > .ms-page__title {
        white-space: normal;
        overflow: visible;
    }

    .ms-page__header--split.ms-page__header--wrap > .ms-page__actions {
        width: 100%;
        flex-wrap: wrap;
        flex-shrink: 1;
    }

    /* Tabs */
    .ms-tabs__link {
        padding: 0.75rem var(--ms-spacing-md) !important;
        font-size: var(--ms-font-size-base);
    }

    .ms-tabs__link svg {
        display: none;
    }

    .ms-tabs__content {
        padding-top: var(--ms-spacing-md);
    }

    /* Table */
    .ms-table__cell {
        padding: 0.75rem;
    }

    /* Disable sticky columns on mobile for better UX */
    .ms-table__cell--sticky-left,
    .ms-table__cell--sticky-right {
        position: static;
    }

    .ms-table__cell--sticky-left::after,
    .ms-table__cell--sticky-right::before {
        display: none;
    }

    /* Filter bar */
    .ms-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .ms-filter-bar__group {
        flex-wrap: wrap;
    }

    .ms-filter-bar__input {
        max-width: none;
        width: 100%;
    }

    /* Bulk bar */
    .ms-bulk-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ms-spacing-sm);
    }

    .ms-bulk-bar__actions {
        margin-left: 0;
        flex-wrap: wrap;
    }

    /* Pagination */
    .ms-pagination {
        flex-direction: column;
        gap: var(--ms-spacing-sm);
    }

    .ms-pagination__info {
        text-align: center;
    }

    /* Loading */
    .ms-loading {
        padding: var(--ms-spacing-lg);
    }

    .ms-empty {
        padding: var(--ms-spacing-lg);
    }
}


/* =============================================================================
   TABLET (max-width: 1024px)
   ============================================================================= */

@media (max-width: 1024px) {

    /* Reduce max-width for truncated cells */
    .ms-table__cell--truncate {
        max-width: 150px;
    }

    /* Stack filter bar groups on tablet */
    .ms-filter-bar__group {
        flex-wrap: wrap;
    }
}


/* =============================================================================
   LARGE SCREENS (min-width: 1280px)
   ============================================================================= */

@media (min-width: 1280px) {

    /* Increase table cell truncation width */
    .ms-table__cell--truncate {
        max-width: 300px;
    }
}


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

@media print {

    /* Hide non-essential elements */
    .ms-pagination,
    .ms-bulk-bar,
    .ms-filter-bar,
    .ms-page__actions {
        display: none !important;
    }

    /* Remove backgrounds for printing */
    .ms-page {
        background: white;
    }

    .ms-table__header {
        background: white !important;
    }

    .ms-table__row:hover {
        background: white !important;
    }

    /* Disable sticky positioning */
    .ms-table__header--sticky,
    .ms-table__footer--sticky,
    .ms-table__cell--sticky-left,
    .ms-table__cell--sticky-right {
        position: static;
    }

    /* Ensure borders print */
    .ms-table {
        border: 1px solid #000;
    }

    .ms-table__header th,
    .ms-table__cell {
        border: 1px solid #ccc;
    }
}


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

/* Hide on mobile */
@media (max-width: 768px) {
    .ms-hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 769px) {
    .ms-show-mobile-only {
        display: none !important;
    }
}

/* Hide on tablet and below */
@media (max-width: 1024px) {
    .ms-hide-tablet {
        display: none !important;
    }
}

/* Show only on tablet and below */
@media (min-width: 1025px) {
    .ms-show-tablet-only {
        display: none !important;
    }
}


/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ms-skeleton {
        animation: none;
        background: var(--ms-color-bg-hover);
    }

    .ms-spinner {
        animation: none;
    }
}


/* =============================================================================
   HIGH CONTRAST MODE
   ============================================================================= */

@media (prefers-contrast: high) {
    .ms-table__header th {
        border-bottom-width: 2px;
    }

    .ms-table__row {
        border-bottom-width: 2px;
    }

    .ms-filter-bar,
    .ms-bulk-bar {
        border-width: 2px;
    }
}