/*
 * P4Books - Syncfusion Fluent 2 Seed Colors + Custom Spinner
 * ===========================================================
 * Maps P4 design tokens to Syncfusion Fluent 2 CSS variables.
 * Syncfusion components render natively using these colors.
 *
 * Sections:
 * 1. Light mode seed colors
 * 2. Dark mode seed colors
 * 3. Custom P4 spinner (replaces Syncfusion default)
 *
 * Updated: 2026-01-28
 */

/* ============================================
   1. FLUENT 2 SEED COLORS - LIGHT
   ============================================ */

:root,
body[data-theme="fluent2"],
body.theme-light {
    /* Primary (#1976D2 - P4 Blue) */
    --color-sf-primary: #1976D2;
    --color-sf-primary-light: #42A5F5;
    --color-sf-primary-lighter: #DBEAFE;
    --color-sf-primary-dark: #1565C0;
    --color-sf-primary-darker: #0D47A1;
    --color-sf-primary-text-color: #FFFFFF;

    /* Secondary (Slate 600) */
    --color-sf-secondary: #475569;

    /* Danger */
    --color-sf-danger: #DC2626;

    /* Success */
    --color-sf-success: #16A34A;

    /* Warning */
    --color-sf-warning: #D97706;

    /* Info */
    --color-sf-info: #1976D2;

    /* Surface / Background (Slate palette) */
    --color-sf-background: #FFFFFF;
    --color-sf-content-bg: #FFFFFF;
    --color-sf-content-font: #1E293B;
    --color-sf-border: #E2E8F0;
    --color-sf-hover: rgba(0, 0, 0, 0.04);
}

/* ============================================
   2. FLUENT 2 SEED COLORS - DARK
   ============================================ */

body.e-dark-mode,
body[data-theme="fluent2-dark"],
body.theme-dark {
    /* Primary (#60A5FA - Blue 400 for dark mode contrast) */
    --color-sf-primary: #60A5FA;
    --color-sf-primary-light: #93C5FD;
    --color-sf-primary-lighter: #1E3A5F;
    --color-sf-primary-dark: #3B82F6;
    --color-sf-primary-darker: #2563EB;
    --color-sf-primary-text-color: #0F172A;

    /* Secondary (Slate 300) */
    --color-sf-secondary: #CBD5E1;

    /* Danger */
    --color-sf-danger: #EF4444;

    /* Success */
    --color-sf-success: #4ADE80;

    /* Warning */
    --color-sf-warning: #FBBF24;

    /* Info */
    --color-sf-info: #60A5FA;

    /* Surface / Background (Slate dark palette) */
    --color-sf-background: #0F172A;
    --color-sf-content-bg: #0F172A;
    --color-sf-content-font: #F1F5F9;
    --color-sf-border: #334155;
    --color-sf-hover: rgba(255, 255, 255, 0.06);
}

/* ============================================
   3. GLOBAL FONT OVERRIDE
   ============================================
   Syncfusion Fluent 2 defaults to "Segoe UI".
   Override all controls to use our design-system font.
*/

.e-control,
.e-btn,
.e-dropdown-popup,
.e-dropdown-popup .e-item,
.e-dropdownbase,
.e-dialog,
.e-grid,
.e-toolbar,
.e-tab,
.e-input-group,
.e-input-group input,
.e-input-group textarea,
.e-numerictextbox,
.e-ddl,
.e-popup,
.e-tooltip-wrap {
    font-family: var(--font-primary, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

/* ============================================
   4. CUSTOM P4 SPINNER
   ============================================
   Replaces the default Syncfusion spinner with a P4-branded
   CSS border-radius spinner.

   z-index on .e-spinner-pane is required because Syncfusion places
   the spinner as the first child in the grid DOM, and without it
   the later siblings (toolbar, header, content) paint on top.
*/

/* Hide the default Syncfusion spinner */
.e-spinner-pane .e-spinner-inner .e-spin-material,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap,
.e-spinner-pane .e-spinner-inner .e-spin-fabric,
.e-spinner-pane .e-spinner-inner .e-spin-highcontrast,
.e-spinner-pane .e-spinner-inner .e-spin-tailwind,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5,
.e-spinner-pane .e-spinner-inner .e-spin-fluent,
.e-spinner-pane .e-spinner-inner .e-spin-fluent2,
.e-spinner-pane .e-spinner-inner svg {
    display: none !important;
}

/* Spinner overlay */
.e-spinner-pane {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(2px);
    z-index: 100 !important;
}

/* Dark mode spinner overlay */
.theme-dark .e-spinner-pane,
body.e-dark-mode .e-spinner-pane {
    background-color: rgba(31, 31, 31, 0.85) !important;
}

/* Custom P4 loading indicator */
.e-spinner-pane .e-spinner-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}

.e-spinner-pane .e-spinner-inner::before {
    content: "";
    width: 36px;
    height: 36px;
    border: 3px solid var(--ds-border, #e2e8f0);
    border-top-color: var(--color-sf-primary, #1976D2);
    border-radius: 50%;
    animation: p4-grid-spin 0.8s linear infinite;
    display: block;
}

.e-spinner-pane .e-spinner-inner::after {
    content: "Loading...";
    font-family: var(--font-primary, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--p4-on-surface-muted, #64748B);
    margin-top: 12px;
    display: block;
}

/* Dark mode spinner colors */
.theme-dark .e-spinner-pane .e-spinner-inner::before,
body.e-dark-mode .e-spinner-pane .e-spinner-inner::before {
    border-color: var(--ds-outline, #5a5a5a);
    border-top-color: var(--ds-primary, #FBAD48);
}

.theme-dark .e-spinner-pane .e-spinner-inner::after,
body.e-dark-mode .e-spinner-pane .e-spinner-inner::after {
    color: var(--ds-on-surface-muted, #a0a0a0);
}

/* EntitySearchBox - scale down Syncfusion's built-in data manager spinner.
   Syncfusion's SfDropDownList exposes no API to customize the loading
   indicator (only SfPivotView has SpinnerTemplate), so CSS is the only lever.
   The global .e-spinner-pane rule above uses a 36px ring + "Loading..." label
   sized for grids/dialogs; for a 32px-tall input field we want a 14px ring
   with no label. Specificity handles most of the override; !important is
   only used where the upstream global rule also uses it. */
.p4-entity-search-box .e-spinner-pane {
    background-color: transparent !important; /* upstream uses !important */
    backdrop-filter: none;
}

.p4-entity-search-box .e-spinner-pane .e-spinner-inner::before {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.p4-entity-search-box .e-spinner-pane .e-spinner-inner::after {
    display: none;
}

@keyframes p4-grid-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   5. BUTTON MICRO-INTERACTIONS
   (migrated from components.css)
   ============================================ */

/* Primary button hover lift */
.e-btn.e-primary:not(:disabled):hover,
.e-css.e-btn.e-primary:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--p4-elevation-2, 0 2px 4px rgba(0,0,0,0.14));
}

.e-btn.e-primary:not(:disabled):active,
.e-css.e-btn.e-primary:not(:disabled):active {
    transform: translateY(0);
    box-shadow: var(--p4-elevation-1, 0 1px 2px rgba(0,0,0,0.12));
}

/* Outlined button hover */
.e-btn.e-outline:not(:disabled):hover {
    transform: translateY(-1px);
}

.e-btn.e-outline:not(:disabled):active {
    transform: translateY(0);
}

/* Smooth button transitions */
.e-btn,
.e-css.e-btn {
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease),
                border-color var(--duration-fast, 100ms) var(--ease-default, ease),
                color var(--duration-fast, 100ms) var(--ease-default, ease),
                transform var(--duration-fast, 100ms) var(--ease-out, ease-out),
                box-shadow var(--duration-fast, 100ms) var(--ease-default, ease) !important;
}

/* ============================================
   6. RADZEN COMPONENT OVERRIDES
   (migrated from radzen-overrides.css)
   ============================================ */

.rz-textbox {
    border-color: var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.rz-textbox:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

.theme-dark .rz-textbox,
body.e-dark-mode .rz-textbox {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.rz-button:focus-visible,
.rz-textbox:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

/* Radzen Icons - inherit from e-icons */
.rz-icon,
.rzi,
.rz-button-icon-left,
.rz-button-icon-right {
    font-size: var(--icon-md);
    line-height: 1;
    display: inline-block;
}

/* ============================================
   MIGRATED FROM p4-design-system.css (2026-04-02)
   CSS layer cleanup: each section now lives in its
   correct ownership layer per CLAUDE.md rules.
   ============================================ */
/* ============================================
   29. SYNCFUSION COMPONENT OVERRIDES
   ============================================

   Override Syncfusion component styles.
   Using !important sparingly where Syncfusion specificity is too high.
*/

/* Syncfusion Primary Buttons - Maximum specificity to override Syncfusion theme */
html body .e-btn.e-primary,
html body .e-btn.e-primary:not(:disabled),
html body .e-control.e-btn.e-primary,
html body .e-dialog .e-btn.e-primary,
html body .e-footer-content .e-btn.e-primary,
html body .e-dialog .e-footer-content .e-btn.e-primary,
html body .e-dialog .e-footer-content .e-control.e-btn.e-primary,
html body .p4-dialog .e-footer-content .e-btn.e-primary,
html body .p4-page-actions .e-btn.e-primary,
html body button.e-btn.e-primary,
html body .e-btn.e-btn.e-primary {
    color: #FFFFFF !important;
    background-color: var(--p4-primary-blue, #1976D2) !important;
    border-color: var(--p4-primary-blue, #1976D2) !important;
    background: var(--p4-primary-blue, #1976D2) !important;
    box-shadow: none !important;
}

html body .e-btn.e-primary:hover,
html body .e-btn.e-primary:focus,
html body .e-btn.e-primary:active,
html body .e-control.e-btn.e-primary:hover,
html body .e-footer-content .e-btn.e-primary:hover,
html body .e-footer-content .e-btn.e-primary:focus,
html body .e-dialog .e-footer-content .e-btn.e-primary:hover {
    background-color: var(--p4-primary-blue-hover, #2B6CB0) !important;
    border-color: var(--p4-primary-blue-hover, #2B6CB0) !important;
    background: var(--p4-primary-blue-hover, #2B6CB0) !important;
    color: #FFFFFF !important;
}

/* Syncfusion Success Buttons */
.e-btn.e-success,
.e-btn.e-success:not(:disabled) {
    color: #FFFFFF !important;
    background-color: var(--p4-success-green, #38A169) !important;
    border-color: var(--p4-success-green, #38A169) !important;
}

.e-btn.e-success:hover,
.e-btn.e-success:focus {
    background-color: var(--p4-success-green-hover, #2F855A) !important;
    border-color: var(--p4-success-green-hover, #2F855A) !important;
    color: #FFFFFF !important;
}

/* Syncfusion Danger Buttons */
.e-btn.e-danger,
.e-btn.e-danger:not(:disabled),
.p4-page-actions .e-btn.e-danger {
    color: #FFFFFF !important;
    background-color: var(--p4-error-red, #E53E3E) !important;
    border-color: var(--p4-error-red, #E53E3E) !important;
}

.e-btn.e-danger:hover,
.e-btn.e-danger:focus {
    background-color: var(--p4-error-red-hover, #C53030) !important;
    border-color: var(--p4-error-red-hover, #C53030) !important;
    color: #FFFFFF !important;
}

/* Syncfusion Warning Buttons */
.e-btn.e-warning,
.e-btn.e-warning:not(:disabled),
.p4-page-actions .e-btn.e-warning {
    color: #FFFFFF !important;
    background-color: var(--p4-warning-orange, #DD6B20) !important;
    border-color: var(--p4-warning-orange, #DD6B20) !important;
}

.e-btn.e-warning:hover,
.e-btn.e-warning:focus {
    background-color: var(--p4-warning-orange-hover, #C05621) !important;
    border-color: var(--p4-warning-orange-hover, #C05621) !important;
    color: #FFFFFF !important;
}

/* Syncfusion Outline Buttons */
.e-btn.e-outline,
.e-btn.e-outline:not(:disabled),
.e-dropdown-btn.e-outline {
    color: var(--p4-text-secondary, #4A5568) !important;
    border-color: var(--p4-border-gray, #E2E8F0) !important;
    background-color: var(--p4-surface, #FFFFFF) !important;
}

.e-btn.e-outline:hover,
.e-btn.e-outline:focus,
.e-dropdown-btn.e-outline:hover {
    background-color: var(--p4-light-gray, #F7FAFC) !important;
    color: var(--p4-text-primary, #2D3748) !important;
}

/* Syncfusion Flat Buttons (Cancel, etc.) */
.e-btn.e-flat,
.e-dialog .e-btn.e-flat {
    color: var(--p4-text-secondary, #4A5568) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.e-btn.e-flat:hover,
.e-btn.e-flat:focus {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: var(--p4-text-primary, #2D3748) !important;
}

/* Button Icon Color - inherit from text */
.e-btn .e-btn-icon,
.e-btn .e-icons {
    color: inherit !important;
}

/* Dialog Button Footer Spacing */
.e-dialog .e-footer-content {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================
   Matches SampleComponents.razor notification archetype:
   Single-row compact: [icon] message text
   Tonal container + 4px colored left-border accent.
   */

/* Toast container positioning */
.e-toast-container {
    z-index: 1100 !important;
    top: 64px !important;
}

/* Base toast - tonal container + left-border accent */
.e-toast-container .e-toast:not(.e-toast-container) {
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06) !important;
    border: none !important;
    border-left: 4px solid var(--color-info, #0288D1) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: var(--bg-primary, #fff) !important;
    color: var(--ds-text, #323130) !important;
}

/* Single-row message layout */
.e-toast-container .e-toast:not(.e-toast-container) .e-toast-message {
    padding: 12px 16px !important;
}

/* Content - flex row for icon + text */
.e-toast-container .e-toast:not(.e-toast-container) .e-toast-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--ds-text, #323130) !important;
}

/* Inline icon via p4-toast-icon class (injected from ShowToastAsync) */
.e-toast-container .e-toast:not(.e-toast-container) .p4-toast-icon {
    font-size: 16px !important;
    flex-shrink: 0;
}

/* Hide title - we use single-row content only */
.e-toast-container .e-toast:not(.e-toast-container) .e-toast-title {
    display: none !important;
}

/* Close button */
.e-toast-container .e-toast:not(.e-toast-container) .e-toast-close-icon {
    font-size: 12px !important;
    color: var(--text-tertiary, #8a8886) !important;
    margin: 0 8px 0 0 !important;
    align-self: center !important;
}

/* Progress bar */
.e-toast-container .e-toast:not(.e-toast-container) .e-toast-progress {
    height: 2px !important;
    border-radius: 0 0 6px 0 !important;
    opacity: 0.6 !important;
}

/* ── Success - green ─────────────────────── */
.e-toast-container .e-toast.e-toast-success {
    background-color: var(--ds-success-container, #dcfce7) !important;
    border-left-color: var(--ds-success, #16a34a) !important;
}
.e-toast-container .e-toast.e-toast-success .p4-toast-icon {
    color: var(--ds-success, #16a34a) !important;
}
.e-toast-container .e-toast.e-toast-success .e-toast-progress {
    background-color: var(--ds-success, #16a34a) !important;
}

/* ── Error - red ─────────────────────────── */
.e-toast-container .e-toast.e-toast-danger {
    background-color: var(--ds-error-container, #fee2e2) !important;
    border-left-color: var(--ds-error, #dc2626) !important;
}
.e-toast-container .e-toast.e-toast-danger .p4-toast-icon {
    color: var(--ds-error, #dc2626) !important;
}
.e-toast-container .e-toast.e-toast-danger .e-toast-progress {
    background-color: var(--ds-error, #dc2626) !important;
}

/* ── Warning - orange ────────────────────── */
.e-toast-container .e-toast.e-toast-warning {
    background-color: var(--ds-warning-container, #fef3c7) !important;
    border-left-color: var(--ds-warning, #d97706) !important;
}
.e-toast-container .e-toast.e-toast-warning .p4-toast-icon {
    color: var(--ds-warning, #d97706) !important;
}
.e-toast-container .e-toast.e-toast-warning .e-toast-progress {
    background-color: var(--ds-warning, #d97706) !important;
}

/* ── Info - blue ─────────────────────────── */
.e-toast-container .e-toast.e-toast-info {
    background-color: var(--ds-info-container, #dbeafe) !important;
    border-left-color: var(--ds-info, #0288D1) !important;
}
.e-toast-container .e-toast.e-toast-info .p4-toast-icon {
    color: var(--ds-info, #0288D1) !important;
}
.e-toast-container .e-toast.e-toast-info .e-toast-progress {
    background-color: var(--ds-info, #0288D1) !important;
}

/* Default toast (no severity) */
.e-toast-container .e-toast:not(.e-toast-container):not(.e-toast-success):not(.e-toast-danger):not(.e-toast-warning):not(.e-toast-info) {
    background-color: var(--bg-secondary, #f5f5f5) !important;
    border-left-color: var(--text-tertiary, #8a8886) !important;
}

/* ── Dark mode ───────────────────────────── */
[data-theme*="dark"] .e-toast-container .e-toast:not(.e-toast-container) {
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2) !important;
}
[data-theme*="dark"] .e-toast-container .e-toast.e-toast-success {
    background-color: rgba(22, 163, 106, 0.15) !important;
}
[data-theme*="dark"] .e-toast-container .e-toast.e-toast-danger {
    background-color: rgba(220, 38, 38, 0.15) !important;
}
[data-theme*="dark"] .e-toast-container .e-toast.e-toast-warning {
    background-color: rgba(217, 119, 6, 0.15) !important;
}
[data-theme*="dark"] .e-toast-container .e-toast.e-toast-info {
    background-color: rgba(2, 136, 209, 0.15) !important;
}
[data-theme*="dark"] .e-toast-container .e-toast:not(.e-toast-container):not(.e-toast-success):not(.e-toast-danger):not(.e-toast-warning):not(.e-toast-info) {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   CTA BUTTON (Orange - highest emphasis)
   ============================================ */

.e-btn.e-cta {
    background: var(--p4-tertiary, #F97316) !important;
    color: var(--p4-on-tertiary, #FFFFFF) !important;
    border: none !important;
    border-radius: var(--p4-shape-medium, 6px) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: var(--p4-elevation-1, 0 1px 2px rgba(0,0,0,0.12)) !important;
}

.e-btn.e-cta:hover {
    background: var(--p4-orange-600, #EA580C) !important;
    box-shadow: var(--p4-elevation-2, 0 2px 4px rgba(0,0,0,0.14)) !important;
}

/* Shared page-header contextual state and badges moved to p4-components.css */

/* Shared document trail moved to p4-components.css */

/* Shared summary row moved to p4-components.css */

/* ============================================
   GRID - INSIDE CARDS
   overflow: visible lets Excel-style filter popups (rendered inside
   .e-grid) escape the card boundary.  border-radius still rounds
   the card's own painted background; child content that overflows
   simply isn't clipped.  position:sticky headers still work because
   there is no scroll container.
   ============================================ */

.p4-card:has(.e-grid),
.e-card:has(.e-grid),
.e-custom-card:has(.e-grid) {
    overflow: visible;
}

.e-grid {
    border: 1px solid var(--p4-outline-variant, #E2E8F0) !important;
    border-radius: var(--p4-shape-large, 8px) !important;
}

/* Grid filter - make active filter clearly visible.
   Syncfusion adds .e-filtered to the icon when a column is filtered,
   but the default change is barely noticeable. Highlight the entire
   header cell: colored text, icon, and a bottom accent border. */
.e-grid .e-headercell:has(.e-filtered) {
    border-bottom: 2px solid var(--p4-primary, #0078D4) !important;
}

.e-grid .e-headercell:has(.e-filtered) .e-headertext {
    color: var(--p4-primary, #0078D4) !important;
    font-weight: 600 !important;
}

.e-grid .e-filtermenudiv.e-filtered {
    color: var(--p4-primary, #0078D4) !important;
    opacity: 1 !important;
}

/* Grid filter icon hit-target. Syncfusion's default funnel is a 16x12px / 12px
   glyph with 2px padding -- far too small to click reliably. Enlarge the glyph
   and pad the clickable area to a comfortable ~28px target, with a hover
   affordance so it reads as interactive. */
.e-grid .e-filtermenudiv.e-icons {
    font-size: 15px !important;
    padding: 7px 6px !important;
    border-radius: var(--ds-radius-button, 4px);
    cursor: pointer;
    transition: background-color var(--duration-fast, 120ms) var(--ease-standard, ease);
}

.e-grid .e-filtermenudiv.e-icons:hover {
    background: var(--ds-surface-variant, #EEF2F6);
    color: var(--p4-primary, #0078D4) !important;
}

/* Grid group drop area */
.e-grid .e-groupdroparea {
    border-bottom: 1px solid var(--p4-outline-variant, #E2E8F0);
    padding: 8px 16px;
    min-height: 36px;
    font-size: 13px;
    color: var(--p4-outline, #94A3B8);
    background: var(--p4-surface-container, #F8FAFC);
}

/* ============================================
   GRID - LINE-HEIGHT FIX (all grids)
   Syncfusion RowHeight sets line-height:0 inline on cells,
   garbling non-template columns. This global fix restores legibility.
   ============================================ */

.e-grid .e-rowcell {
    line-height: 1.4 !important;
}

/* ============================================
   GRID - COLUMN MIN-WIDTH & HEADER TRUNCATION FIX
   Prevents headers from truncating to unreadable text
   ============================================ */

.e-grid .e-headercell {
    min-width: 80px;
}

.e-grid .e-headercell .e-headertext {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure cell content doesn't overflow badly */
.e-grid .e-rowcell {
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Checkbox column exception: the 80px header / 60px row min-width floors
   were sized for text columns and force the checkbox gutter unnecessarily
   wide. The checkbox column has a fixed Width="32" in markup (P4DataGrid)
   and a 16px glyph - clamp its min-width so the markup width can take
   effect. Header selector uses :has(.e-checkselectall) (Syncfusion's own
   header-checkbox class); row selector uses .e-gridchkbox (Syncfusion's
   own row-checkbox cell class). */
.e-grid .e-headercell:has(.e-checkselectall) {
    min-width: 0 !important;
}
.e-grid .e-rowcell.e-gridchkbox {
    min-width: 0 !important;
}

/* ClipMode.EllipsisWithTooltip needs nowrap to actually clip text.
   The general .e-rowcell rule sets white-space: normal which breaks clip. */
.e-grid .e-rowcell.e-ellipsistooltip {
    white-space: nowrap !important;
}

/* DisplayAsCheckBox columns render a read-only checkbox via
   .e-checkbox-wrapper.e-checkbox-disabled inside a row cell. Default theme
   colors are too pale to read at a glance, so paint the checked state with
   brand blue and give the unchecked frame a visible border. Scoped to row
   cells so row/header selection checkboxes (.e-gridchkbox / .e-checkselectall)
   keep their theme defaults. */
.e-grid .e-rowcell .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check {
    background-color: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    color: #ffffff !important;
}
.e-grid .e-rowcell .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check::before {
    color: #ffffff !important;
}
.e-grid .e-rowcell .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-uncheck {
    border-color: var(--ds-border, #c4c4c4) !important;
    background-color: transparent !important;
}

/* ============================================
   GRID - PAGER SELECTED PAGE WHITE TEXT
   ============================================ */

.e-grid .e-gridpager .e-currentitem,
.e-grid .e-pager .e-currentitem {
    color: #fff !important;
}

/* ============================================
   GRID - AGGREGATE ROW VISIBILITY
   ============================================ */

.e-grid .e-gridfooter {
    overflow: visible !important;
}

.e-grid .e-summaryrow .e-summarycell {
    padding: 10px 8px !important;
}

/* ============================================
   GRID - HIDE DETAIL EXPAND COLUMN
   Syncfusion auto-detects nested data and shows
   expand icons; hide them when not needed
   ============================================ */

.e-grid .e-detailheadercell {
    border-bottom: none;
}
.e-grid .e-detailrowcollapse,
.e-grid .e-detailrowexpand {
    cursor: pointer;
    text-align: center;
    padding: 0 4px;
}

/* Shared detail-form shell moved to p4-components.css */

/* ============================================
   RESPONSIVE DESIGN SYSTEM
   Phase 1: Critical Mobile Fixes
   ============================================ */

/* ── 1. Responsive Dialogs ─────────────────── */

/* Base responsive dialog - max-width safety for small viewports.
   IMPORTANT: Use .p4-dialog.e-dialog (not bare .p4-dialog) because
   Syncfusion propagates CssClass to BOTH the dialog AND its overlay
   container (.e-dlg-container). Bare .p4-dialog would constrain the
   container width and break flex centering (e-dlg-center-center). */
.p4-dialog.e-dialog,
.e-dialog.e-popup {
    max-width: 90vw !important;
}

/* Dialog size variants */
.p4-dialog.e-dialog.dialog-sm,
.e-dialog.dialog-sm {
    width: min(90vw, 400px) !important;
}

.p4-dialog.e-dialog.dialog-md,
.e-dialog.dialog-md {
    width: min(90vw, 500px) !important;
}

.p4-dialog.e-dialog.dialog-lg,
.e-dialog.dialog-lg {
    width: min(90vw, 800px) !important;
}

.p4-dialog.e-dialog.dialog-xl,
.e-dialog.dialog-xl {
    width: min(90vw, 1000px) !important;
}

.p4-dialog.e-dialog.dialog-xxl,
.e-dialog.dialog-xxl {
    width: min(95vw, 1100px) !important;
}

/* Tab spacing inside line-editor dialogs.
   Default SfTab sits below the dialog header with too much padding above it,
   and its content panel sits flush against the tab underline. Tighten the
   gap above the tab nav and add breathing room below the tab underline.
   Opt-in via the `p4-line-editor-tabbed` class on the dialog's CssClass. */
.p4-line-editor-tabbed .e-dlg-content {
    padding-top: var(--space-2) !important;
}

.p4-line-editor-tabbed .e-tab .e-content .e-item {
    padding-top: var(--space-4) !important;
}

/* Select Document Lines dialog - constrain height + internal scroll */
.p4-select-lines-dialog.e-dialog {
    max-height: calc(100vh - var(--ds-appbar-height, 56px) - 64px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.p4-select-lines-dialog.e-dialog .e-dlg-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* Clickable grid rows in selection dialogs (Add Line, Add Bundle) */
.ds-create-dialog .e-grid .e-row {
    cursor: pointer;
}

/* Fullscreen dialogs on small phones */
@media (max-width: 480px) {
    .p4-dialog.e-dialog.dialog-fullscreen-mobile,
    .e-dialog.dialog-fullscreen-mobile {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .p4-dialog.e-dialog.dialog-fullscreen-mobile .e-dlg-content,
    .e-dialog.dialog-fullscreen-mobile .e-dlg-content {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/* ── 2. Responsive Visibility Utilities ────── */

/* Hide at specific breakpoints */
@media (max-width: 1024px) {
    .hide-lg { display: none !important; }
}

@media (max-width: 768px) {
    .hide-md { display: none !important; }
}

@media (max-width: 640px) {
    .hide-sm { display: none !important; }
}

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

/* Show only on mobile */
.show-mobile { display: none !important; }

@media (max-width: 768px) {
    .show-mobile { display: block !important; }
    .show-mobile-flex { display: flex !important; }
    .show-mobile-inline { display: inline !important; }
    .hide-mobile { display: none !important; }
}

/* ── 3. Responsive Grid Columns ────────────── */

@media (max-width: 1024px) {
    .p4-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .p4-grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .p4-grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .p4-grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .p4-grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ── 4. Responsive Breakpoints ─────────────── */

/* Large-tablet summary-row rules moved to p4-components.css */

/* Tablets (768px) */
@media (max-width: 768px) {
    .p4-appbar {
        padding: 0 8px;
    }

    .p4-content-wrapper {
        padding: 16px;
    }

    .p4-card {
        padding: 12px;
    }

    /* Shared tablet form-shell rules moved to p4-components.css */

    /* Shared page-header and summary-row tablet rules moved to p4-components.css */

    /* Tabs scroll horizontally */
    .e-tab .e-tab-header {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .e-tab .e-toolbar-item {
        flex-shrink: 0;
    }

    /* Cards reduce padding */
    .e-card,
    .e-custom-card {
        padding: 12px;
    }

    .e-card .e-card-header,
    .e-custom-card .e-card-header {
        padding: 12px 12px 8px;
    }

    .e-card .e-card-content,
    .e-custom-card .e-card-content {
        padding: 8px 12px 12px;
    }
}

/* Small phones (640px) */
@media (max-width: 640px) {
    /* Shared page-header, form-row, and summary-row mobile rules moved to split layers */

    /* Reduce gaps */
    .p4-gap-6 { gap: 16px; }
    .p4-gap-5 { gap: 12px; }
    .p4-gap-4 { gap: 8px; }
}

/* Extra small phones (480px) */
@media (max-width: 480px) {
    .p4-content-wrapper {
        padding: 12px;
    }

    .p4-card {
        padding: 8px;
    }

    /* Stat cards compact */
    .p4-stat-value {
        font-size: 1.25rem;
    }

    .p4-stat-label {
        font-size: 0.6875rem;
    }

    /* Shared title/badge extra-small rules moved to p4-components.css */
}

/* ── 5. Data Grid Responsive ───────────────── */

/* Horizontal scroll wrapper for list-page grids.
   min-height ensures Excel-style filter popups (rendered inside .e-grid)
   have enough room to display fully even when the grid has few rows.
   flex layout makes the grid stretch to fill the min-height.
   overflow is visible on desktop so filter popups aren't clipped;
   horizontal scroll is enabled only on mobile via media query. */
.p4-grid-responsive {
    width: 100%;
    overflow: visible;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.p4-grid-responsive .e-grid {
    flex: 1;
}

@media (max-width: 768px) {
    /* Enable horizontal scroll on mobile */
    .p4-grid-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure grids have minimum width for scroll */
    .p4-grid-responsive .e-grid {
        min-width: 700px;
    }

    /* Grid toolbar wraps */
    .e-grid .e-toolbar {
        flex-wrap: wrap;
        height: auto !important;
        padding: 8px;
        gap: 8px;
    }

    .e-grid .e-toolbar .e-toolbar-items {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Reduce grid row height slightly */
    .e-grid .e-rowcell {
        padding: 8px 12px;
    }
}

/* ── 6. Touch-Friendly Targets (WCAG 2.5.5) ── */

/* Tablet and below: Increase touch targets to 44px minimum */
@media (max-width: 768px) {
    .e-btn,
    .p4-btn,
    .e-input,
    .e-textbox,
    .e-ddl,
    .e-dropdownlist,
    .e-numerictextbox,
    .e-datepicker,
    .e-datetimepicker {
        min-height: 44px;
    }

    .p4-appbar-icon-btn {
        width: 44px;
        height: 44px;
    }

    /* Increase grid row height for easier touch */
    .e-grid .e-row {
        height: 48px;
    }

    .e-grid .e-rowcell {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Larger checkboxes */
    .e-checkbox-wrapper .e-frame {
        width: 22px;
        height: 22px;
    }

    /* Dropdown items */
    .e-dropdownbase .e-list-item,
    .e-listbox .e-list-item {
        min-height: 44px;
        padding: 12px 16px;
    }
}

/* Extra small screens: Even larger targets */
@media (max-width: 480px) {
    .e-btn,
    .p4-btn {
        min-height: 48px;
        padding: 12px 20px;
    }

    .p4-appbar-icon-btn {
        width: 48px;
        height: 48px;
    }

    /* Shared page-header small-screen rules moved to p4-components.css */
}

/* ============================================
   INLINE-EDITABLE GRID CELLS
   Always-visible border (matches Angular demo pattern).
   Used in line-item grids for Qty, Price, Discount%.
   ============================================ */

/* Default: visible subtle border */
.p4-inline-edit.e-input-group:not(.e-input-focus),
.p4-inline-edit.e-control-wrapper:not(.e-input-focus) {
    border-color: var(--ds-outline-variant, #e0e0e0) !important;
    background: var(--ds-surface, #fff);
    box-shadow: none !important;
}

/* Hover: slightly stronger border */
.p4-inline-edit.e-input-group:hover:not(.e-input-focus),
.p4-inline-edit.e-control-wrapper:hover:not(.e-input-focus) {
    border-color: var(--ds-outline, #bdbdbd) !important;
    background: var(--ds-surface, #fff);
}

/* Focus: primary border */
.p4-inline-edit.e-input-group.e-input-focus,
.p4-inline-edit.e-control-wrapper.e-input-focus {
    border-color: var(--ds-primary, #1976D2) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Font sizing + padding for grid cells */
.p4-inline-edit .e-input,
.p4-inline-edit input.e-numerictextbox {
    font-size: 13px;
    font-weight: 500;
    padding: 4px 8px;
}

/* Consistent height for inline edit wrappers */
.p4-inline-edit.e-input-group,
.p4-inline-edit.e-control-wrapper {
    min-height: 32px;
}

/* Save-in-progress overlay */
.p4-line-saving {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Moved-line highlight - applied via JS after line reorder.
   Target td cells (not tr) because Syncfusion paints cell backgrounds on td. */
tr.p4-line-moved > td {
    animation: cell-moved-flash 1.8s ease-out forwards;
}

@keyframes cell-moved-flash {
    0%, 20% { background-color: rgba(59, 130, 246, 0.25); }
    100%    { background-color: transparent; }
}

.p4-packsize-control {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.p4-packsize-control > .e-control-wrapper {
    flex: 0 1 96px;
    min-width: 96px;
}

.p4-packsize-control > .e-ddl.e-control-wrapper {
    flex: 1 1 90px;
    min-width: 90px;
}

.p4-packsize-label {
    font-size: 11px;
    color: var(--ds-text-muted, #64748B);
    line-height: 1.2;
    white-space: nowrap;
}

[data-theme*="dark"] .p4-packsize-label {
    color: var(--ds-text-muted, #A3A3A3);
}

/* Hide dropdown caret on icon-only overflow buttons (three-dots) */
.e-dropdown-btn:has(.e-more-vertical-1) .e-caret {
    display: none;
}

/* Dark mode overrides */
[data-theme*="dark"] .p4-inline-edit.e-input-group:not(.e-input-focus),
[data-theme*="dark"] .p4-inline-edit.e-control-wrapper:not(.e-input-focus) {
    border-color: var(--ds-outline-variant, #444) !important;
    background: var(--ds-surface, #1e1e1e);
}
[data-theme*="dark"] .p4-inline-edit.e-input-group:hover:not(.e-input-focus),
[data-theme*="dark"] .p4-inline-edit.e-control-wrapper:hover:not(.e-input-focus) {
    border-color: var(--ds-outline, #666) !important;
    background: var(--ds-surface, #1e1e1e);
}

/* ── 7. Reduced Motion ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .p4-sidebar,
    .p4-dialog,
    .e-dialog,
    .e-toast {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   DIALOG OVERLAY / CONTAINER - FULL VIEWPORT
   ============================================ */

/* Modal overlay - force full-viewport coverage regardless of parent container.
   z-index must exceed .p4-appbar (1001) so dialogs are not clipped by the top bar. */
.e-dlg-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1001 !important;
}

/* Modal dialog container - center over full viewport.
   Sits one layer above .e-dlg-overlay and above .p4-appbar (1001). */
.e-dlg-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1002 !important;
}

/* ============================================
   POPUP CLASS ISOLATION
   ============================================ */

/* Syncfusion propagates CssClass (e.g. p4-input, portal-date-input) to popup elements.
   width:100% on the popup breaks position math (popup becomes viewport-wide, left goes negative).
   Reset those properties so popup sizing/positioning is Syncfusion-controlled. */
.e-popup.p4-input,
.e-popup-wrapper.p4-input,
.e-popup-container.p4-input,
.e-popup.portal-date-input,
.e-popup-wrapper.portal-date-input,
.e-popup-container.portal-date-input {
    width: auto !important;
    padding: 0 !important;
    border: none !important;
}

/* ============================================
   SFCARD - HEADER ALIGNMENT + HOVER DISABLE
   ============================================ */

/* SfCard header - left-align instead of Syncfusion's default center */
.e-card .e-card-header {
    text-align: left;
}

.e-card .e-card-header .e-card-header-caption {
    text-align: left;
}

/* Disable Syncfusion card hover effect globally.
   Keep this scoped to Syncfusion card classes only so custom .p4-card
   interactive behavior remains available where intentionally used. */
.e-card,
.e-custom-card,
.e-card.e-custom-card,
.e-card.e-card-hover {
    transition: none !important;
}

.e-card:hover,
.e-custom-card:hover,
.e-card.e-custom-card:hover,
.e-card.e-card-hover,
.e-card:focus-within,
.e-custom-card:focus-within,
.e-card.e-custom-card:focus-within {
    background: var(--ds-surface, var(--surface-card, var(--p4-surface, #FFFFFF))) !important;
    background-image: none !important;
    box-shadow: var(--ds-elevation-1, var(--p4-elevation-1)) !important;
    border-color: var(--ds-outline-variant, var(--p4-outline-variant, #E2E8F0)) !important;
    transform: none !important;
    filter: none !important;
}