/* Responsive scaling engine -------------------------------------------------- */

/*
 * Establish three desktop scaling states driven by viewport width and pixel density.
 * The breakpoints normalise typography across standard and high-DPI displays.
 */

/* Baseline: default for 1440p and larger standard-DPI displays. */
html {
    font-size: 16px;
}

/* Rule 1: standard, non-Retina 1080p screens. */
@media (max-width: 1920px) and (-webkit-max-device-pixel-ratio: 1.4),
       (max-width: 1920px) and (max-resolution: 1.4dppx) {
    html {
        font-size: 15px;
    }
}

/* Rule 2: high-DPI screens (4K, 5K, Retina). */
@media (min-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5),
       (min-width: 1600px) and (min-resolution: 144dpi) {

    /* Scale down text, padding and icons by reducing the root font size. */
    html {
        font-size: 12px;
    }

    /* Adjust the sidebar width to counteract the reduced root font size on high-DPI displays. */
    :root {
        --pt-sidebar-width: 31.7rem;
    }
}

/* End responsive scaling engine ---------------------------------------------- */


:root {
    /* Color palette — Carbon */
    --pt-primary-blue: #C4622D;
    --pt-primary-blue-rgb: 196, 98, 45;
    --pt-darker-blue: #A85225;
    --pt-accent-teal: #C49A2D;
    --pt-accent-teal-rgb: 196, 154, 45;
    --pt-accent-gold: #C49A2D;
    --pt-accent-gold-rgb: 196, 154, 45;

    /* Backgrounds & surfaces — solid carbon */
    --pt-main-background: #0C0D0E;
    --pt-main-background-rgb: 12, 13, 14;
    --pt-surface-color-rgb: 20, 21, 22;
    --pt-surface-color: rgba(var(--pt-surface-color-rgb), 0.8);
    --pt-surface-dark-rgb: 20, 21, 22;
    --pt-surface-dark: rgba(var(--pt-surface-dark-rgb), 0.9);
    --pt-surface-dark-solid: rgba(var(--pt-surface-dark-rgb), 0.95);
    --pt-darker-surface: #111213;
    --pt-bg-gradient-subtle: #0C0D0E;

    /* Text — warm off-white */
    --pt-text-on-dark-primary: #E8E8E6;
    --pt-text-on-dark-secondary: #9B9B97;
    --pt-text-on-dark-muted: #7A7A76;

    /* Borders & overlays */
    --pt-medium-grey-border: rgba(255, 255, 255, 0.1);
    --pt-border-hover: rgba(255, 255, 255, 0.15);
    --pt-overlay-xs: rgba(255, 255, 255, 0.05);
    --pt-overlay-sm: rgba(255, 255, 255, 0.1);
    --pt-overlay-md: rgba(255, 255, 255, 0.15);
    --pt-overlay-lg: rgba(255, 255, 255, 0.2);

    /* Semantic colors */
    --pt-success: #22c55e;
    --pt-success-muted: #81c784;
    --pt-danger: #ef4444;
    --pt-danger-rgb: 239, 68, 68;
    --pt-danger-muted: #ff8a80;
    --pt-danger-active: #d63638;
    --pt-warning: #f59e0b;
    --pt-warning-muted: #ffb74d;

    /* Interactive state colors */
    --pt-accent-teal-hover: #A8832A;
    --pt-accent-gold-warm: #C49A2D;

    /* Chart / KPI data series colors */
    --pt-chart-purple: #C4622D;
    --pt-chart-purple-deep: #A85225;
    --pt-chart-yellow: #EAB308;
    --pt-chart-red: #EA2A3F;
    --pt-chart-orange: #F78A15;
    --pt-chart-blue: #1E92B7;
    --pt-chart-green: #2C9930;

    /* Typography */
    --pt-font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Type scale (major third ratio ~1.25) */
    --pt-text-xs: 0.75rem;   /* 12px — badges, tiny labels */
    --pt-text-sm: 0.8125rem; /* 13px — secondary text, captions */
    --pt-text-base: 0.875rem; /* 14px — body text, table data */
    --pt-text-md: 1rem;      /* 16px — labels, filter headers */
    --pt-text-lg: 1.125rem;  /* 18px — subheadings */
    --pt-text-xl: 1.3rem;    /* ~21px — section titles */
    --pt-text-2xl: 1.5rem;   /* 24px — page title */

    /* Layout & sizing (rem units) */
    --pt-sidebar-width: 23.75rem; /* 380px / 16 */
    --pt-border-radius: 1rem; /* 16px / 16 */
    --pt-border-radius-small: 0.5rem; /* 8px / 16 */
    --pt-chart-header-height: 3.125rem; /* 50px / 16 */
    --pt-chart-container-min-height: 27.5rem; /* 440px / 16 */

    /* Iconography and interactive element sizing */
    --pt-icon-size-sm: 0.875rem; /* 14px / 16 */
    --pt-icon-size-md: 1rem; /* 16px / 16 */
    --pt-icon-size-lg: 1.25rem; /* 20px / 16 */
    --pt-interactive-element-height: 2.5rem; /* 40px / 16 */

    /* Motion */
    --pt-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --pt-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --pt-duration-fast: 150ms;
    --pt-duration-normal: 200ms;
    --pt-duration-slow: 300ms;
}

/* GLOBAL & LAYOUT */
body {
    margin: 0;
    font-family: var(--pt-font-family);
    background: var(--pt-bg-gradient-subtle);
    color: var(--pt-text-on-dark-primary);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

html.pt-no-scroll,
body.pt-no-scroll,
body.pt-lightbox-no-scroll {
    overflow: hidden !important;
}

#pt-dashboard-layout-wrapper {
    display: flex;
    align-items: flex-start;
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}

.pt-sidebar {
    width: var(--pt-sidebar-width);
    flex-shrink: 0;
    padding: 0.9375rem; /* 15px / 16 */
    box-sizing: border-box;
    transition: width 0.3s ease, padding 0.3s ease;
}

@media (min-width: 993px) {
    .pt-sidebar {
        position: fixed;
        will-change: transform;
    }

    .pt-sidebar-card {
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
    }

    /* Adjust main content when sidebar is collapsed on desktop */
    body.pt-sidebar-collapsed .pt-main-content {
        margin-left: 4.5rem !important;
    }
}

.pt-sidebar.pt-sidebar-loading .pt-sidebar-content {
    opacity: 0.98;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
}

.pt-sidebar-card {
    background: rgba(var(--pt-surface-dark-rgb), 0.8);
    border: 1px solid var(--pt-medium-grey-border); /* 1px border kept for sharpness */
    border-radius: var(--pt-border-radius);
    height: 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--pt-duration-slow) var(--pt-ease-out);
    box-sizing: border-box;
}

.pt-sidebar-content {
    padding: 0.9375rem; /* 15px / 16 */
    flex-grow: 1;
    transition: opacity 0.2s ease-in-out;
}

/* Favorites and Collapse Button Container */
.pt-favorites-and-collapse {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pt-favorites-and-collapse #pt-toggle-favorites-btn {
    flex: 1;
}

/* Sidebar Collapse Button */
.pt-sidebar-collapse-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(var(--pt-primary-blue-rgb), 0.2);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 0.5rem;
    color: var(--pt-text-on-dark-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out);
    padding: 0;
    flex-shrink: 0;
}

.pt-sidebar-collapse-btn:hover {
    background: var(--pt-primary-blue);
    border-color: var(--pt-primary-blue);
}

.pt-sidebar-collapse-btn i {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

/* Collapsed sidebar state */
.pt-sidebar.is-collapsed {
    --pt-sidebar-width: 4.5rem;
    width: 4.5rem !important;
    padding: 0.5rem !important;
    min-width: 4.5rem;
    max-width: 4.5rem;
}

.pt-sidebar.is-collapsed .pt-sidebar-card {
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.pt-sidebar.is-collapsed .pt-sidebar-content {
    padding: 0.5rem;
}

.pt-sidebar.is-collapsed .pt-sidebar-content > *:not(.pt-favorites-and-collapse) {
    display: none;
}

.pt-sidebar.is-collapsed .pt-favorites-and-collapse {
    gap: 0;
}

.pt-sidebar.is-collapsed .pt-favorites-and-collapse #pt-toggle-favorites-btn {
    opacity: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: none;
    flex: 0;
}

.pt-sidebar.is-collapsed .pt-sidebar-collapse-btn i {
    transform: rotate(180deg);
}

.pt-main-content {
    transition: margin-left 0.3s ease;
    flex-grow: 1;
    min-width: 0;
    overscroll-behavior-y: contain;
    padding: 0.9375rem; /* 15px / 16 */
    box-sizing: border-box;
    margin-left: var(--pt-sidebar-width);
}

.pt-section {
    background-color: var(--pt-surface-color);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius);
    margin-bottom: 1.5625rem; /* 25px / 16 */
    padding: 1.5625rem; /* 25px / 16 */
    transition: border-color 0.3s ease;
    overflow: visible; /* Allow chart segments to overflow section boundaries */
}

.pt-section:hover {
    border-color: rgba(var(--pt-primary-blue-rgb), 0.3);
}


/* COMPONENTS */

/* Icons */
svg.lucide {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
    display: inline-block;
}

/* Buttons */
.pt-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* 8px / 16 */
    padding: 0.5625rem 0.9375rem; /* 9px 15px */
    font-size: var(--pt-text-base);
    font-weight: 500;
    border-radius: var(--pt-border-radius-small);
    border: 1px solid var(--pt-medium-grey-border);
    cursor: pointer;
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out), color var(--pt-duration-normal) var(--pt-ease-out), transform var(--pt-duration-normal) var(--pt-ease-out), box-shadow var(--pt-duration-normal) var(--pt-ease-out);
    text-align: center;
    line-height: 1.5;
    background: transparent;
    color: var(--pt-text-on-dark-primary);
}

.pt-button:hover {
    background-color: var(--pt-primary-blue);
    border-color: var(--pt-primary-blue);
    transform: translateY(-2px); /* Kept as px for subtle visual effect */
    box-shadow: 0 0.25rem 0.9375rem rgba(var(--pt-primary-blue-rgb), 0.3); /* 4px 15px */
}
.pt-button:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: 2px;
}

.pt-sidebar #pt-clear-all-filters-sidebar {
    background-color: var(--pt-accent-teal);
    color: var(--pt-main-background);
    border-color: var(--pt-accent-teal);
    width: 100%;
    font-weight: 500;
}

.pt-sidebar #pt-clear-all-filters-sidebar:hover {
    background-color: var(--pt-accent-teal-hover); /* darker teal hover variant */
    border-color: var(--pt-accent-teal-hover); /* darker teal hover variant */
    color: var(--pt-main-background);
    box-shadow: 0 0.25rem 0.9375rem rgba(var(--pt-accent-teal-rgb), 0.3); /* 4px 15px */
}

button.pt-button.pt-button-loading {
    color: transparent;
}

.pt-sidebar #pt-clear-all-filters-sidebar.pt-button-loading {
    background-color: var(--pt-accent-teal);
    border-color: var(--pt-accent-teal);
}

.pt-sidebar #pt-clear-all-filters-sidebar:disabled {
    background-color: var(--pt-darker-blue);
    border-color: var(--pt-medium-grey-border);
    color: var(--pt-text-on-dark-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

.pt-sidebar #pt-clear-all-filters-sidebar.pt-button-loading::after {
    border-top-color: var(--pt-main-background);
}

.pt-button:disabled,
.pt-button.pt-button-loading {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

/* Button Loading Spinner */
.pt-button-loading {
    position: relative;
}
.pt-button-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--pt-icon-size-md);
    height: var(--pt-icon-size-md);
    margin: -0.5rem 0 0 -0.5rem; /* -8px / 16 */
    border: 2px solid var(--pt-overlay-lg);
    border-top-color: var(--pt-text-on-dark-primary);
    border-radius: 50%;
    animation: pt-spin 0.6s linear infinite;
}
@keyframes pt-spin {
    to { transform: rotate(360deg); }
}

/* Sidebar Filters */
.pt-filter-group {
    margin-bottom: 1.875rem; /* 30px / 16 */
    border-bottom: 1px solid var(--pt-medium-grey-border);
    padding-bottom: 1.875rem; /* 30px / 16 */
}
.pt-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.pt-filter-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px / 16 */
    font-weight: 500;
    color: var(--pt-text-on-dark-primary);
    margin-bottom: 0.75rem; /* 12px / 16 */
    font-size: var(--pt-text-base);
}
.pt-filter-group .pt-label-icon {
    color: var(--pt-accent-teal);
}

.pt-filter-label-with-override {
    justify-content: space-between;
    width: 100%;
}
.pt-filter-label-with-override .pt-label-main-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px / 16 */
}

.pt-override-control {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px / 16 */
}

.pt-override-label-text {
    font-size: var(--pt-text-sm);
    color: var(--pt-text-on-dark-secondary);
    font-weight: 400;
    white-space: nowrap;
    line-height: var(--pt-icon-size-md);
    transition: color 0.2s ease;
}

.pt-override-info-icon {
    color: var(--pt-accent-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pt-icon-size-md);
    height: var(--pt-icon-size-md);
    font-size: var(--pt-icon-size-sm);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
    position: relative;
}

.pt-override-control svg {
    vertical-align: middle;
}

.pt-override-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* 8px / 16 */
    cursor: pointer;
    min-height: var(--pt-icon-size-md);
}

.pt-override-checkbox-label:hover .pt-override-label-text {
    color: var(--pt-accent-teal);
}

.pt-override-checkbox-label .pt-override-info-icon {
    pointer-events: auto;
}

.pt-override-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.pt-override-checkbox-visual {
    width: var(--pt-icon-size-md);
    height: var(--pt-icon-size-md);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 3px;
    background-color: var(--pt-main-background);
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.pt-override-infinity-icon-inside {
    color: transparent;
    width: var(--pt-icon-size-sm);
    height: var(--pt-icon-size-sm);
    transition: color 0.15s ease;
}

.pt-override-checkbox-label[aria-checked="true"] .pt-override-checkbox-visual {
    background-color: var(--pt-accent-teal);
    border-color: var(--pt-accent-teal);
}
.pt-override-checkbox-label[aria-checked="true"] .pt-override-infinity-icon-inside {
    color: var(--pt-main-background);
}
.pt-override-checkbox-label:hover .pt-override-checkbox-visual {
    border-color: var(--pt-accent-teal);
}

/* When infinity is active, slightly dim the value display */
.pt-filter-group.is-override-active .pt-slider-value-display-container {
    opacity: 0.6;
    pointer-events: none;
}

/* Keep the minimum (first) handle fully interactive */
.pt-filter-group.is-override-active .ui-slider .ui-slider-handle:first-of-type {
    pointer-events: auto;
    cursor: pointer;
}

/* Style the maximum handle to show it's locked at infinity */
.pt-filter-group.is-override-active .ui-slider .ui-slider-handle:last-of-type {
    pointer-events: none;
    cursor: not-allowed;
    background: var(--pt-primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Infinity icon inside the max handle */
.pt-filter-group.is-override-active .ui-slider .ui-slider-handle:last-of-type .pt-slider-infinity-icon {
    color: var(--pt-text-on-dark-primary);
    width: 0.75rem;
    height: 0.75rem;
    pointer-events: none;
}


/* Inputs & Selects */
.pt-sidebar-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem; /* 8px 12px */
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
    background-color: var(--pt-darker-surface);
    color: var(--pt-text-on-dark-primary);
    font-size: var(--pt-text-base);
    box-sizing: border-box;
    height: var(--pt-interactive-element-height);
    transition: border-color var(--pt-duration-normal) var(--pt-ease-out), box-shadow var(--pt-duration-normal) var(--pt-ease-out), outline var(--pt-duration-normal) var(--pt-ease-out);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.pt-sidebar-search-input:focus {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: -2px;
    border-color: var(--pt-accent-teal);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 0 1.25rem rgba(var(--pt-accent-teal-rgb), 0.2); /* 20px / 16 */
}
.pt-sidebar-search-input::placeholder {
    color: var(--pt-text-on-dark-secondary);
    opacity: 0.7;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}

.pt-search-control-group-sidebar {
    display: flex;
    gap: 0.5rem; /* 8px / 16 */
    position: relative;
}
.pt-search-control-group-sidebar .pt-sidebar-search-input {
    flex-grow: 1;
    padding-right: 2rem;
}
.pt-search-clear-btn {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--pt-text-on-dark-secondary);
    cursor: pointer;
    padding: 0.2rem;
    display: none;
    line-height: 0;
}
.pt-search-clear-btn svg {
    width: 14px;
    height: 14px;
}
/* Ensure clear button has adequate touch target via padding */
.pt-search-clear-btn {
    min-width: 2rem;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-search-clear-btn:hover {
    color: var(--pt-text-on-dark-primary);
}
.pt-search-clear-btn:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: 2px;
}
.pt-search-control-group-sidebar .pt-sidebar-search-input:not(:placeholder-shown) ~ .pt-search-clear-btn {
    display: block;
}
.pt-search-control-group-sidebar .pt-button-search {
    flex-shrink: 0;
    padding: 0;
    width: var(--pt-interactive-element-height);
    height: var(--pt-interactive-element-height);
}
.pt-search-control-group-sidebar .pt-button-icon {
    width: var(--pt-icon-size-lg);
    height: var(--pt-icon-size-lg);
}

/* Active Filters */
#pt-active-filters-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px / 16 */
    margin-bottom: 1.25rem; /* 20px / 16 */
    background-color: rgba(var(--pt-main-background-rgb), 0.5);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
    padding: 0.625rem; /* 10px / 16 */
    min-height: 2.625rem; /* 42px / 16 */
}
#pt-active-filters-sidebar.empty-filters::before {
    content: attr(data-empty-message);
    width: 100%;
    text-align: center;
    color: var(--pt-text-on-dark-secondary);
    padding: 0.3125rem 0; /* 5px / 16 */
    font-size: var(--pt-text-base);
}
.pt-active-filter-tag {
    background-color: var(--pt-primary-blue);
    color: var(--pt-text-on-dark-primary);
    border: 1px solid var(--pt-primary-blue);
    padding: 0.25rem 0.5rem 0.25rem 0.75rem; /* 4px 8px 4px 12px */
    border-radius: 1.25rem; /* 20px / 16 */
    font-size: var(--pt-text-sm);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* 8px / 16 */
    max-width: 100%;
}
.pt-active-filter-tag button.pt-remove-filter {
    background: var(--pt-darker-blue);
    border: none;
    color: var(--pt-text-on-dark-primary);
    font-size: var(--pt-text-md);
    cursor: pointer;
    line-height: 1;
    opacity: 0.85;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.5rem;
    margin: -0.5rem;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, opacity 0.2s;
}
.pt-active-filter-tag button.pt-remove-filter:hover {
    background-color: var(--pt-primary-blue);
    opacity: 1;
}
.pt-active-filter-tag button.pt-remove-filter:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: 2px;
}

/* Sliders */
.ui-slider {
    position: relative;
    background: rgba(var(--pt-primary-blue-rgb), 0.3);
    border-radius: 3px;
    height: 0.375rem; /* 6px / 16 */
    border: none;
    width: 100%;
    box-sizing: border-box;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    display: block;
    background: var(--pt-accent-teal);
    border-radius: 3px;
    height: 100%;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    background: var(--pt-accent-teal);
    border: none;
    border-radius: 50%;
    outline: none;
    top: -0.5rem;
    margin-left: -0.625rem;
}
/* Expand touch area to 44px without changing visual size */
.ui-slider .ui-slider-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
}
.ui-slider .ui-slider-handle:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: 2px;
}
.ui-slider .ui-slider-handle:hover {
    transform: scale(1.15);
    transition: transform 0.15s ease;
}

/* Price filter input group */
.pt-slider-input-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.pt-slider-input {
    flex: 1;
    min-width: 0;
    padding: 0.4rem;
    background: var(--pt-overlay-xs);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 0.375rem;
    color: var(--pt-text-on-dark-primary);
    font-size: var(--pt-text-sm);
    transition: border-color var(--pt-duration-normal) var(--pt-ease-out), background-color var(--pt-duration-normal) var(--pt-ease-out);
    box-sizing: border-box;
}

.pt-slider-input:focus {
    outline: none;
    border-color: var(--pt-accent-teal);
    background: rgba(255, 255, 255, 0.08);
}

.pt-slider-input::placeholder {
    color: var(--pt-text-on-dark-secondary);
    font-size: var(--pt-text-xs);
}

.pt-slider-input-separator {
    color: var(--pt-text-on-dark-secondary);
    font-size: var(--pt-text-xs);
    flex-shrink: 0;
}

.pt-slider-value-display-container {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem; /* 12px / 16 */
    padding: 0 0.125rem; /* 2px / 16 */
    font-size: var(--pt-text-sm);
    color: var(--pt-text-on-dark-secondary);
}

/* Accordions */
.pt-filter-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    background-color: rgba(var(--pt-primary-blue-rgb), 0.15);
    color: var(--pt-text-on-dark-primary);
    font-family: inherit;
    font-size: inherit;
    border-radius: var(--pt-border-radius-small);
    border: 1px solid rgba(var(--pt-primary-blue-rgb), 0.3);
    transition: background-color 0.2s ease;
    margin-bottom: 0.625rem; /* 10px / 16 */
}
.pt-filter-accordion-header:hover {
    background-color: rgba(var(--pt-primary-blue-rgb), 0.25);
}
.pt-filter-accordion-header label,
.pt-filter-accordion-header > span:first-child {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
    flex-grow: 1;
    text-align: left;
}
.pt-accordion-toggle-icon {
    transition: transform 0.3s ease-in-out;
}
.pt-filter-accordion-header[aria-expanded="true"] .pt-accordion-toggle-icon {
    transform: rotate(180deg);
}
.pt-filter-accordion-content {
    padding: 0.3125rem; /* 5px / 16 */
    display: none;
}

/* Sidebar List (for categories, brands, sellers) */
.pt-sidebar-category-list {
    list-style: none;
    padding: 0;
    margin: 0.625rem 0 0; /* 10px / 16 */
    max-height: min(13.75rem, 40vh); /* 220px / 16, capped by viewport */
    overflow-y: auto;
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
    background-color: var(--pt-darker-surface);
}

/* Scrollbar styles - unchanged, they work well as is */
.pt-sidebar-card,
.pt-sidebar-category-list {
    scrollbar-width: thin;
    scrollbar-color: var(--pt-medium-grey-border) transparent;
}
.pt-sidebar-card:hover,
.pt-sidebar-category-list:hover {
    scrollbar-color: var(--pt-accent-teal) transparent;
}
.pt-sidebar-card::-webkit-scrollbar,
.pt-sidebar-category-list::-webkit-scrollbar {
    width: 8px; /* Kept as px for browser consistency */
}
.pt-sidebar-card::-webkit-scrollbar-track,
.pt-sidebar-category-list::-webkit-scrollbar-track {
    background: transparent;
}
.pt-sidebar-card::-webkit-scrollbar-thumb,
.pt-sidebar-category-list::-webkit-scrollbar-thumb {
    background-color: var(--pt-medium-grey-border);
    border-radius: 4px; /* Kept as px */
    border: 2px solid transparent; /* Kept as px */
    background-clip: content-box;
}
.pt-sidebar-card::-webkit-scrollbar-thumb:hover,
.pt-sidebar-category-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--pt-accent-teal);
}

.pt-sidebar-category-list li {
    padding: 0.75rem; /* 12px / 16 */
    font-size: var(--pt-text-base);
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px / 16 */
    border-bottom: 1px solid var(--pt-medium-grey-border);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.pt-sidebar-category-list li:last-child {
    border-bottom: none;
}
.pt-sidebar-category-list li:hover {
    background-color: var(--pt-darker-blue);
}
.pt-sidebar-category-list li.selected {
    background-color: var(--pt-darker-blue);
    font-weight: 500;
}
.pt-sidebar-category-list .pt-category-name,
.pt-sidebar-category-list .pt-brand-name,
.pt-sidebar-category-list .pt-seller-name {
    flex-grow: 1;
    color: var(--pt-text-on-dark-primary);
}
.pt-sidebar-category-list li.pt-list-message {
    color: var(--pt-text-on-dark-secondary);
    font-style: italic;
    justify-content: center;
    cursor: default;
}
.pt-sidebar-category-list li.pt-list-message:hover {
    background-color: transparent;
}
.pt-category-breadcrumbs-sidebar {
    font-size: var(--pt-text-sm);
    padding: 0.3125rem 0 0.625rem; /* 5px 0 10px */
    border-bottom: 1px solid var(--pt-medium-grey-border);
    margin-bottom: 0.625rem; /* 10px / 16 */
}
.pt-category-breadcrumbs-sidebar a {
    color: var(--pt-accent-teal);
    text-decoration: none;
    font-weight: 500;
}
.pt-category-breadcrumbs-sidebar a:hover {
    text-decoration: underline;
}
.pt-category-breadcrumbs-sidebar .pt-breadcrumb-separator {
    margin: 0 0.25rem; /* 4px / 16 */
    color: var(--pt-text-on-dark-secondary);
}

/* Custom Checkbox for Lists */
.pt-category-checked {
    width: var(--pt-icon-size-md);
    height: var(--pt-icon-size-md);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--pt-main-background);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pt-category-checked::before {
    content: '✓';
    font-weight: 700;
    font-size: var(--pt-text-xs);
    color: transparent;
    transition: color 0.15s ease;
    line-height: 1;
}
.pt-sidebar-category-list li:hover .pt-category-checked:not(.is-checked) {
    border-color: var(--pt-accent-teal);
}
.pt-category-checked.is-checked {
    background-color: var(--pt-accent-teal);
    border-color: var(--pt-accent-teal);
}
.pt-category-checked.is-checked::before {
    color: var(--pt-main-background);
}
.pt-sidebar-back-item .pt-category-name svg.lucide {
    color: var(--pt-accent-teal);
}

/* KPIs */
.pt-table-controls {
    margin-bottom: 1.25rem; /* 20px / 16 */
}
.pt-kpi-inline-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); /* 180px / 16 */
    gap: 0.9375rem; /* 15px / 16 */
}
.pt-kpi-item {
    background: var(--pt-surface-color);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius);
    padding: 0.9375rem; /* 15px / 16 */
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
    cursor: default;
}

.pt-kpi-item:hover {
    border-color: rgba(var(--pt-primary-blue-rgb), 0.3);
}

.pt-kpi-icon-container {
    color: var(--pt-accent-teal);
    margin-bottom: 0.75rem; /* 12px / 16 */
}
.pt-kpi-icon {
    width: 1.25rem; /* 20px / 16 */
    height: 1.25rem; /* 20px / 16 */
}
.kpi-title-inline {
    font-size: var(--pt-text-sm);
    color: var(--pt-text-on-dark-secondary);
    margin-bottom: 0.375rem; /* 6px / 16 */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Kept as px */
    display: flex;
    align-items: center;
    gap: 0.375rem; /* 6px / 16 */
}
.kpi-title-inline > span {
    flex-grow: 1;
}

.pt-kpi-info-icon {
    color: var(--pt-accent-teal);
    cursor: help;
    width: 1em;
    height: 1em;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
}

.kpi-value-inline {
    font-size: var(--pt-text-xl);
    font-weight: 700;
    color: var(--pt-text-on-dark-primary);
    font-variant-numeric: tabular-nums;
    animation: countUp 2s ease-out;
    white-space: nowrap;
}
.kpi-total-suffix {
    font-size: var(--pt-text-xs);
    font-weight: 400;
    color: var(--pt-text-on-dark-secondary);
}
@keyframes countUp {
    from { opacity: 0; transform: translateY(1.25rem); } /* 20px / 16 */
    to { opacity: 1; transform: translateY(0); }
}

.pt-kpi-item.loading .kpi-value-inline {
    display: none;
}
.pt-kpi-item.loading .pt-loader-inline {
    display: inline-block;
}
.pt-loader-inline {
    display: none;
    width: var(--pt-icon-size-md);
    height: var(--pt-icon-size-md);
    border: 2px solid var(--pt-overlay-lg);
    border-top-color: var(--pt-accent-teal);
    border-radius: 50%;
    animation: pt-spin 0.6s linear infinite;
}

/* KPI empty state (zero filtered products) */
.pt-kpi-inline-group.pt-kpi-no-data .pt-kpi-item:not(.pt-kpi-item-filtered-products) {
    opacity: 0.6;
    pointer-events: none;
}
.pt-kpi-inline-group.pt-kpi-no-data .pt-kpi-item:not(.pt-kpi-item-filtered-products):hover {
    transform: none;
    border-color: var(--pt-medium-grey-border);
    box-shadow: none;
}

/* Charts */
.pt-charts-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Equal width columns for consistency */
    gap: 1.5625rem; /* 25px / 16 */
    margin-bottom: 0;
    overflow: visible; /* Allow chart segments to overflow grid cells */
}

.pt-chart-container-wrapper {
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow chart segments to fly out on hover */
    height: 25rem; /* Fixed height to prevent jump when switching chart types */
    background: var(--pt-surface-color);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius);
    padding: 0.625rem;
    transition: border-color 0.3s ease;
    position: relative;
}

.pt-chart-container-wrapper:hover {
    border-color: rgba(var(--pt-accent-teal-rgb), 0.3);
}

.pt-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--pt-medium-grey-border);
    height: var(--pt-chart-header-height);
    flex-shrink: 0;
    position: relative;
}

.pt-chart-header h2 {
    font-size: var(--pt-text-xl);
    font-weight: 700;
    color: var(--pt-text-on-dark-primary);
    margin: 0;
    flex-grow: 1;
}

/* Chart Type Toggle Button */
.pt-chart-type-toggle {
    background: rgba(var(--pt-accent-teal-rgb), 0.1);
    border: 1px solid rgba(var(--pt-accent-teal-rgb), 0.3);
    border-radius: 0.5rem;
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out), transform var(--pt-duration-normal) var(--pt-ease-out);
    color: var(--pt-accent-teal);
}

.pt-chart-type-toggle:hover {
    background: rgba(var(--pt-accent-teal-rgb), 0.2);
    border-color: var(--pt-accent-teal);
}

.pt-chart-type-toggle:active {
    transform: scale(0.95);
}

.pt-chart-type-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.pt-chart-content {
    padding: 2rem; /* Balanced padding for glow effect without sacrificing vertical space */
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-height: 0; /* Allow flex shrinking */
    overflow: visible; /* Allow glow effect to be visible */
}

.pt-chart-content canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
}

/* Responsive canvas sizing for all charts - uniform sizing */
#pt-brand-concentration-chart,
#pt-competitor-chart,
#pt-visits-by-category-chart {
    max-height: 22rem;
}

/* Responsive breakpoints for charts */
@media (max-width: 1400px) {
    .pt-charts-section {
        grid-template-columns: 1fr;
    }

    .pt-chart-container-wrapper {
        height: 22rem;
    }

    #pt-brand-concentration-chart,
    #pt-competitor-chart,
    #pt-visits-by-category-chart {
        max-height: 20rem;
    }
}

@media (min-width: 1401px) and (max-width: 1800px) {
    .pt-charts-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1801px) {
    .pt-charts-section {
        grid-template-columns: repeat(3, 1fr);
    }

    .pt-chart-container-wrapper {
        height: 28rem;
    }

    #pt-brand-concentration-chart,
    #pt-competitor-chart,
    #pt-visits-by-category-chart {
        max-height: 25rem;
    }
}

.pt-chart-message {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    font-size: var(--pt-text-base);
    color: var(--pt-text-on-dark-muted);
}
.pt-chart-message .pt-chart-message-icon {
    width: 2rem;
    height: 2rem;
    opacity: 0.5;
}
.pt-chart-container-wrapper.has-message .pt-chart-content {
    display: none;
}
.pt-chart-container-wrapper.has-message .pt-chart-message {
    display: flex;
}
.pt-chart-content.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.875rem; /* 30px / 16 */
    height: 1.875rem; /* 30px / 16 */
    margin: -0.9375rem 0 0 -0.9375rem; /* -15px / 16 */
    border: 3px solid var(--pt-overlay-lg);
    border-top-color: var(--pt-accent-teal);
    border-radius: 50%;
    animation: pt-spin 1s linear infinite;
}

/* Table Footer (pagination + export) */
.pt-table-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 1rem;
    min-height: 2.5rem;
}
.pt-table-footer .pt-pagination-controls {
    margin-top: 0;
}
.pt-button-export {
    margin-left: auto;
    gap: 0.375rem;
    font-size: var(--pt-text-sm);
    padding: 0.4rem 0.75rem;
}
.pt-button-export svg {
    width: 14px;
    height: 14px;
}
.pt-button-export.is-exporting {
    opacity: 0.6;
    pointer-events: none;
}

/* Product Table */
.pt-table-wrapper {
    width: 100%;
    overflow-x: auto;
}
.pt-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pt-text-base);
    font-variant-numeric: tabular-nums;
}
.pt-data-table thead th {
    background-color: transparent;
    color: var(--pt-text-on-dark-secondary);
    padding: 0.5rem 0.5rem;
    text-align: left;
    font-weight: 500;
    border-bottom: 1px solid var(--pt-medium-grey-border);
    cursor: pointer;
    user-select: none;
    position: relative;
}
.pt-data-table thead th .th-content-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pt-data-table thead th .th-label-text {
    line-height: 1.3;
}
/* Hoverable tooltip marker on header labels */
.pt-tooltip-marker {
    color: var(--pt-accent-teal);
    font-weight: 700;
    font-size: var(--pt-text-sm);
    margin-left: 2px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.th-label-text[data-tooltip-text] {
    cursor: help;
    transition: color 0.2s ease;
}
.th-label-text[data-tooltip-text]:hover {
    color: var(--pt-text-on-dark-primary);
}
.th-label-text[data-tooltip-text]:hover .pt-tooltip-marker {
    opacity: 1;
}
.pt-data-table thead th .sort-arrow {
    display: flex;
    align-items: center;
    order: -1;
    color: var(--pt-accent-teal);
}


.pt-data-table thead th .pt-sort-icon,
.pt-sticky-table-header thead th .pt-sort-icon {
    visibility: visible;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.pt-data-table thead th:hover .pt-sort-icon,
.pt-sticky-table-header thead th:hover .pt-sort-icon {
    opacity: 0.7;
}

.pt-data-table thead th.sorted .pt-sort-icon,
.pt-sticky-table-header thead th.sorted .pt-sort-icon {
    visibility: visible;
    opacity: 1;
    color: var(--pt-accent-teal);
}

.pt-data-table tbody td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--pt-medium-grey-border);
    color: var(--pt-text-on-dark-primary);
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}
.pt-data-table tbody td.col-product_brand,
.pt-data-table tbody td.col-latest_scrape_seller {
    max-width: 10rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-data-table tbody tr {
    height: 3.5rem;
}
.pt-data-table tbody tr:hover td {
    background-color: var(--pt-darker-blue);
}
.pt-data-table tbody tr:hover td a {
    color: var(--pt-text-on-dark-primary);
}
.pt-data-table tbody tr:last-child td {
    border-bottom: none;
}
.pt-data-table .col-product_title {
    max-width: 18.75rem; /* 300px */
}
.pt-data-table .col-product_title a,
.pt-data-table .col-product_title .pt-inactive-product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.pt-data-table .col-product_title a {
    cursor: pointer;
}
.pt-data-table a {
    color: var(--pt-accent-teal);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.pt-data-table a:hover {
    text-decoration: underline;
}
.pt-product-thumbnail-wrapper {
    width: 3.125rem; /* 50px */
    height: 3.125rem; /* 50px */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--pt-border-radius-small);
    background-color: var(--pt-text-on-dark-primary);
    border: 1px solid var(--pt-medium-grey-border);
    transition: transform 0.2s ease;
}
.pt-product-thumbnail-wrapper:hover {
    transform: scale(1.1);
}
.pt-product-thumbnail {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.pt-product-thumbnail-placeholder {
    width: 3.125rem; /* 50px */
    height: 3.125rem; /* 50px */
    border-radius: var(--pt-border-radius-small);
    background-color: var(--pt-main-background);
    border: 1px solid var(--pt-medium-grey-border);
    display: inline-block;
}
.pt-supplier-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem; /* 6px */
}
.pt-direct-image-search-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem; /* 6px */
    padding: 0.25rem 0.5rem; /* 4px 8px */
    font-size: var(--pt-text-xs);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 0.25rem; /* 4px */
    background-color: var(--pt-surface-color);
    color: var(--pt-text-on-dark-primary);
    line-height: 1.5;
    white-space: nowrap;
}
.pt-direct-image-search-link:hover {
    border-color: var(--pt-accent-teal);
}
.pt-direct-image-search-link .pt-favicon {
    width: var(--pt-icon-size-md);
    height: var(--pt-icon-size-md);
}
.col-product-image,
.col-latest_scrape_delivery,
.col-latest_scrape_reviews,
.col-latest_scrape_rating,
.col-profit_pct,
.col-gs_visits_min,
.col-grey_spot_score,
.col-categorie_a {
    text-align: center;
}
.col-latest_scrape_price,
.col-profit_eur {
    text-align: right;
}
.col-gs_market_price {
    text-align: center;
}

/* Pagination */
.pt-pagination-controls {
    text-align: center;
    margin-top: 1.5625rem; /* 25px */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem; /* 5px */
}
.pt-page-nav {
    background-color: transparent;
    border: 1px solid var(--pt-medium-grey-border);
    color: var(--pt-text-on-dark-primary);
}
.pt-page-nav:hover:not(:disabled) {
    background-color: var(--pt-primary-blue);
    border-color: var(--pt-primary-blue);
}
.pt-page-nav:disabled {
    background-color: var(--pt-main-background);
    color: var(--pt-text-on-dark-secondary);
    border-color: var(--pt-medium-grey-border);
    cursor: not-allowed;
}
.pt-page-nav.active {
    background-color: var(--pt-primary-blue);
    border-color: var(--pt-primary-blue);
    font-weight: 700;
    cursor: default;
}

/* Expanded touch targets for info icons (44x44px minimum per WCAG 2.5.5) */
.pt-kpi-info-icon::before,
.pt-override-info-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.75rem; /* 44px */
    height: 2.75rem; /* 44px */
    min-width: 2.75rem;
    min-height: 2.75rem;
}

/* Tooltips */
.pt-custom-tooltip {
    position: fixed;
    background-color: var(--pt-surface-color);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--pt-text-on-dark-secondary);
    padding: 0.625rem; /* 10px */
    border-radius: var(--pt-border-radius-small);
    border: 1px solid var(--pt-medium-grey-border);
    font-size: var(--pt-text-xs);
    line-height: 1.5;
    max-width: 15.625rem; /* 250px */
    z-index: 10030;
    opacity: 0;
    transform: translateY(0.625rem) scale(0.95); /* 10px */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    pointer-events: none;
    display: none;
    white-space: normal;
}
.pt-custom-tooltip.pt-tooltip-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    display: block;
    pointer-events: none;
}

/* Chart.js Tooltip Customization */
.chartjs-tooltip {
    background-color: var(--pt-surface-color);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--pt-text-on-dark-secondary);
    padding: 0.625rem; /* 10px */
    border-radius: var(--pt-border-radius-small);
    border: 1px solid var(--pt-medium-grey-border);
    font-size: var(--pt-text-xs);
    line-height: 1.5;
    max-width: 15.625rem; /* 250px */
    z-index: 1070;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    white-space: normal;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.chartjs-tooltip.chartjs-tooltip-key-active {
    opacity: 1;
}
.chartjs-tooltip-caret {
    display: none;
}
.chartjs-tooltip-title {
    font-weight: 600;
    margin-bottom: 0.375rem; /* 6px */
    color: var(--pt-text-on-dark-primary);
}
.chartjs-tooltip-key {
    display: inline-block;
    width: 0.625rem; /* 10px */
    height: 0.625rem; /* 10px */
    margin-right: 0.375rem; /* 6px */
    border-radius: 2px;
}

/* Loading Overlay */
/* ============================================
   LOADING OVERLAY - Data Vortex Design
   Fast, high-impact animation optimized for 0.5-1s loading
   ============================================ */
#pt-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(var(--pt-main-background-rgb), 0.95) 0%, rgba(var(--pt-main-background-rgb), 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
    pointer-events: none;
    overflow: hidden;
}
#pt-loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
    pointer-events: auto;
}

.pt-loading-vortex {
    position: relative;
    width: min(90vw, 25rem);
    height: min(90vw, 25rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Orbital Rings - Rotating around logo */
.pt-orbital-rings {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.pt-ring {
    transform-origin: center;
}

#pt-loading-overlay.pt-animation-started .pt-ring-1 {
    animation: pt-ring-rotate-1 2s linear infinite;
}

#pt-loading-overlay.pt-animation-started .pt-ring-2 {
    animation: pt-ring-rotate-2 1.5s linear infinite reverse;
}

#pt-loading-overlay.pt-animation-started .pt-ring-3 {
    animation: pt-ring-rotate-3 2.5s linear infinite;
}

/* Vortex Particles - Spiraling into logo */
.pt-vortex-container {
    display: none;
}

.pt-vortex-particle {
    position: absolute;
    width: 0.375rem; /* 6px */
    height: 0.375rem;
    border-radius: 50%;
    background: var(--pt-accent-teal);
}

#pt-loading-overlay.pt-animation-started .pt-vortex-particle {
    animation: pt-vortex-spiral 1.2s ease-in infinite;
}

/* Position particles around the perimeter */
.pt-vp-1 { left: 50%; top: 5%; animation-delay: 0s !important; }
.pt-vp-2 { left: 80%; top: 15%; animation-delay: 0.1s !important; }
.pt-vp-3 { left: 95%; top: 50%; animation-delay: 0.2s !important; }
.pt-vp-4 { left: 80%; top: 85%; animation-delay: 0.3s !important; }
.pt-vp-5 { left: 50%; top: 95%; animation-delay: 0.4s !important; }
.pt-vp-6 { left: 20%; top: 85%; animation-delay: 0.5s !important; }
.pt-vp-7 { left: 5%; top: 50%; animation-delay: 0.6s !important; }
.pt-vp-8 { left: 20%; top: 15%; animation-delay: 0.7s !important; }
.pt-vp-9 { left: 65%; top: 10%; animation-delay: 0.8s !important; }
.pt-vp-10 { left: 90%; top: 35%; animation-delay: 0.9s !important; }
.pt-vp-11 { left: 65%; top: 90%; animation-delay: 1.0s !important; }
.pt-vp-12 { left: 10%; top: 35%; animation-delay: 1.1s !important; }

/* Logo Container */
.pt-loading-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(5rem, 15vw, 8.75rem);
    height: clamp(5rem, 15vw, 8.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.pt-logo-glow {
    display: none;
}

.pt-loading-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    position: relative;
    z-index: 1;
    display: block;
}

#pt-loading-overlay.pt-animation-started .pt-loading-logo {
    animation: pt-logo-pulse 1.5s ease-in-out infinite;
}

/* Loading Text */
.pt-loading-text {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.pt-dots::after {
    content: '';
    animation: pt-dots-animation 1.5s steps(4, end) infinite;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Ring Rotation - Each ring rotates at different speed/direction */
@keyframes pt-ring-rotate-1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pt-ring-rotate-2 {
    from {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes pt-ring-rotate-3 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Vortex Spiral - Particles spiral from edge to center */
@keyframes pt-vortex-spiral {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(50% - 50vw), calc(50% - 50vh)) scale(0.2) rotate(720deg);
    }
}

/* Logo Pulse - Subtle breathing effect */
@keyframes pt-logo-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.85;
    }
}


/* Dots Animation */
@keyframes pt-dots-animation {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .pt-loading-vortex {
        width: min(85vw, 18.75rem);
        height: min(85vw, 18.75rem);
    }

    .pt-vortex-particle {
        width: 0.3rem; /* 5px */
        height: 0.3rem;
    }

    .pt-loading-text {
        font-size: 0.875rem;
        bottom: 5%;
    }
}
/* RESPONSIVE */
@media (max-width: 992px) {
    html {
        font-size: 16px; /* Reset for mobile */
    }
    #pt-dashboard-layout-wrapper {
        flex-direction: column;
    }
    .pt-sidebar {
        width: 100%;
        padding: 0.625rem; /* 10px */
    }
    .pt-main-content {
        padding: 0.625rem; /* 10px */
        margin-left: 0;
    }
    .pt-charts-section {
        grid-template-columns: 1fr;
    }
}

/* Tablet: KPI grid adapts between desktop and phone */
@media (min-width: 481px) and (max-width: 992px) {
    .pt-kpi-inline-group {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.625rem;
    }
}

/* Small phone adjustments */
@media (max-width: 480px) {
    .pt-sidebar {
        padding: 0.5rem;
    }
    .pt-main-content {
        padding: 0.5rem;
    }
    .pt-section {
        padding: 0.75rem;
        border-radius: var(--pt-border-radius-small);
    }
    .pt-kpi-inline-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .pt-kpi-item {
        padding: 0.625rem;
    }
    #pt-product-modal-panel {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        border-radius: 0;
        border: none;
    }
    .pt-modal-header {
        grid-template-columns: 2.5rem 1fr;
    }
    #pt-modal-product-image-container {
        width: 2.5rem;
        height: 2.5rem;
    }
    .pt-modal-title h2 {
        font-size: 0.9rem;
    }
    .pt-modal-content {
        padding: 0.625rem;
    }
    .pt-modal-tab {
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
    }
    .pt-data-table .col-product_title a {
        max-width: 10rem;
    }
    .pt-filter-accordion-header label span,
    .pt-filter-accordion-header > span:first-child span {
        font-size: 0.85rem;
    }
}

/* Product Detail Modal */
#pt-product-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(var(--pt-main-background-rgb), 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10010; 
    opacity: 0;
    transition: opacity 0.3s ease;
}
#pt-product-modal-overlay.is-visible {
    opacity: 1;
}
#pt-product-modal-panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background-color: var(--pt-surface-color);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: var(--pt-border-radius);
    border: 1px solid var(--pt-medium-grey-border);
    width: 90%;
    max-width: 75rem; /* 1200px */
    height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.5); /* 10px 30px */
    transition: transform 0.3s ease;
    z-index: 10011;
}
#pt-product-modal-overlay.is-visible #pt-product-modal-panel {
    transform: translate(-50%, -50%) scale(1);
}
#pt-modal-product-image-container {
    width: 5rem; /* 80px */
    height: 5rem; /* 80px */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pt-text-on-dark-primary);
    border-radius: var(--pt-border-radius-small);
    border: 1px solid var(--pt-medium-grey-border);
    overflow: hidden;
}
#pt-modal-product-image-lg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--pt-border-radius-small);
    background-color: transparent;
}
.pt-modal-header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.9375rem; /* 15px */
    align-items: center;
    padding: 0.9375rem 1.5625rem; /* 15px 25px */
    border-bottom: 1px solid var(--pt-medium-grey-border);
    flex-shrink: 0;
}
.pt-modal-title h2 {
    margin: 0 0 0.25rem 0; /* 4px */
    font-size: var(--pt-text-xl);
    font-weight: 600;
    color: var(--pt-text-on-dark-primary);
    word-break: break-all;
}
.pt-modal-title span {
    font-size: var(--pt-text-base);
    color: var(--pt-text-on-dark-secondary);
}
.pt-modal-category-path {
    font-size: var(--pt-text-sm);
    color: var(--pt-text-on-dark-secondary);
    margin-top: 0.3125rem; /* 5px */
    margin-bottom: 0.3125rem; /* 5px */
    font-style: italic;
}
.pt-modal-ean-container {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    font-size: var(--pt-text-base);
    color: var(--pt-text-on-dark-secondary);
}
#pt-modal-copy-ean-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* 8px */
    padding: 0.375rem 0.75rem; /* 6px 12px */
    font-size: var(--pt-text-sm);
    font-weight: 500;
    border-radius: var(--pt-border-radius-small);
    border: 1px solid var(--pt-accent-teal);
    background-color: var(--pt-accent-teal);
    color: var(--pt-main-background);
    text-decoration: none;
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out);
}
#pt-modal-copy-ean-btn:hover {
    background-color: var(--pt-accent-teal-hover); /* darker teal hover variant */
    border-color: var(--pt-accent-teal-hover); /* darker teal hover variant */
    color: var(--pt-main-background);
}
#pt-modal-copy-ean-btn.is-copied {
    background-color: var(--pt-accent-teal);
    border-color: var(--pt-accent-teal);
    color: var(--pt-main-background);
}
#pt-modal-copy-ean-btn svg.lucide {
    width: 1em;
    height: 1em;
}
#pt-modal-close-btn {
    background-color: transparent;
    border: 1px solid var(--pt-medium-grey-border);
    color: var(--pt-text-on-dark-secondary);
    cursor: pointer;
    padding: 0.375rem 0.75rem; /* 6px 12px */
    border-radius: var(--pt-border-radius-small);
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out), color var(--pt-duration-normal) var(--pt-ease-out);
}
#pt-modal-close-btn:hover {
    background-color: var(--pt-accent-teal);
    border-color: var(--pt-accent-teal);
    color: var(--pt-main-background);
}
#pt-modal-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem; /* 10px - tighter spacing for vertical layout */
    padding: 0.75rem; /* 12px */
    background: rgba(var(--pt-surface-color-rgb), 0.4);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
}
.pt-supplier-matcher-label {
    font-size: var(--pt-text-base);
    color: var(--pt-text-on-dark-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    white-space: nowrap;
}
.pt-supplier-matcher-label svg.lucide {
    color: var(--pt-accent-teal);
}
.pt-supplier-buttons-group {
    display: flex;
    gap: 0.625rem; /* 10px */
    flex-shrink: 0;
}
.pt-modal-supplier-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    padding: 0.375rem 0.75rem; /* 6px 12px */
    font-size: var(--pt-text-sm);
    font-weight: 500;
    border-radius: var(--pt-border-radius-small);
    border: 1px solid var(--pt-medium-grey-border);
    background-color: var(--pt-main-background);
    color: var(--pt-text-on-dark-secondary);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.pt-modal-supplier-btn:hover {
    border-color: var(--pt-primary-blue);
    color: var(--pt-text-on-dark-primary);
}   
.pt-modal-supplier-btn img {
    width: var(--pt-icon-size-md);
    height: var(--pt-icon-size-md);
}
.pt-modal-content {
    flex: 1 1 0;
    min-height: 0;
    padding: 1.25rem; /* 20px */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px — compact to avoid scroll */
    overflow-y: auto;
    position: relative;
}

.pt-modal-loader {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(var(--pt-surface-color-rgb), 0.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.pt-modal-loader.is-loading {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.pt-modal-loader .pt-loader-inline {
    width: 1.875rem; /* 30px */
    height: 1.875rem; /* 30px */
    border-width: 3px;
    border-top-color: var(--pt-accent-teal);
    display: block;
}
#pt-modal-kpi-container {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px — compact spacing */
    flex-shrink: 1;
}
.pt-modal-kpi-group-header {
    font-size: var(--pt-text-xs);
    font-weight: 600;
    color: var(--pt-text-on-dark-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.375rem 0; /* 6px */
    padding-bottom: 0.25rem; /* 4px */
    border-bottom: 1px solid var(--pt-medium-grey-border);
}
/* Grey Spot island section */
.pt-kpi-group-island {
    background: rgba(var(--pt-accent-teal-rgb), 0.04);
    border: 1px solid rgba(var(--pt-accent-teal-rgb), 0.15);
    border-radius: var(--pt-border-radius-small);
    padding: 0.5rem 0.625rem; /* 8px 10px */
}
.pt-kpi-group-island .pt-modal-kpi-group-header {
    border-bottom-color: rgba(var(--pt-accent-teal-rgb), 0.2);
    display: flex;
    align-items: center;
    gap: 0.375rem; /* 6px */
}
.pt-kpi-group-island .pt-modal-kpi-group-header .lucide {
    width: 0.875rem; /* 14px */
    height: 0.875rem; /* 14px */
    color: var(--pt-accent-teal);
}
.pt-modal-kpi-group-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); /* 150px */
    gap: 0.5rem; /* 8px */
}
.pt-modal-kpi-item {
    background-color: var(--pt-main-background);
    padding: 0.5rem; /* 8px */
    border-radius: var(--pt-border-radius-small);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 3.75rem; /* 60px */
    position: relative;
    border: 2px solid transparent;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.pt-kpi-main-content {
    flex-grow: 1;
}
.pt-kpi-sparkline-container {
    height: 1.875rem; /* 30px */
    margin-top: 0.625rem; /* 10px */
    width: 100%;
}
.pt-kpi-sparkline-canvas {
    width: 100% !important;
    height: 100% !important;
}
.pt-modal-kpi-item.is-clickable {
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(var(--pt-accent-teal-rgb), 0.3); /* Subtle teal border, matches base 2px */
}
.pt-modal-kpi-item.is-clickable:hover {
    transform: scale(1.03);
    background-color: var(--pt-darker-surface);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: rgba(var(--pt-accent-teal-rgb), 1); /* Full opacity teal border on hover */
}
.pt-kpi-chart-icon {
    position: absolute;
    top: 0.5rem; /* 8px */
    right: 0.5rem; /* 8px */
    color: var(--pt-accent-teal);
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
    width: var(--pt-icon-size-md);
    height: var(--pt-icon-size-md);
}
.pt-modal-kpi-item.is-clickable:hover .pt-kpi-chart-icon {
    opacity: 0.9;
}
.pt-modal-kpi-item.is-active .pt-kpi-chart-icon {
    opacity: 1;
    color: var(--pt-accent-teal);
}
.pt-modal-kpi-item.is-active {
    border-width: 2px;
    border-style: solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow for active state */
}
.pt-modal-kpi-item.is-active.border-color-price { border-color: var(--pt-accent-teal); }
.pt-modal-kpi-item.is-active.border-color-market_price { border-color: var(--pt-chart-purple); }
.pt-modal-kpi-item.is-active.border-color-marge_eur { border-color: var(--pt-chart-purple-deep); }
.pt-modal-kpi-item.is-active.border-color-marge_pct { border-color: var(--pt-chart-yellow); }
.pt-modal-kpi-item.is-active.border-color-rating { border-color: var(--pt-chart-red); }
.pt-modal-kpi-item.is-active.border-color-reviews { border-color: var(--pt-chart-orange); }
.pt-modal-kpi-item.is-active.border-color-productVisits { border-color: var(--pt-chart-blue); }
.pt-modal-kpi-item.is-active.border-color-delivery { border-color: var(--pt-chart-green); }
.pt-modal-kpi-item .kpi-title-inline > .lucide:not(.pt-kpi-info-icon),
.pt-metric-toggle:not(.is-active) .lucide {
    color: var(--pt-accent-teal);
}
.pt-modal-kpi-item .kpi-title-inline {
    font-size: var(--pt-text-sm);
    font-weight: 500; 
    margin: 0 0 0.25rem 0; /* 4px */
}
.pt-modal-kpi-item .kpi-value-inline {
    font-size: var(--pt-text-xl);
}
.pt-modal-chart-container {
    flex: 1 1 auto;
    min-height: 18.75rem; /* 300px — keep chart visible on small screens */
    position: relative;
    padding-top: 2.25rem; /* 36px - space for toolbar */
    border-radius: var(--pt-border-radius-small);
    overflow: hidden;
}
.pt-modal-chart-container canvas {
    position: relative;
    z-index: 1;
}

/* Image Lightbox */
#pt-image-lightbox-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(var(--pt-main-background-rgb), 0.9); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    z-index: 10020;
    opacity: 0;
    visibility: hidden; 
    pointer-events: none; 
    transition: opacity 0.3s ease-in-out; 
}
#pt-image-lightbox-overlay.is-visible {
    opacity: 1;
    visibility: visible; 
    pointer-events: auto; 
    transition-delay: 0s; 
}
#pt-lightbox-image {
    position: fixed; 
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8); 
    display: block;
    max-width: 90vw;  
    max-height: 90vh; 
    object-fit: contain;
    border-radius: var(--pt-border-radius-small);
    box-shadow: 0 0.625rem 2.5rem rgba(0,0,0,0.5); /* 10px 40px */
    transition: transform 0.3s ease-in-out; 
}
#pt-image-lightbox-overlay.is-visible #pt-lightbox-image {
    transform: translate(-50%, -50%) scale(1); 
}
#pt-lightbox-close-btn {
    position: absolute; 
    top: -9999px; left: -9999px; 
    background: rgba(var(--pt-primary-blue-rgb), 0.4);
    border: 1px solid rgba(var(--pt-primary-blue-rgb), 0.6);
    color: var(--pt-text-on-dark-primary);
    cursor: pointer;
    padding: 0; 
    border-radius: 50%;
    width: 2rem;  /* 32px */
    height: 2rem; /* 32px */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
    z-index: 10021; 
    opacity: 0; 
}
#pt-image-lightbox-overlay.is-visible #pt-lightbox-close-btn {
    opacity: 1;
}
#pt-lightbox-close-btn:hover {
    background-color: rgba(var(--pt-primary-blue-rgb), 0.8);
    border-color: rgba(var(--pt-primary-blue-rgb), 1);
}
.pt-sidebar-category-list li.pt-list-loader {
    justify-content: center;
    padding: 0.9375rem; /* 15px */
    cursor: default;
    border-bottom: none;
}
.pt-sidebar-category-list li.pt-list-loader:hover {
    background-color: transparent;
}
.pt-sidebar-category-list li.pt-list-loader .pt-loader-inline {
    display: block;
}

/* Elementor transform adjustments */
.elementor-widget.e-transform,
.elementor-section.e-transform,
.elementor-container.e-transform,
.elementor-widget-wrap.e-transform {
    transform: none !important;
}

/* Sticky Table Header */
.pt-sticky-table-header {
    position: fixed;
    z-index: 10000;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.05s ease-out, transform 0.05s ease-out;
    pointer-events: none;
}
.pt-sticky-table-header.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.pt-sticky-table-inner {
    will-change: transform;
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent !important;
}
.pt-sticky-table-header thead {
    box-sizing: content-box;
}
.pt-sticky-table-header thead th {
    background-color: transparent;
    color: var(--pt-text-on-dark-secondary);
    padding: 0.75rem 0.625rem; /* 12px 10px */
    text-align: left;
    font-weight: 500;
    border-bottom: none;
    white-space: nowrap;
    user-select: none;
    position: relative;
}
.pt-sticky-table-header thead th .th-content-wrapper {
    display: flex;
    align-items: center;
    gap: 0.375rem; /* 6px */
}
.pt-sticky-table-header thead th .th-label-text {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1.25rem; /* 20px */
}
.pt-sticky-table-header thead th .sort-arrow {
    display: flex;
    align-items: center;
    order: -1;
    color: var(--pt-accent-teal);
}
.pt-sticky-table-header thead th .pt-sort-icon {
    visibility: hidden;
}
.pt-sticky-table-header thead th.sorted .pt-sort-icon {
    visibility: visible;
}

/* TRADINGVIEW-STYLE CHART TOOLBAR */
.pt-chart-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.625rem; /* 6px 10px */
    background-color: rgba(var(--pt-main-background-rgb), 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--pt-medium-grey-border);
}
.pt-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0;
}
.pt-toolbar-time-range {
    display: flex;
    gap: 0.125rem; /* 2px */
}
.pt-toolbar-separator {
    width: 1px;
    height: 1.25rem; /* 20px */
    background-color: var(--pt-medium-grey-border);
    margin-left: 0.5rem; /* 8px */
}
.pt-time-range-btn {
    background-color: transparent;
    border: none;
    color: var(--pt-text-on-dark-secondary);
    padding: 0.25rem 0.5rem; /* 4px 8px */
    border-radius: 0.25rem; /* 4px */
    font-size: var(--pt-text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    letter-spacing: 0.01em;
    font-family: inherit;
    line-height: 1;
    position: relative;
}
.pt-time-range-btn:hover {
    color: var(--pt-text-on-dark-primary);
    background-color: rgba(255, 255, 255, 0.06);
}
.pt-time-range-btn.active {
    color: var(--pt-accent-teal);
    background-color: rgba(var(--pt-accent-teal-rgb), 0.1);
    cursor: default;
}
.pt-time-range-btn.active:hover {
    color: var(--pt-accent-teal);
}

/* Toolbar inline toggle */
.pt-toolbar-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    cursor: pointer;
    user-select: none;
    font-size: var(--pt-text-xs);
    color: var(--pt-text-on-dark-secondary);
    font-weight: 400;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.pt-toolbar-toggle:hover {
    color: var(--pt-text-on-dark-primary);
}
/* iOS-style toggle switch */
.pt-toggle-switch {
    position: relative;
    display: inline-block;
    width: 2.25rem; /* 36px - larger for touch */
    height: 1.25rem; /* 20px - larger for touch */
    flex-shrink: 0;
}
.pt-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.pt-toggle-switch input:focus-visible + .pt-toggle-slider {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: 2px;
}
.pt-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 1rem; /* pill */
    transition: background-color 0.2s ease;
    cursor: pointer;
}
.pt-toggle-slider::before {
    content: "";
    position: absolute;
    height: 0.875rem; /* 14px - scaled with larger switch */
    width: 0.875rem; /* 14px */
    left: 0.1875rem; /* 3px */
    bottom: 0.1875rem; /* 3px */
    background-color: var(--pt-text-on-dark-secondary);
    border-radius: 50%;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.pt-toggle-switch input:checked + .pt-toggle-slider {
    background-color: rgba(var(--pt-accent-teal-rgb), 0.3);
}
.pt-toggle-switch input:checked + .pt-toggle-slider::before {
    transform: translateX(1rem); /* 16px - matches wider switch */
    background-color: var(--pt-accent-teal);
}

.pt-modal-chart-container.is-loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}
.pt-modal-chart-container.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.875rem; /* 30px */
    height: 1.875rem; /* 30px */
    margin: -0.9375rem 0 0 -0.9375rem; /* -15px */
    border: 3px solid var(--pt-overlay-lg);
    border-top-color: var(--pt-accent-teal);
    border-radius: 50%;
    animation: pt-spin 1s linear infinite;
}
.pt-history-no-data-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 12.5rem; /* 200px */
    color: var(--pt-text-on-dark-muted);
    font-style: italic;
}

/* Section Toggler */
.pt-section-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.625rem 1.5625rem; /* 10px 25px */
    background-color: rgba(var(--pt-primary-blue-rgb), 0.1);
    color: var(--pt-text-on-dark-primary);
    border: 1px solid var(--pt-medium-grey-border);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border-radius: var(--pt-border-radius);
    margin: -1.5625rem -1.5625rem 1.5625rem -1.5625rem; /* -25px -25px 25px -25px */
}
.pt-section-toggle-header:hover {
    background-color: rgba(var(--pt-primary-blue-rgb), 0.2);
    border-color: rgba(var(--pt-primary-blue-rgb), 0.4);
}
.pt-section-toggle-header h3 {
    margin: 0;
    font-size: var(--pt-text-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
}
.pt-section-toggle-header .pt-toggle-section-icon {
    color: var(--pt-accent-teal);
}
.pt-section-toggle-header .pt-accordion-toggle-icon {
    transition: transform 0.3s ease-in-out;
}
.pt-section-toggle-header[aria-expanded="true"] .pt-accordion-toggle-icon {
    transform: rotate(180deg);
}

/* FINAL JAVASCRIPT-CONTROLLED ANIMATION LOGIC */
#pt-charts-section-wrapper {
    overflow: visible; /* Allow doughnut segments to fly out without clipping */
    max-height: 75rem; /* 1200px */
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#pt-charts-section-wrapper .pt-charts-section {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}
#pt-charts-section-container.is-collapsed #pt-charts-section-wrapper {
    max-height: 0;
}
#pt-charts-section-container.is-collapsed #pt-charts-section-wrapper .pt-charts-section {
    opacity: 0;
    visibility: hidden;
}
#pt-charts-section-container.is-collapsed .pt-section-toggle-header {
    margin-bottom: -1.5625rem; /* -25px */
}

/* Custom Legend Checkbox */
.pt-legend-checkbox {
    width: 0.875rem; /* 14px */
    height: 0.875rem; /* 14px */
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--pt-main-background);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pt-legend-checkbox::before {
    content: '✓';
    font-weight: 700;
    font-size: var(--pt-text-xs);
    color: transparent;
    transition: color 0.15s ease;
    line-height: 1;
}
.pt-custom-legend-item:hover .pt-legend-checkbox:not(.is-checked) {
    border-color: var(--pt-accent-teal);
}
.pt-legend-checkbox.is-checked {
    background-color: var(--pt-accent-teal);
    border-color: var(--pt-accent-teal);
}
.pt-legend-checkbox.is-checked::before {
    color: var(--pt-main-background);
}
#pt-sticky-header-bg {
    position: fixed;
    z-index: 9999;
    background-color: var(--pt-surface-color);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.05s ease-out, transform 0.05s ease-out;
    pointer-events: none;
    border-bottom: 1px solid var(--pt-medium-grey-border);
}
#pt-sticky-header-bg.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Tutorial Mode (Shepherd.js) */
/* Tour interaction blocker - JavaScript handles click blocking via event capture */
.pt-tour-interaction-blocker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998; /* Between modal overlay (9997) and tour popup (9999) */
    pointer-events: none; /* Don't block via CSS - JavaScript handles this */
    background-color: transparent;
}

/* Make sure highlighted element is visually above other elements */
.shepherd-highlight,
.shepherd-target {
    z-index: 9999 !important;
    /* Don't override position - let elements keep their original positioning */
}

/* Always allow interaction with tour popup itself */
.shepherd-element.pt-tutorial-popup {
    background-color: var(--pt-darker-surface);
    border: 2px solid var(--pt-accent-teal);
    border-radius: var(--pt-border-radius-small);
    filter: drop-shadow(0 0.625rem 1.25rem rgba(0,0,0,0.4)); /* 10px 20px */
    max-width: 25rem; /* 400px */
    z-index: 10100;
    pointer-events: all !important;
    margin: 0.9375rem; /* 15px */
}
/* Arrow styling - keep it simple, just override the color */
.shepherd-element.pt-tutorial-popup .shepherd-arrow::before {
    background-color: var(--pt-darker-surface) !important;
}
.shepherd-element.pt-tutorial-popup .shepherd-header {
    background-color: rgba(var(--pt-primary-blue-rgb), 0.2);
    padding: 0.625rem 2.8125rem 0.625rem 0.9375rem; /* 10px 45px 10px 15px */
    position: relative;
}
.shepherd-element.pt-tutorial-popup .shepherd-title {
    color: var(--pt-text-on-dark-primary);
    font-weight: 600;
    font-size: var(--pt-text-lg);
}
.shepherd-element.pt-tutorial-popup .shepherd-cancel-icon {
    position: absolute;
    top: 50%;
    margin-top: -16px; /* Half of 32px height for vertical centering */
    right: 0.75rem; /* 12px */
    background: none;
    border: none;
    color: var(--pt-text-on-dark-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.shepherd-element.pt-tutorial-popup .shepherd-cancel-icon:hover {
    background-color: var(--pt-accent-teal);
    color: var(--pt-main-background);
}
.shepherd-element.pt-tutorial-popup .shepherd-cancel-icon svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}
.shepherd-element.pt-tutorial-popup .shepherd-cancel-icon:hover svg {
    transform: rotate(90deg);
}
.shepherd-element.pt-tutorial-popup .shepherd-text {
    color: var(--pt-text-on-dark-secondary);
    padding: 0.9375rem; /* 15px */
    font-size: var(--pt-text-base);
    line-height: 1.6;
}
.shepherd-element.pt-tutorial-popup .shepherd-button {
    background-color: var(--pt-primary-blue);
    color: var(--pt-text-on-dark-primary);
    border-radius: var(--pt-border-radius-small);
    padding: 0.5rem 1rem; /* 8px 16px */
    font-weight: 500;
    transition: background-color 0.2s ease;
    margin-right: 0.5rem; /* 8px */
    border: none;
}
.shepherd-element.pt-tutorial-popup .shepherd-button:hover {
    background-color: var(--pt-darker-blue);
}
.shepherd-element.pt-tutorial-popup .shepherd-button.shepherd-button-secondary {
    background-color: transparent;
    color: var(--pt-text-on-dark-secondary);
    border: 1px solid var(--pt-medium-grey-border);
}
.shepherd-element.pt-tutorial-popup .shepherd-button.shepherd-button-secondary:hover {
    background-color: var(--pt-overlay-sm);
    color: var(--pt-text-on-dark-primary);
}
.shepherd-element.pt-tutorial-popup .shepherd-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.shepherd-element.pt-tutorial-popup .shepherd-button:disabled:hover {
    background-color: var(--pt-primary-blue);
}
.shepherd-element.pt-tutorial-popup .shepherd-button.shepherd-button-secondary:disabled:hover {
    background-color: transparent;
}

/* Restart Tutorial Button */
/* Favorites Feature Styles */
#pt-toggle-favorites-btn {
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--pt-accent-gold);
    color: var(--pt-accent-gold);
    font-weight: 500;
}
#pt-toggle-favorites-btn:hover {
    background-color: var(--pt-accent-gold);
    color: var(--pt-main-background);
    box-shadow: 0 0.25rem 0.9375rem rgba(var(--pt-accent-gold-rgb), 0.3); /* 4px 15px */
}
#pt-main-filters-wrapper.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.pt-favorite-star {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pt-text-on-dark-secondary);
    padding: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.2s;
}
.pt-favorite-star:hover {
    color: var(--pt-accent-gold);
    transform: scale(1.2);
}
.pt-favorite-star.is-favorite {
    color: var(--pt-accent-gold);
}
.pt-favorite-star.is-favorite .lucide-star {
    fill: var(--pt-accent-gold);
}
/* Tablet landscape & mobile landscape: side-by-side layout */
@media (max-width: 992px) and (orientation: landscape) {
    #pt-dashboard-layout-wrapper {
        flex-direction: row !important;
    }
    .pt-sidebar {
        width: 18rem !important;
        flex-shrink: 0;
        position: relative !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
    }
    .pt-main-content {
        margin-left: 0 !important;
        flex-grow: 1;
        min-width: 0;
    }
}

/* Mobile Optimizations */
@media (max-width: 992px) {
    .pt-data-table thead th,
    .pt-sticky-table-header thead th {
        padding-top: 0.375rem !important; /* 6px */
        padding-bottom: 0.375rem !important; /* 6px */
        font-size: 0.8em !important;
    }
    .pt-data-table thead tr:nth-child(2) th,
    .pt-sticky-table-header thead tr:nth-child(2) th {
        padding-top: 0.25rem !important; /* 4px */
        padding-bottom: 0.25rem !important; /* 4px */
    }
    #pt-product-modal-panel {
        width: calc(100% - 1.25rem); /* 20px */
        height: calc(100vh - 1.25rem); /* 20px */
    }
    .pt-modal-header {
        position: relative;
        padding: 0.9375rem 2.8125rem 0.9375rem 0.9375rem; /* 15px 45px 15px 15px */
        grid-template-columns: 3.75rem 1fr; /* 60px */
        grid-template-rows: auto auto;
        gap: 0.3125rem 0.9375rem; /* 5px 15px */
        align-items: center;
    }
    #pt-modal-product-image-container {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 3.75rem; /* 60px */
        height: 3.75rem; /* 60px */
        align-self: center;
    }
    .pt-modal-title {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }
    .pt-modal-title h2 {
        font-size: 1rem;
        line-height: 1.3;
        margin: 0;
    }
    .pt-modal-category-path,
    .pt-modal-ean-container {
        font-size: 0.8rem;
    }
    #pt-modal-header-actions {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        flex-wrap: wrap;
        gap: 0.5rem; /* 8px */
        padding: 0.5rem; /* 8px - smaller padding on mobile */
    }
    .pt-supplier-matcher-label,
    .pt-modal-supplier-btn {
        font-size: 0.8em;
        padding: 0.25rem 0.5rem; /* 4px 8px */
    }
    #pt-modal-close-btn {
        position: absolute;
        top: 0.625rem; /* 10px */
        right: 0.625rem; /* 10px */
        width: 2rem; /* 32px */
        height: 2rem; /* 32px */
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pt-modal-content {
        padding: 0.9375rem; /* 15px */
    }
    .pt-modal-kpi-group-content {
        grid-template-columns: repeat(auto-fit, minmax(8.125rem, 1fr)); /* 130px */
        gap: 0.625rem; /* 10px */
    }
    .pt-modal-kpi-item .kpi-value-inline {
        font-size: 1.4rem;
    }
    .pt-modal-chart-container {
        min-height: 15rem; /* 240px — usable chart on mobile */
    }
    .pt-data-table tbody td {
        padding: 0.5rem 0.625rem; /* 8px 10px */
        font-size: 0.85em;
        vertical-align: middle;
    }
    .pt-product-thumbnail-wrapper,
    .pt-product-thumbnail-placeholder {
        width: 2.5rem; /* 40px */
        height: 2.5rem; /* 40px */
    }
    .pt-data-table .col-product_title a {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 17.5rem; /* 280px */
    }
}

/* MODAL IMPROVEMENTS */
#pt-modal-main-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9375rem; /* 15px */
}

#pt-modal-header-actions {
    order: 1; /* Supplier search box on left */
}

#pt-modal-favorite-btn {
    order: 2; /* Favorite button on right */
}
#pt-modal-close-btn {
    justify-self: end;
}
.pt-modal-favorite-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    padding: 0.5rem 0.875rem; /* 8px 14px */
    font-size: var(--pt-text-base);
    font-weight: 500;
    border-radius: var(--pt-border-radius-small);
    border: 1px solid var(--pt-medium-grey-border);
    background-color: transparent;
    color: var(--pt-text-on-dark-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out), color var(--pt-duration-normal) var(--pt-ease-out), filter var(--pt-duration-normal) var(--pt-ease-out);
    white-space: nowrap;
}
.pt-modal-favorite-button:not(.is-favorite):hover {
    border-color: var(--pt-accent-gold);
    color: var(--pt-accent-gold);
}
.pt-modal-favorite-button.is-favorite {
    background-color: var(--pt-accent-gold);
    border-color: var(--pt-accent-gold);
    color: var(--pt-main-background);
    font-weight: 600;
}
.pt-modal-favorite-button.is-favorite .lucide-star {
    fill: var(--pt-main-background);
    color: var(--pt-main-background);
}
.pt-modal-favorite-button.is-favorite:hover {
    filter: brightness(1.1);
    color: var(--pt-main-background);
}
@media (max-width: 992px) {
    #pt-modal-main-actions {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
        width: 100%;
        gap: 0.625rem; /* 10px */
        justify-self: start;
        flex-wrap: wrap;
        display: flex;
        align-items: center;
    }
    #pt-modal-close-btn {
        width: 2.75rem; /* 44px */
        height: 2.75rem; /* 44px */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* FAVORITES MODE v3 */
#pt-toggle-favorites-btn.active {
    background-color: var(--pt-accent-gold);
    border-color: var(--pt-accent-gold);
    color: var(--pt-main-background);
    font-weight: 600;
}
#pt-toggle-favorites-btn.active .lucide-star {
    fill: var(--pt-main-background);
}
#pt-toggle-favorites-btn.active:hover {
    filter: brightness(1.1);
    color: var(--pt-main-background);
}
body.pt-favorites-view-active .pt-section,
body.pt-favorites-view-active .pt-chart-container-wrapper,
body.pt-favorites-view-active .pt-sidebar-card {
    border-color: var(--pt-accent-gold);
    transition: border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
body.pt-favorites-view-active .pt-section:hover,
body.pt-favorites-view-active .pt-chart-container-wrapper:hover,
body.pt-favorites-view-active .pt-sidebar-card:hover {
    border-color: var(--pt-accent-gold);
    box-shadow: 0 0.9375rem 1.875rem rgba(var(--pt-accent-gold-rgb), 0.1); /* 15px 30px */
}
.pt-kpi-item.pt-kpi-favorite-active {
    border-color: var(--pt-accent-gold);
}

#pt-restart-tutorial-btn.is-tour-active {
    background-color: var(--pt-danger);
    border-color: var(--pt-danger);
    color: var(--pt-text-on-dark-primary);
}
#pt-restart-tutorial-btn.is-tour-active:hover {
    background-color: var(--pt-danger-active);
    border-color: var(--pt-danger-active);
    color: var(--pt-text-on-dark-primary);
}
.pt-category-drilldown-btn {
    margin-left: auto;
    padding: 0.25rem; /* 4px */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.375rem; /* 6px */
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.pt-category-drilldown-btn .lucide-chevron-right {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    color: var(--pt-text-on-dark-secondary);
    transition: color 0.2s ease;
}
.pt-sidebar-category-list li:hover .pt-category-drilldown-btn {
    background-color: var(--pt-primary-blue);
}
.pt-sidebar-category-list li:hover .pt-category-drilldown-btn .lucide-chevron-right {
    color: var(--pt-text-on-dark-primary);
}

/* Centered message and refined error banner styles */

/* A helper class to turn the main layout wrapper into a centering container. */
.pt-layout-centered-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 1rem;
    box-sizing: border-box;
    margin-left: 0 !important; /* Override sidebar margin */
}

/* Defines the visual style for all global error banners. */
.pt-global-error-banner {
    background-color: rgba(var(--pt-danger-rgb), 0.2); /* A softer red background */
    color: var(--pt-danger-muted); /* A lighter red text for readability */
    border: 1px solid rgba(var(--pt-danger-rgb), 0.5); /* Red border */
    padding: 1rem 1.5rem;
    border-radius: var(--pt-border-radius-small);
    text-align: center;
    max-width: 35rem; /* 560px */
}

/* Style for links inside any error banner. */
.pt-global-error-banner a {
    color: var(--pt-accent-teal);
    font-weight: 500;
    text-decoration: underline;
}

/* End centered message and error banner styles */

/* Error banner icon styles */

.pt-global-error-banner {
    display: flex; /* Use flexbox for easy alignment */
    align-items: center; /* Vertically align icon and text */
    gap: 1rem; /* Space between icon and text */
    text-align: left; /* Align text to the left now that it's next to an icon */
}

.pt-global-error-banner .lucide-alert-triangle {
    flex-shrink: 0; /* Prevent the icon from shrinking */
    width: 1.5rem;  /* 24px */
    height: 1.5rem; /* 24px */
    color: var(--pt-danger); /* Match the error color */
}

.pt-global-error-banner .pt-error-details {
    font-size: var(--pt-text-sm);
    display: block;
    opacity: 0.8;
    margin-top: 0.25rem;
}

.pt-global-error-banner .pt-global-error-close {
    background: none;
    border: none;
    color: var(--pt-text-on-dark-primary);
    font-size: var(--pt-text-2xl);
    cursor: pointer;
    margin-left: auto; /* Push the close button to the far right */
    padding: 0 0.5rem;
    line-height: 1;
}

/* End error banner icon styles */

/* Generic modal styles */

/* The full-screen overlay and centering container */
.pt-modal-overlay-generic {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(var(--pt-main-background-rgb), 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.pt-modal-overlay-generic.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* The modal panel itself */
.pt-modal-panel-generic {
    position: relative;
    background-color: var(--pt-darker-surface);
    border-radius: var(--pt-border-radius);
    border: 1px solid var(--pt-medium-grey-border);
    width: 100%;
    max-width: 34.375rem; /* 550px */
    display: flex;
    flex-direction: column;
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.5); /* 10px 30px */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.pt-modal-overlay-generic.is-visible .pt-modal-panel-generic {
    transform: scale(1);
}

/* The modal header */
.pt-modal-header-generic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--pt-medium-grey-border);
    flex-shrink: 0;
}

.pt-modal-title-generic {
    font-size: var(--pt-text-xl);
    font-weight: 600;
    color: var(--pt-text-on-dark-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pt-modal-close-btn-generic {
    background: none;
    border: none;
    color: var(--pt-text-on-dark-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pt-modal-close-btn-generic:hover {
    background-color: var(--pt-surface-color);
    color: var(--pt-text-on-dark-primary);
}

/* The modal content and form */
.pt-modal-content-generic {
    padding: 1.5rem;
    flex-grow: 1;
}

.pt-modal-description-generic {
    font-size: var(--pt-text-base);
    color: var(--pt-text-on-dark-secondary);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

#pt-feedback-form textarea {
    width: 100%;
    height: 10rem;
    padding: 0.75rem;
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
    background-color: var(--pt-main-background);
    color: var(--pt-text-on-dark-primary);
    font-family: inherit;
    font-size: var(--pt-text-md);
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 1rem;
}

#pt-feedback-form textarea:focus {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: -2px;
    border-color: var(--pt-accent-teal);
    box-shadow: 0 0 0 3px rgba(var(--pt-accent-teal-rgb), 0.2);
}

#pt-feedback-form #pt-feedback-send-btn {
    width: 100%;
    background-color: var(--pt-primary-blue);
    border-color: var(--pt-primary-blue);
    font-weight: 600;
}

#pt-feedback-message-area {
    padding: 0.75rem 1rem;
    border-radius: var(--pt-border-radius-small);
    margin-bottom: 1rem;
    font-weight: 500;
    display: none;
}

#pt-feedback-message-area.success {
    background-color: rgba(var(--pt-accent-teal-rgb), 0.1);
    border: 1px solid rgba(var(--pt-accent-teal-rgb), 0.3);
    color: var(--pt-accent-teal);
}

#pt-feedback-message-area.error {
    background-color: rgba(var(--pt-danger-rgb), 0.1);
    border: 1px solid rgba(var(--pt-danger-rgb), 0.3);
    color: var(--pt-danger);
}

/* End generic modal styles */

/* Product modal KPI icon layout */

/* 1. Ensure the clickable KPI item is a positioning container. */
.pt-modal-kpi-item.is-clickable {
    position: relative;
}

/* 2. Position the info icon in the top right corner as intended. */
.pt-modal-kpi-item .kpi-title-inline .pt-kpi-info-icon {
    position: absolute;
    top: 0.625rem; /* 10px */
    right: 0.625rem; /* 10px */
    z-index: 2; /* Ensure it's on top */
}

/* 3. Position the chart icon to the LEFT of the info icon. */
.pt-modal-kpi-item .pt-kpi-chart-icon {
    position: absolute;
    top: 0.625rem; /* 10px */
    right: 2rem; /* 32px - Pushes it to the left of the info icon */
    z-index: 1;
}

/* Custom Arrow Implementation */
.shepherd-element.pt-tutorial-popup .shepherd-arrow,
.shepherd-element.pt-tutorial-popup .shepherd-arrow::before {
    position: absolute;
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    background: var(--pt-darker-surface);
}

.shepherd-element.pt-tutorial-popup .shepherd-arrow {
    width: 1rem;
    height: 1rem;
}

.shepherd-element.pt-tutorial-popup .shepherd-arrow::before {
    content: '';
    transform: rotate(45deg);
    border: 2px solid var(--pt-accent-teal);
}

/* Popper is BELOW target, arrow points UP */
.shepherd-element.pt-tutorial-popup[data-popper-placement^='bottom'] > .shepherd-arrow {
    top: -0.55rem;
}
.shepherd-element.pt-tutorial-popup[data-popper-placement^='bottom'] > .shepherd-arrow::before {
    border-bottom: none;
    border-right: none;
}

/* Popper is ABOVE target, arrow points DOWN */
.shepherd-element.pt-tutorial-popup[data-popper-placement^='top'] > .shepherd-arrow {
    bottom: -0.55rem; /* Half size + half border */
}
.shepherd-element.pt-tutorial-popup[data-popper-placement^='top'] > .shepherd-arrow::before {
    border-top: none;
    border-left: none;
}

/* Popper is to the LEFT of target, arrow points RIGHT */
.shepherd-element.pt-tutorial-popup[data-popper-placement^='left'] > .shepherd-arrow {
    right: -0.55rem;
}
.shepherd-element.pt-tutorial-popup[data-popper-placement^='left'] > .shepherd-arrow::before {
    border-bottom: none;
    border-left: none;
}

/* Popper is to the RIGHT of target, arrow points LEFT */
.shepherd-element.pt-tutorial-popup[data-popper-placement^='right'] > .shepherd-arrow {
    left: -0.55rem;
}
.shepherd-element.pt-tutorial-popup[data-popper-placement^='right'] > .shepherd-arrow::before {
    border-top: none;
    border-right: none;
}

/* Base popup content styles */
.shepherd-element.pt-tutorial-popup .shepherd-header {
    background-color: rgba(var(--pt-primary-blue-rgb), 0.2);
    padding: 0.625rem 2.8125rem 0.625rem 0.9375rem; /* 10px 45px 10px 15px */
    position: relative;
    border-bottom: 1px solid rgba(var(--pt-primary-blue-rgb), 0.3);
}
.shepherd-element.pt-tutorial-popup .shepherd-title {
    color: var(--pt-text-on-dark-primary);
    font-weight: 600;
    font-size: var(--pt-text-lg);
    flex: 1 1 0;    /* Override shepherd default flex:1 0 auto so title can shrink */
    min-width: 0;   /* Allow flex item to shrink below content width */
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.shepherd-element.pt-tutorial-popup .shepherd-cancel-icon {
    position: absolute;
    top: 50%;
    margin-top: -16px; /* Half of 32px height for vertical centering */
    right: 0.75rem; /* 12px */
    background: none;
    border: none;
    color: var(--pt-text-on-dark-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.shepherd-element.pt-tutorial-popup .shepherd-cancel-icon:hover {
    background-color: var(--pt-accent-teal);
    color: var(--pt-main-background);
}
.shepherd-element.pt-tutorial-popup .shepherd-cancel-icon svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}
.shepherd-element.pt-tutorial-popup .shepherd-cancel-icon:hover svg {
    transform: rotate(90deg);
}
.shepherd-element.pt-tutorial-popup .shepherd-text {
    color: var(--pt-text-on-dark-secondary);
    padding: 0.9375rem; /* 15px */
    font-size: var(--pt-text-base);
    line-height: 1.6;
    padding-bottom: 1.25rem; /* 20px */
}
.shepherd-element.pt-tutorial-popup .shepherd-footer {
    padding: 0 0.9375rem 0.9375rem; /* 0 15px 15px */
}
.shepherd-element.pt-tutorial-popup .shepherd-button {
    background-color: var(--pt-primary-blue);
    color: var(--pt-text-on-dark-primary);
    border-radius: var(--pt-border-radius-small);
    padding: 0.5rem 1rem; /* 8px 16px */
    font-weight: 500;
    transition: background-color 0.2s ease;
    margin-right: 0.5rem; /* 8px */
    border: none;
}
.shepherd-element.pt-tutorial-popup .shepherd-button:hover {
    background-color: var(--pt-darker-blue);
}
.shepherd-element.pt-tutorial-popup .shepherd-button.shepherd-button-secondary {
    background-color: transparent;
    color: var(--pt-text-on-dark-secondary);
    border: 1px solid var(--pt-medium-grey-border);
}
.shepherd-element.pt-tutorial-popup .shepherd-button.shepherd-button-secondary:hover {
    background-color: var(--pt-overlay-sm);
    color: var(--pt-text-on-dark-primary);
}
.shepherd-element.pt-tutorial-popup .shepherd-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.shepherd-element.pt-tutorial-popup .shepherd-button:disabled:hover {
    background-color: var(--pt-primary-blue);
}
.shepherd-element.pt-tutorial-popup .shepherd-button.shepherd-button-secondary:disabled:hover {
    background-color: transparent;
}

/* Restart Tutorial Button */
.pt-section-toggle-header .pt-section-header-actions {
    display: flex;
    align-items: center;
    gap: 0.9375rem; /* 15px */
    margin-left: auto;
}
#pt-restart-tutorial-btn {
    background-color: var(--pt-accent-teal);
    color: var(--pt-main-background);
    border-color: var(--pt-accent-teal);
    font-weight: 600;
}
#pt-restart-tutorial-btn:hover {
    background-color: var(--pt-accent-teal-hover);
    border-color: var(--pt-accent-teal-hover);
    color: var(--pt-main-background);
}
#pt-restart-tutorial-btn.is-tour-active {
    background-color: var(--pt-danger);
    border-color: var(--pt-danger);
    color: var(--pt-text-on-dark-primary);
}
#pt-restart-tutorial-btn.is-tour-active:hover {
    background-color: var(--pt-danger-active);
    border-color: var(--pt-danger-active);
    color: var(--pt-text-on-dark-primary);
}

/* Broadcast and notification center styles */

/* Header broadcast system styles */

/* The clickable "pill" trigger that appears in the middle of the header */
#pt-header-broadcast-trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: var(--pt-text-base);
    font-weight: 500;
    cursor: pointer;
    transition: transform var(--pt-duration-normal) var(--pt-ease-out), filter var(--pt-duration-normal) var(--pt-ease-out);
}
#pt-header-broadcast-trigger:hover {
    transform: translate(-50%, -50%) scale(1.05);
    filter: brightness(1.1);
}

/* The banner that slides down from under the header */
#pt-header-broadcast-banner {
    position: fixed;
    top: var(--pt-dashboard-header-height); /* Positioned right below the header */
    left: 0;
    width: 100%;
    z-index: 10005 !important; /* Force it above the sidebar */
    color: var(--pt-text-on-dark-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    /* Hidden off-screen by default */
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s 0.3s;
}
#pt-header-broadcast-banner.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
}
.pt-header-broadcast-inner {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    gap: 1rem;
    line-height: 1.5;
}
.pt-header-broadcast-inner .pt-broadcast-content { flex-grow: 1; }
.pt-header-broadcast-inner .pt-broadcast-content p { display: inline; margin: 0; }
.pt-header-broadcast-inner .pt-broadcast-title { display: inline; font-weight: 600; margin-bottom: 0; }
.pt-header-broadcast-inner .pt-broadcast-title::after { content: ':'; margin-right: 0.5rem; }
.pt-header-broadcast-inner a { color: var(--pt-text-on-dark-primary); font-weight: 600; text-decoration: underline; }
.pt-header-broadcast-inner .pt-broadcast-icon { flex-shrink: 0; }
.pt-header-broadcast-inner .pt-broadcast-icon .lucide { width: 1.5rem; height: 1.5rem; }
.pt-header-broadcast-inner .pt-broadcast-close {
    background: none; border: none; color: var(--pt-text-on-dark-primary); opacity: 0.7; cursor: pointer;
    padding: 0.5rem; margin-left: auto; border-radius: 50%;
    transition: opacity 0.2s, background-color 0.2s;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.pt-header-broadcast-inner .pt-broadcast-close:hover { opacity: 1; background-color: var(--pt-overlay-sm); }


/* Coloring for Warning type */
#pt-header-broadcast-trigger.type-warning { background-color: var(--pt-warning); color: var(--pt-text-on-dark-primary); }
#pt-header-broadcast-banner.type-warning .pt-header-broadcast-inner { background-color: var(--pt-warning); }

/* Coloring for Critical type */
#pt-header-broadcast-trigger.type-critical { background-color: var(--pt-danger-active); color: var(--pt-text-on-dark-primary); }
#pt-header-broadcast-banner.type-critical .pt-header-broadcast-inner { background-color: var(--pt-danger-active); }

/* End header broadcast system styles */


/* Notification Bell Icon */
#pt-notification-center-trigger { position: relative; }
#pt-notification-center-trigger .lucide-bell { color: var(--pt-text-on-dark-secondary); transition: color 0.2s; }
#pt-notification-center-trigger:hover .lucide-bell, #pt-notification-center-trigger.has-unread .lucide-bell { color: var(--pt-text-on-dark-primary); }
#pt-notification-unread-dot {
    position: absolute; top: 0px; right: 0px; width: 10px; height: 10px;
    background-color: var(--pt-danger-active); border-radius: 50%;
    border: 2px solid var(--pt-darker-surface);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.7; } }

/* Notification Panel (Container) */
#pt-notification-center-panel {
    position: absolute; 
    top: calc(100% + 10px); 
    right: 0; 
    z-index: 1002;
    width: 380px; 
    max-height: 400px;
    display: flex;
    flex-direction: column;
    background: var(--pt-darker-surface);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    pointer-events: none;
}
#pt-notification-center-panel.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
}

/* Panel Header */
.pt-notification-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--pt-medium-grey-border);
}
.pt-notification-header h3 { margin: 0; font-size: var(--pt-text-lg); }

/* The Scrollable List Itself */
.pt-notification-list {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pt-primary-blue) var(--pt-darker-surface);
}
.pt-notification-list::-webkit-scrollbar { width: 8px; }
.pt-notification-list::-webkit-scrollbar-track { background: var(--pt-darker-surface); }
.pt-notification-list::-webkit-scrollbar-thumb {
    background-color: var(--pt-primary-blue);
    border-radius: 4px;
    border: 2px solid var(--pt-darker-surface);
}

/* Notification panel close button styles */
#pt-notification-close-btn {
    background: none;
    border: 1px solid transparent;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pt-text-on-dark-secondary);
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), color var(--pt-duration-normal) var(--pt-ease-out), transform var(--pt-duration-normal) var(--pt-ease-out);
}
#pt-notification-close-btn:hover {
    background-color: var(--pt-surface-color);
    color: var(--pt-text-on-dark-primary);
    transform: rotate(90deg);
}

/* Individual Notification Items */
.pt-notification-item { padding: 1rem; border-bottom: 1px solid var(--pt-medium-grey-border); }
.pt-notification-item:last-child { border-bottom: none; }
.pt-notification-item-title { font-weight: 600; color: var(--pt-text-on-dark-primary); margin: 0 0 0.25rem 0; }
.pt-notification-item-date { font-size: var(--pt-text-sm); color: var(--pt-text-on-dark-secondary); margin: 0 0 0.75rem 0; }
.pt-notification-item-content p { font-size: var(--pt-text-base); margin: 0; line-height: 1.5; }
.pt-no-notifications { padding: 2rem; text-align: center; color: var(--pt-text-on-dark-secondary); }

@media(max-width: 768px) {
    #pt-notification-center-panel { width: 90vw; max-width: 380px; }
}
/* End broadcast styles */
/* Notification center and banner styles */

/* 1. Makes top warning/critical banners visible when added by JavaScript */
.pt-broadcast-banner {
    display: flex; /* This overrides the previous 'display: none' which was hiding the banners */
}

/* 2. Adds a sleek, custom scrollbar to the notification list under the bell icon */
#pt-notification-list {
    scrollbar-width: thin;
    scrollbar-color: var(--pt-primary-blue) var(--pt-darker-surface);
}

#pt-notification-list::-webkit-scrollbar {
    width: 8px;
}

#pt-notification-list::-webkit-scrollbar-track {
    background: var(--pt-darker-surface);
}

#pt-notification-list::-webkit-scrollbar-thumb {
    background-color: var(--pt-primary-blue);
    border-radius: 4px;
    border: 2px solid var(--pt-darker-surface);
}

/* 3. Align the close button in the notification header */
.pt-notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* End notification center and banner styles */



/* Replace the old .pt-broadcast-title rule with these three */

/* 1. Makes the title inline and removes vertical spacing */
.pt-broadcast-title {
    display: inline; /* This is the key change */
    font-weight: 600;
    margin-bottom: 0; /* Remove the old vertical margin */
}

/* 2. Adds the colon and a small space after the title */
.pt-broadcast-title::after {
    content: ':';
    margin-right: 0.5rem; /* Adds space between the colon and the message */
}

/* 3. Forces the message paragraph to also be inline */
.pt-broadcast-content p {
    display: inline; /* Brings the message up onto the same line */
    margin: 0;      /* Removes any default paragraph margins */
}

/* END OF REPLACEMENT */

/* Z-index stacking order adjustments */

/*
 * This is the definitive fix for the banner appearing under the sidebar.
 * The sidebar's `backdrop-filter` creates a new stacking context, which
 * ignores simple z-index comparisons.
 *
 * This new hierarchy assigns an extremely high z-index to the header
 * and the banner, forcing them to render on a layer above ALL other
 * dashboard components, including the sidebar's isolated stacking context.
*/

/* 1. Set the main header to the highest level for base UI */
.pt-dashboard-header {
    z-index: 10006 !important;
}

/* 2. Set the slide-down banner to be just below the header, but above everything else */
#pt-header-broadcast-banner {
    z-index: 10005 !important;
}

/* End z-index stacking order adjustments */



/* Unread notifications indicator */
#pt-notification-center-trigger {
    border-radius: 10px;
}

#pt-notification-center-trigger.has-unread {
    border-color: var(--pt-accent-teal);
}

#pt-notification-center-trigger.has-unread .lucide-bell {
    color: var(--pt-accent-teal) !important;
}

/* Unified close button style */

.pt-modal-close-btn {
    /* ... (all the existing rules for the base button) ... */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pt-text-on-dark-secondary);
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), color var(--pt-duration-normal) var(--pt-ease-out), transform var(--pt-duration-normal) var(--pt-ease-out);
    flex-shrink: 0;
}

.pt-modal-close-btn:hover {
    background-color: var(--pt-surface-color);
    color: var(--pt-text-on-dark-primary);
    transform: rotate(90deg);
}

/*
    Large modal close button modifier
    Enlarges the button for primary modals.
*/
.pt-modal-close-btn.pt-modal-close-btn--large {
    width: 44px;  /* Larger size */
    height: 44px; /* Larger size */
}

/* This targets the icon INSIDE the large button to make it bigger too */
.pt-modal-close-btn.pt-modal-close-btn--large .lucide {
    width: 24px;
    height: 24px;
}
/* End large modal close button modifier */


/* End unified close button style */

/* Tour Highlighting & Collapsible KPI Styles */

/* 1. The glowing highlight effect for the active tour step element */
@keyframes tour-highlight-glow {
    from {
        box-shadow: 0 0 0 0px rgba(var(--pt-accent-teal-rgb), 0.7); /* Teal color */
    }
    to {
        box-shadow: 0 0 0 10px rgba(var(--pt-accent-teal-rgb), 0);
    }
}

.shepherd-highlight {
    animation: tour-highlight-glow 1.5s ease-out infinite;
    border-radius: var(--pt-border-radius); /* Match the site's border radius */
}

/* 2. Styling for the new collapsible KPI section header */
#pt-kpis-section-container .pt-section-toggle-header {
    margin-bottom: 1.5625rem; /* 25px */
}

#pt-kpis-section-container.is-collapsed .pt-section-toggle-header {
    margin-bottom: 0;
}

/* 3. Transition logic for the KPI wrapper to allow smooth collapse/expand */
#pt-kpis-section-wrapper {
    overflow: hidden;
    max-height: 75rem; /* A large value to accommodate content */
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#pt-kpis-section-container.is-collapsed #pt-kpis-section-wrapper {
    max-height: 0;
}

/* End tour highlighting and collapsible KPI styles */

/*
=================================================================
    Data freshness indicator (footer)
=================================================================
*/

/* 1. Make the main container a relative positioning anchor */
.pt-dashboard-footer-container {
    position: relative;
    height: 100%;
}

/* 2. Take all three zones out of the layout flow and position them absolutely */
.footer-zone-left,
.footer-zone-center,
.footer-zone-right {
    position: absolute;
    top: 50%; /* Align all to the vertical midpoint */
}

/* 3. Pin each zone to its correct horizontal position */
.footer-zone-left {
    left: 25px; /* Match container padding */
    transform: translateY(-50%);
}
.footer-zone-center {
    left: 50%;
    transform: translate(-50%, -50%); /* Perfect centering */
}
.footer-zone-right {
    right: 25px; /* Match container padding */
    transform: translateY(-50%);
}

/* 4. Remove all legacy/conflicting layout properties */
.pt-dashboard-footer .footer-copyright,
.pt-dashboard-footer .footer-links {
    position: static !important; /* Reset child positioning */
}

/* 5. Style the content inside the zones (no changes needed) */
.footer-data-freshness {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pt-text-on-dark-secondary);
    opacity: 0.8;
}
.footer-data-freshness .lucide-database {
    width: 1rem;
    height: 1rem;
    color: var(--pt-accent-teal);
    opacity: 0.7;
}
#pt-data-freshness-indicator {
    font-weight: 500;
}
.pt-dashboard-footer .footer-copyright {
    color: var(--pt-text-on-dark-secondary);
}
.pt-dashboard-footer .footer-links ul {
    display: inline-flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}
.pt-dashboard-footer .footer-links li {
    margin: 0;
    padding: 0;
}
.pt-dashboard-footer .footer-links li:not(:last-child)::after {
    content: none !important;
}

/* 6. On mobile, revert EVERYTHING back to a simple, stacked block layout */
@media (max-width: 768px) {
    .pt-dashboard-footer-container {
        position: static;
        display: flex; /* Use flex for simple stacking */
        flex-direction: column;
        justify-content: center;
        gap: 8px; /* A bit more space for mobile */
        padding: 10px 0;
        height: auto; /* Let height be automatic */
    }
    
    .footer-zone-left,
    .footer-zone-center,
    .footer-zone-right {
        position: static; /* CRITICAL: Revert from absolute */
        transform: none;  /* CRITICAL: Revert transforms */
        left: auto;       /* CRITICAL: Reset positioning */
        right: auto;      /* CRITICAL: Reset positioning */
        top: auto;        /* CRITICAL: Reset positioning */
        order: 2;         /* Set default order */
    }

    .footer-zone-left { order: 1; }
    .footer-zone-right { order: 3; }
}

/*
=================================================================
    DEFINITIVE UNIFIED COLLAPSIBLE SECTION STYLES
=================================================================
*/

/* 1. Base Styles for Sections & Headers */
.pt-section-toggle-header {
    /* When open, the header has a bottom margin to create space for content */
    margin-bottom: 1.5625rem;
    
    /* Ensure top corners are rounded, but bottom corners are sharp */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    /* Animate margin and border-radius changes */
    transition: margin-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                border-radius 0.1s linear 0.25s; /* Delay radius change until almost closed */
}

/* 2. Animation Wrappers (for height transition) */
#pt-charts-section-wrapper,
#pt-kpis-section-wrapper {
    padding-top: 0.625rem; /* 10px buffer for hover animations */
    overflow: hidden;
    max-height: 75rem; /* A large value for the open state */
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Inner Content Grids (for fade transition) */
.pt-charts-section,
.pt-kpi-inline-group {
    padding-top: 0; /* Remove top padding from inner content */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0s;
}

/* 4. THE DEFINITIVE COLLAPSED STATE */

/* When any section container has the .is-collapsed class... */
#pt-charts-section-container.is-collapsed,
#pt-kpis-section-container.is-collapsed {
    /* Animate bottom padding to zero when collapsed. */
    padding-bottom: 0;
}

/* The header inside the collapsed section... */
#pt-charts-section-container.is-collapsed .pt-section-toggle-header,
#pt-kpis-section-container.is-collapsed .pt-section-toggle-header {
    /* ...removes its bottom margin to sit flush against the bottom. */
    margin-bottom: 0;
    
    /* ...and gains rounded bottom corners to complete the look. */
    border-bottom-left-radius: var(--pt-border-radius);
    border-bottom-right-radius: var(--pt-border-radius);

    /* Apply radius change immediately on collapse start */
    transition: margin-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                border-radius 0.1s linear;
}

/* The inner wrapper's height animates to zero. */
#pt-charts-section-container.is-collapsed #pt-charts-section-wrapper,
#pt-kpis-section-container.is-collapsed #pt-kpis-section-wrapper {
    max-height: 0;
    padding-top: 0; /* Remove padding when collapsed */
    padding-bottom: 0;
}

/* The content inside fades out and is hidden from the layout. */
#pt-charts-section-container.is-collapsed .pt-charts-section,
#pt-kpis-section-container.is-collapsed .pt-kpi-inline-group {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-in-out, visibility 0s linear 0.1s;
}

/* 5. Retained clipping adjustment for backdrop-filter safety */
#pt-kpis-section-container.pt-section {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.pt-kpi-item {
    position: relative;
}

/* ========================================
   SORTABLE COLUMN AFFORDANCE SYSTEM
   ======================================== */

/* 1. DEFAULT STATE: Show subtle double-arrow on all sortable headers */
.pt-data-table thead th[data-column-key] .pt-sort-icon,
.pt-sticky-table-header thead th[data-column-key] .pt-sort-icon {
    visibility: visible !important; /* Override the old "hidden by default" rule */
    opacity: 0.3; /* Subtle but present */
    color: var(--pt-text-on-dark-secondary);
    transition: opacity 0.2s ease, color 0.2s ease;
}

/* 2. HOVER STATE: Make icon more prominent to signal interactivity */
.pt-data-table thead th[data-column-key]:hover .pt-sort-icon,
.pt-sticky-table-header thead th[data-column-key]:hover .pt-sort-icon {
    opacity: 0.7;
    color: var(--pt-text-on-dark-primary);
}

/* 3. ACTIVE/SORTED STATE: Bold, colored, and fully visible */
.pt-data-table thead th.sorted .pt-sort-icon,
.pt-sticky-table-header thead th.sorted .pt-sort-icon {
    opacity: 1 !important;
    color: var(--pt-accent-teal) !important;
}

/* 4. CURSOR: Reinforce that headers are clickable */
.pt-data-table thead th[data-column-key],
.pt-sticky-table-header thead th[data-column-key] {
    cursor: pointer;
}

/* 5. ACCESSIBILITY: Add focus styles for keyboard navigation */
.pt-data-table thead th[data-column-key]:focus-visible,
.pt-sticky-table-header thead th[data-column-key]:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: -2px;
}

.pt-data-table thead th[data-column-key]:focus-visible .pt-sort-icon,
.pt-sticky-table-header thead th[data-column-key]:focus-visible .pt-sort-icon {
    opacity: 1;
    color: var(--pt-accent-teal);
}

/* 6. MOBILE: Slightly larger touch target */
@media (max-width: 992px) {
    .pt-data-table thead th[data-column-key],
    .pt-sticky-table-header thead th[data-column-key] {
        min-height: 44px; /* Standard mobile touch target */
    }

    /* Hide keyboard shortcuts button on mobile (no physical keyboard) */
    #pt-keyboard-shortcuts-btn {
        display: none;
    }
}

/* Inactive favorites styling */
.pt-inactive-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: var(--pt-text-xs);
    background-color: var(--pt-overlay-xs);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 0.25rem;
    color: var(--pt-text-on-dark-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pt-inactive-product-title {
    color: var(--pt-text-on-dark-secondary);
}

/* Inactive favorite row styling */
tr.is-inactive-favorite {
    opacity: 0.5; /* More pronounced than the current 0.6 */
}

tr.is-inactive-favorite td {
    color: var(--pt-text-on-dark-secondary) !important;
}

tr.is-inactive-favorite td a {
    color: var(--pt-text-on-dark-secondary) !important;
    pointer-events: none;
    cursor: default;
}

tr.is-inactive-favorite:hover {
    opacity: 0.7; /* Slight lift on hover for visual feedback */
}

/* Keep the star button functional even for inactive products */
tr.is-inactive-favorite .pt-favorite-star {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Zoom Control */
#pt-zoom-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

#pt-zoom-button svg {
    width: 1rem;
    height: 1rem;
}

#pt-zoom-button-text {
    font-weight: 600;
    font-size: var(--pt-text-base);
}

#pt-zoom-popover {
    position: fixed;
    background: rgba(var(--pt-surface-color-rgb), 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--pt-overlay-md);
    border-radius: 16px;
    padding: 24px;
    width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10000;
    /* Maintain a consistent font size regardless of page zoom */
    font-size: var(--pt-text-base);
    /* Position will be set by JavaScript */
}

#pt-zoom-popover.is-visible {
    opacity: 1;
    visibility: visible;
}

#pt-zoom-popover::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: rgba(var(--pt-surface-color-rgb), 0.95);
    border-left: 1px solid var(--pt-overlay-md);
    border-top: 1px solid var(--pt-overlay-md);
    transform: rotate(45deg);
}

.pt-zoom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pt-zoom-title {
    font-size: var(--pt-text-sm);
    font-weight: 600;
    color: var(--pt-text-on-dark-primary);
    letter-spacing: 0.02em;
}

.pt-zoom-value {
    font-size: var(--pt-text-xl);
    font-weight: 700;
    color: var(--pt-accent-teal);
}

.pt-zoom-slider-container {
    margin-bottom: 16px;
}

#pt-zoom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: rgba(var(--pt-primary-blue-rgb), 0.3);
    outline: none;
    cursor: pointer;
}
#pt-zoom-slider:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: 2px;
}

#pt-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pt-text-on-dark-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(var(--pt-primary-blue-rgb), 0.3);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#pt-zoom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(var(--pt-primary-blue-rgb), 0.4);
}

#pt-zoom-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pt-text-on-dark-primary);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(var(--pt-primary-blue-rgb), 0.3);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#pt-zoom-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(var(--pt-primary-blue-rgb), 0.4);
}

.pt-zoom-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pt-zoom-preset-btn {
    padding: 8px 12px;
    background: var(--pt-overlay-xs);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 8px;
    color: var(--pt-text-on-dark-secondary);
    font-size: var(--pt-text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--pt-duration-fast) cubic-bezier(0.4, 0, 0.2, 1), border-color var(--pt-duration-fast) cubic-bezier(0.4, 0, 0.2, 1), color var(--pt-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.pt-zoom-preset-btn:hover {
    background: var(--pt-overlay-sm);
    border-color: var(--pt-accent-teal);
    color: var(--pt-text-on-dark-primary);
}

.pt-zoom-preset-btn.is-active {
    background: linear-gradient(135deg, var(--pt-primary-blue) 0%, var(--pt-darker-blue) 100%);
    border-color: var(--pt-primary-blue);
    color: var(--pt-text-on-dark-primary);
}

/* Smooth zoom transition with better easing */
html {
    transition: font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   UX POLISH & SMOOTH ANIMATIONS
   ============================================ */

/* View Transition (Favorites Toggle) */
.pt-main-content {
    transition: margin-left 0.3s ease, opacity 0.3s ease-in-out;
}

.pt-main-content.pt-view-transitioning {
    opacity: 0.3;
    pointer-events: none;
}

/* Table Row Staggered Fade-In */
.pt-table-row-fade-in {
    animation: pt-row-fade-in 0.4s ease-out backwards;
}

/* Clickable table rows */
.pt-clickable-row {
    cursor: pointer;
}

.pt-clickable-row:hover {
    background-color: rgba(var(--pt-primary-blue-rgb), 0.1);
}

@keyframes pt-row-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* KPI Smooth Value Updates */
.pt-kpi-item .kpi-value-inline,
.pt-kpi-item .kpi-title-inline {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.pt-kpi-item.pt-kpi-updating .kpi-value-inline,
.pt-kpi-item.pt-kpi-updating .kpi-title-inline {
    opacity: 0.5;
    transform: scale(0.98);
}

/* Filter Chip Animations */
.pt-active-filter-tag {
    animation: pt-filter-chip-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes pt-filter-chip-in {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.pt-active-filter-tag.pt-removing {
    animation: pt-filter-chip-out 0.2s ease-in forwards;
}

@keyframes pt-filter-chip-out {
    to {
        opacity: 0;
        transform: scale(0.8) translateY(-5px);
    }
}

/* Modal Entrance Animation */
#pt-product-modal-overlay.is-visible #pt-product-modal-panel {
    animation: pt-modal-bounce-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pt-modal-bounce-in {
    0% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Smooth Accordion Transitions */
.pt-filter-accordion-content {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease-in-out,
                padding 0.3s ease-in-out;
}

/* KPI hover — subtle border only, no lift */

/* Star Favorite Smooth Transition */
.pt-favorite-star {
    transition: color 0.2s ease, transform 0.2s ease;
}

.pt-favorite-star.is-favorite {
    color: var(--pt-accent-gold);
}

.pt-favorite-star:hover {
    transform: scale(1.2);
}

/* Smooth Color Transitions for Various Elements */
.pt-active-filter-tag,
.pt-category-name,
.pt-sidebar-brand-item,
.pt-sidebar-seller-item {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease;
}

/* Notification Toast Slide-In */
.pt-notification-toast {
    animation: pt-toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pt-toast-slide-in {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Page Transition Smoothness */
.pt-main-content > * {
    transition: opacity 0.2s ease-in-out;
}

/* ============================================
   GOLD FLASH EFFECT
   ============================================ */

/* When favoriting, temporarily override hover color to gold */
.pt-data-table tbody tr.pt-gold-flash td {
    background-color: rgba(var(--pt-accent-gold-rgb), 0.6) !important;
}

.pt-data-table tbody tr.pt-gold-flash:hover td {
    background-color: rgba(var(--pt-accent-gold-rgb), 0.6) !important;
}

/* Modal Gold Pulse Effects (user confirmed these work great) */
.pt-favorite-star.pt-gold-pulse {
    animation: pt-star-gold-pulse 0.8s ease-out;
}

@keyframes pt-star-gold-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

.pt-modal-header.pt-gold-glow {
    animation: pt-header-gold-glow 0.8s ease-out;
    position: relative;
}

@keyframes pt-header-gold-glow {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(var(--pt-accent-gold-rgb), 0.08);
    }
}

/* Keyboard Shortcuts Modal */
#pt-keyboard-shortcuts-modal.pt-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--pt-main-background-rgb), 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#pt-keyboard-shortcuts-modal.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.pt-keyboard-shortcuts-container {
    position: relative;
    background-color: var(--pt-darker-surface);
    border-radius: var(--pt-border-radius);
    border: 1px solid var(--pt-medium-grey-border);
    width: 100%;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#pt-keyboard-shortcuts-modal.is-visible .pt-keyboard-shortcuts-container {
    transform: scale(1);
}

.pt-keyboard-shortcuts-container .pt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--pt-medium-grey-border);
    flex-shrink: 0;
}

.pt-keyboard-shortcuts-container .pt-modal-title {
    font-size: var(--pt-text-xl);
    font-weight: 600;
    color: var(--pt-text-on-dark-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pt-keyboard-shortcuts-container .pt-modal-title i {
    width: 1.5rem;
    height: 1.5rem;
}

.pt-keyboard-shortcuts-container .pt-modal-close-btn {
    background: none;
    border: none;
    color: var(--pt-text-on-dark-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pt-keyboard-shortcuts-container .pt-modal-close-btn:hover {
    background-color: var(--pt-surface-color);
    color: var(--pt-text-on-dark-primary);
}

.pt-keyboard-shortcuts-container .pt-modal-body {
    padding: 1.5rem;
    flex-grow: 1;
}

.pt-shortcuts-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pt-shortcut-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background-color: var(--pt-surface-color);
    border-radius: 6px;
    border: 1px solid var(--pt-medium-grey-border);
    transition: border-color 0.2s ease;
}

.pt-shortcut-item:hover {
    border-color: var(--pt-primary-blue);
}

.pt-shortcut-key {
    flex-shrink: 0;
    min-width: 50px;
    display: flex;
    justify-content: center;
}

.pt-shortcut-key kbd {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: var(--pt-text-base);
    font-weight: 600;
    color: var(--pt-text-on-dark-primary);
    background: linear-gradient(180deg, var(--pt-darker-surface) 0%, var(--pt-main-background) 100%);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 4px;
    box-shadow: 0 2px 0 var(--pt-medium-grey-border), 0 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    min-width: 2rem;
}

.pt-shortcut-description {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-grow: 1;
    color: var(--pt-text-on-dark-secondary);
    font-size: var(--pt-text-base);
}

.pt-shortcut-description i {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--pt-primary-blue);
    flex-shrink: 0;
}

.pt-shortcuts-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pt-medium-grey-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pt-text-on-dark-secondary);
    font-size: var(--pt-text-base);
}

.pt-shortcuts-footer i {
    width: 1rem;
    height: 1rem;
    color: var(--pt-primary-blue);
    flex-shrink: 0;
}

/* Keyboard shortcuts modal container */
@media (max-width: 768px) {
    .pt-keyboard-shortcuts-container {
        max-width: calc(100% - 2rem);
    }
}

/* ========================================================================
   Filter Presets Styling
   ======================================================================== */

/* Presets section in sidebar */
.pt-presets-section {
    margin-bottom: 1.25rem;
}

.pt-preset-controls {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.pt-preset-dropdown {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    background: var(--pt-surface-color);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
    color: var(--pt-text-on-dark-primary);
    font-size: var(--pt-text-base);
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out), box-shadow var(--pt-duration-normal) var(--pt-ease-out);
}

.pt-preset-dropdown:hover {
    background: rgba(var(--pt-surface-color-rgb), 0.8);
    border-color: var(--pt-overlay-md);
}

.pt-preset-dropdown:focus {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: -2px;
    border-color: var(--pt-primary-blue);
    box-shadow: 0 0 0 2px rgba(var(--pt-primary-blue-rgb), 0.2);
}

/* Highlight default preset in dropdown */
.pt-preset-dropdown option.pt-default-preset-option {
    font-weight: 600;
    background: rgba(var(--pt-primary-blue-rgb), 0.15);
}

.pt-button-icon-only {
    padding: 0.625rem;
    min-width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pt-button-icon-only i {
    margin: 0;
    width: 1.125rem;
    height: 1.125rem;
}

.pt-button-accent {
    background: var(--pt-primary-blue, #C4622D);
    color: var(--pt-bg-primary, #0a0f1c);
    font-weight: 600;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.pt-button-accent:hover {
    opacity: 0.85;
}
.pt-button-accent i {
    width: 16px;
    height: 16px;
}

/* Notification system */
.pt-notification {
    position: fixed;
    top: 2rem;
    right: 2rem;
    background: var(--pt-surface-color);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 10010;
    transform: translateX(calc(100% + 2rem));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 400px;
}

.pt-notification.pt-notification-show {
    transform: translateX(0);
}

.pt-notification i {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.pt-notification-success {
    border-color: rgba(var(--pt-accent-teal-rgb), 0.3);
}

.pt-notification-success i {
    color: var(--pt-accent-teal);
}

.pt-notification-error {
    border-color: rgba(var(--pt-danger-rgb), 0.3);
}

.pt-notification-error i {
    color: var(--pt-danger-muted);
}

.pt-notification-info i {
    color: var(--pt-primary-blue);
}

/* Preset manage list */
.pt-presets-manage-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pt-preset-item {
    background: rgba(var(--pt-surface-color-rgb), 0.4);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out);
}

.pt-preset-item:hover {
    background: rgba(var(--pt-surface-color-rgb), 0.6);
    border-color: var(--pt-overlay-md);
}

/* Highlight default preset */
.pt-preset-item-default {
    background: rgba(var(--pt-primary-blue-rgb), 0.08);
    border-color: rgba(var(--pt-primary-blue-rgb), 0.3);
    box-shadow: 0 0 0 1px rgba(var(--pt-primary-blue-rgb), 0.15);
}

.pt-preset-item-default:hover {
    background: rgba(var(--pt-primary-blue-rgb), 0.12);
    border-color: rgba(var(--pt-primary-blue-rgb), 0.4);
}

.pt-preset-info {
    flex: 1;
    min-width: 0;
}

.pt-preset-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.pt-preset-name {
    margin: 0;
    font-size: var(--pt-text-md);
    font-weight: 600;
    color: var(--pt-text-on-dark-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-preset-name.is-editing {
    background: rgba(var(--pt-primary-blue-rgb), 0.15);
    border: 2px solid var(--pt-primary-blue);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    outline: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.pt-preset-name.is-editing:focus {
    background: rgba(var(--pt-primary-blue-rgb), 0.2);
}

.pt-preset-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: var(--pt-text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.pt-preset-default-badge {
    background: rgba(var(--pt-primary-blue-rgb), 0.2);
    color: var(--pt-primary-blue);
}

.pt-preset-default-badge i {
    width: 0.875rem;
    height: 0.875rem;
}

.pt-preset-meta {
    margin: 0;
    font-size: var(--pt-text-base);
    color: var(--pt-text-on-dark-secondary);
}

.pt-preset-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pt-preset-actions .pt-button {
    padding: 0.5rem;
}

.pt-preset-actions .pt-button i {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

/* Star button active state */
.pt-preset-set-default-btn.is-active {
    background: rgba(var(--pt-primary-blue-rgb), 0.2);
    border-color: var(--pt-primary-blue);
    color: var(--pt-primary-blue);
    cursor: not-allowed;
}

.pt-preset-set-default-btn.is-active i {
    color: var(--pt-primary-blue);
}

.pt-preset-set-default-btn:not(.is-active):hover {
    background: rgba(var(--pt-primary-blue-rgb), 0.15);
    border-color: var(--pt-primary-blue);
}

.pt-button-danger:hover {
    background: rgba(var(--pt-danger-rgb), 0.2);
    border-color: var(--pt-danger-muted);
}

.pt-empty-message {
    text-align: center;
    color: var(--pt-text-on-dark-secondary);
    padding: 2rem 1rem;
    font-size: var(--pt-text-base);
}

/* Modal adjustments for wider preset manager */
.pt-modal-panel-wide {
    max-width: 50rem;
}

/* Form styles for save preset modal */
.pt-form-group {
    margin-bottom: 1.25rem;
}

.pt-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--pt-text-base);
    font-weight: 600;
    color: var(--pt-text-on-dark-primary);
}

.pt-form-group input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    background: rgba(var(--pt-surface-color-rgb), 0.4);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius-small);
    color: var(--pt-text-on-dark-primary);
    font-size: var(--pt-text-base);
    font-family: inherit;
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out), box-shadow var(--pt-duration-normal) var(--pt-ease-out);
}

.pt-form-group input[type="text"]:hover {
    background: rgba(var(--pt-surface-color-rgb), 0.6);
    border-color: var(--pt-overlay-md);
}

.pt-form-group input[type="text"]:focus {
    outline: 2px solid var(--pt-primary-blue);
    outline-offset: -2px;
    border-color: var(--pt-primary-blue);
    box-shadow: 0 0 0 2px rgba(var(--pt-primary-blue-rgb), 0.2);
}

.pt-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
}

.pt-checkbox-label input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--pt-primary-blue);
}

.pt-checkbox-label span {
    font-size: var(--pt-text-base);
    color: var(--pt-text-on-dark-secondary);
}

.pt-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pt-medium-grey-border);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pt-notification {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }

    .pt-preset-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .pt-preset-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .pt-modal-panel-wide {
        max-width: calc(100% - 2rem);
    }
}

/* ---- Grey Spot Score Badge ---- */
.pt-gs-score-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: var(--pt-text-sm);
    line-height: 1.4;
    text-align: center;
    min-width: 42px;
}
.pt-gs-score-green {
    background-color: rgba(34, 197, 94, 0.2);
    color: var(--pt-success-muted);
}
.pt-gs-score-orange {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--pt-warning-muted);
}
.pt-gs-score-red {
    background-color: rgba(var(--pt-danger-rgb), 0.2);
    color: var(--pt-danger-muted);
}

/* ---- New product / single-point history hint ---- */
.pt-history-new-product-banner {
    position: absolute;
    top: 3.25rem;
    left: 3.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(208, 201, 229, 0.4);
    font-size: var(--pt-text-xs);
    font-style: italic;
    pointer-events: none;
}
.pt-history-new-product-banner svg {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

/* =========================================================================
   v2: Dashboard Upgrade Styles
   ========================================================================= */

/* Filter chips */
.pt-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.pt-filter-chips-group {
    margin-top: 8px;
}
.pt-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    min-height: 2rem; /* 32px - improved touch target */
    border-radius: 16px;
    cursor: pointer;
    font-size: var(--pt-text-sm);
    border: 1px solid var(--pt-medium-grey-border);
    background: transparent;
    color: var(--pt-text-on-dark-secondary);
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out), color var(--pt-duration-normal) var(--pt-ease-out);
}
.pt-filter-chip:hover {
    border-color: rgba(255,255,255,0.3);
    color: var(--pt-text-on-dark-primary);
}
.pt-filter-chip:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: 2px;
}
.pt-filter-chip.active {
    background: rgba(var(--pt-accent-teal-rgb),0.15);
    border-color: var(--pt-accent-teal);
    color: var(--pt-accent-teal);
}

/* Column toggle */
.pt-column-toggle-btn {
    position: relative;
}
.pt-column-toggle-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(var(--pt-surface-dark-rgb), 0.95);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 8px;
    padding: 8px;
    z-index: 100;
    min-width: 200px;
    margin-top: 4px;
}
.pt-column-toggle-title {
    font-size: var(--pt-text-sm);
    font-weight: 600;
    padding: 4px 8px 8px;
    color: var(--pt-text-on-dark-secondary);
    border-bottom: 1px solid var(--pt-medium-grey-border);
    margin-bottom: 4px;
}
.pt-column-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: var(--pt-text-sm);
    border-radius: 4px;
    transition: background 0.15s;
}
.pt-column-toggle-item:hover {
    background: var(--pt-overlay-xs);
}
.pt-column-toggle-item input[type="checkbox"] {
    accent-color: var(--pt-accent-teal);
}
.pt-column-reset-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 0;
    background: none;
    border: 1px solid var(--pt-overlay-md);
    border-radius: 4px;
    color: rgba(255,255,255,0.6);
    font-size: var(--pt-text-sm);
    cursor: pointer;
    transition: border-color var(--pt-duration-normal) var(--pt-ease-out), color var(--pt-duration-normal) var(--pt-ease-out);
}
.pt-column-reset-btn:hover {
    border-color: var(--pt-accent-teal);
    color: var(--pt-accent-teal);
}

/* Opportunity badge (pointing finger) */
.pt-opportunity-badge {
    display: inline;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 3px;
    border-radius: 2px;
}

/* Center numeric/short-value columns */
.col-grey_spot_score,
.col-beoordeling,
.col-total_offers,
.col-latest_scrape_reviews,
.col-commission_pct,
.col-positive_review_pct,
.col-gs_visits_min,
.col-latest_scrape_delivery,
.col-net_margin_pct {
    text-align: center;
}

/* Color-coded values */
.pt-val-green { color: var(--pt-success); }
.pt-val-orange { color: var(--pt-warning); }
.pt-val-red { color: var(--pt-danger); }
.pt-val-muted { color: rgba(255,255,255,0.3); font-size: var(--pt-text-xs); font-style: italic; }

/* Modal tabs */
.pt-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--pt-medium-grey-border);
    margin-bottom: 16px;
}
.pt-modal-tab {
    padding: 10px 16px;
    min-height: 2.5rem; /* 40px - adequate touch target */
    cursor: pointer;
    border: none;
    background: none;
    color: var(--pt-text-on-dark-secondary);
    border-bottom: 2px solid transparent;
    font-size: var(--pt-text-base);
    transition: color var(--pt-duration-normal) var(--pt-ease-out), border-bottom-color var(--pt-duration-normal) var(--pt-ease-out);
}
.pt-modal-tab:hover {
    color: var(--pt-text-on-dark-primary);
}
.pt-modal-tab:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: -2px;
}
.pt-modal-tab.active {
    color: var(--pt-accent-teal);
    border-bottom-color: var(--pt-accent-teal);
}
.pt-modal-tab-panel {
    display: none;
}
.pt-modal-tab-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

/* Competition table */
.pt-competition-header {
    margin-bottom: 12px;
    font-size: var(--pt-text-base);
}
.pt-competition-wrapper {
    max-height: 400px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid var(--pt-medium-grey-border);
}
.pt-competition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pt-text-sm);
}
.pt-competition-table th,
.pt-competition-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--pt-overlay-xs);
}
.pt-competition-table th {
    position: sticky;
    top: 0;
    background: rgba(var(--pt-surface-dark-rgb), 0.95);
    font-weight: 600;
    font-size: var(--pt-text-sm);
    color: var(--pt-text-on-dark-secondary);
}
.pt-best-offer-row {
    background: rgba(var(--pt-accent-teal-rgb),0.08);
}
.pt-badge-fbb {
    display: inline-block;
    background: var(--pt-accent-teal);
    color: var(--pt-main-background);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--pt-text-xs);
    font-weight: 600;
}
.pt-badge-fbr {
    display: inline-block;
    background: var(--pt-overlay-md);
    color: rgba(255,255,255,0.7);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--pt-text-xs);
}
.pt-badge-top {
    display: inline-block;
    background: var(--pt-accent-gold-warm);
    color: var(--pt-main-background);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--pt-text-xs);
    font-weight: 600;
}

/* Product info tab */
.pt-product-info-section {
    margin-bottom: 20px;
}
.pt-product-info-section h4 {
    font-size: var(--pt-text-base);
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--pt-text-on-dark-primary);
}
.pt-product-description {
    margin-bottom: 16px;
    color: var(--pt-text-on-dark-secondary);
    line-height: 1.6;
    font-size: var(--pt-text-base);
}
.pt-no-data-text {
    color: var(--pt-text-on-dark-secondary);
    font-style: italic;
    font-size: var(--pt-text-sm);
}
.pt-attributes-table {
    width: 100%;
    font-size: var(--pt-text-sm);
}
.pt-attributes-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--pt-overlay-xs);
}
.pt-attributes-table td:first-child {
    font-weight: 500;
    color: var(--pt-text-on-dark-secondary);
    width: 40%;
}
.pt-show-more-attrs {
    margin-top: 8px;
    font-size: var(--pt-text-sm);
}
.pt-avg-rating-line {
    margin-top: 8px;
    font-size: var(--pt-text-base);
    color: var(--pt-text-on-dark-secondary);
}

/* Star bars */
.pt-star-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}
.pt-star-label {
    width: 12px;
    text-align: right;
    font-size: var(--pt-text-sm);
    color: var(--pt-text-on-dark-secondary);
}
.pt-star-bar-bg {
    flex: 1;
    height: 12px;
    background: var(--pt-overlay-sm);
    border-radius: 6px;
    overflow: hidden;
}
.pt-star-bar-fill {
    height: 100%;
    background: var(--pt-accent-gold-warm);
    border-radius: 6px;
    transition: width 0.3s;
}
.pt-star-count {
    width: 40px;
    font-size: var(--pt-text-sm);
    color: var(--pt-text-on-dark-secondary);
}

/* Commission breakdown */
.pt-commission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.pt-commission-item label {
    display: block;
    font-size: var(--pt-text-sm);
    color: var(--pt-text-on-dark-secondary);
    margin-bottom: 2px;
}
.pt-commission-item .value {
    font-size: var(--pt-text-lg);
    font-weight: 600;
    color: var(--pt-text-on-dark-primary);
}

/* Similar products */
.pt-modal-body-row {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
.pt-similar-sidebar {
    width: 180px;
    flex-shrink: 0;
    border-left: 1px solid var(--pt-medium-grey-border);
    padding: 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pt-overlay-md) transparent;
}
.pt-similar-sidebar::-webkit-scrollbar {
    width: 6px;
}
.pt-similar-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.pt-similar-sidebar::-webkit-scrollbar-thumb {
    background: var(--pt-overlay-md);
    border-radius: 3px;
}
.pt-similar-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}
.pt-similar-sidebar h4 {
    font-size: var(--pt-text-sm);
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--pt-text-on-dark-secondary);
}
.pt-similar-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pt-similar-card {
    cursor: pointer;
    border-radius: 8px;
    padding: 8px;
    border: 1px solid var(--pt-overlay-xs);
    transition: background-color var(--pt-duration-normal) var(--pt-ease-out), border-color var(--pt-duration-normal) var(--pt-ease-out);
}
.pt-similar-card:hover {
    background: var(--pt-overlay-xs);
    border-color: var(--pt-overlay-md);
}
.pt-similar-img {
    width: 100%;
    height: 70px;
    object-fit: contain;
    margin-bottom: 4px;
}
.pt-similar-title {
    font-size: var(--pt-text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pt-text-on-dark-secondary);
}
.pt-similar-price {
    font-weight: 600;
    font-size: var(--pt-text-sm);
    margin-top: 4px;
}
.pt-similar-score {
    font-size: var(--pt-text-xs);
    color: var(--pt-text-on-dark-secondary);
}

/* Copy button */
.pt-copy-btn {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    background: none;
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 6px;
    color: var(--pt-text-on-dark-primary);
    padding: 6px 8px;
    display: flex;
    align-items: center;
}
.pt-copy-btn:hover {
    opacity: 1;
}
.pt-copy-btn .lucide {
    width: 1rem;
    height: 1rem;
}

/* Toast */
.pt-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--pt-surface-color, #1E1E46);
    color: var(--pt-text-on-dark-primary, #FFFFFF);
    border: 1px solid var(--pt-medium-grey-border, var(--pt-overlay-sm));
    padding: 10px 20px;
    border-radius: 8px;
    font-size: var(--pt-text-sm);
    font-weight: 500;
    z-index: 100000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    animation: pt-toast-fade 3s forwards;
}
@keyframes pt-toast-fade {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* Score panel */
.pt-score-panel {
    background: rgba(var(--pt-surface-dark-rgb), 0.8);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}
.pt-score-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.pt-score-panel-header h4 {
    margin: 0;
    font-size: var(--pt-text-base);
}
.pt-score-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}
.pt-score-slider-label {
    width: 120px;
    font-size: var(--pt-text-sm);
    color: var(--pt-text-on-dark-secondary);
    flex-shrink: 0;
}
.pt-score-slider-container {
    flex: 1;
}
.pt-score-slider-container input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--pt-overlay-sm);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.pt-score-slider-container input[type="range"]:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: 2px;
}
.pt-score-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pt-accent-teal);
    border: 2px solid rgba(var(--pt-surface-dark-rgb), 0.9);
    cursor: pointer;
    box-shadow: 0 0 4px rgba(var(--pt-accent-teal-rgb), 0.4);
}
.pt-score-slider-container input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pt-accent-teal);
    border: 2px solid rgba(var(--pt-surface-dark-rgb), 0.9);
    cursor: pointer;
    box-shadow: 0 0 4px rgba(var(--pt-accent-teal-rgb), 0.4);
}
/* Ensure 44px touch area via input padding */
.pt-score-slider-container input[type="range"] {
    padding: 13px 0;
}
.pt-score-slider-container input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
}
.pt-score-slider-container input[type="range"]::-moz-range-track {
    height: 4px;
    background: var(--pt-overlay-sm);
    border-radius: 2px;
    border: none;
}
.pt-score-slider-container input[type="range"]::-moz-range-progress {
    height: 4px;
    background: var(--pt-accent-teal);
    border-radius: 2px;
}
.pt-score-slider-value {
    width: 40px;
    text-align: right;
    font-size: var(--pt-text-sm);
    font-weight: 600;
    color: var(--pt-accent-teal);
}
.pt-button-secondary {
    background: transparent;
    border: 1px solid var(--pt-overlay-md);
    color: rgba(255,255,255,0.6);
    font-size: var(--pt-text-sm);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color var(--pt-duration-normal) var(--pt-ease-out), color var(--pt-duration-normal) var(--pt-ease-out);
}
.pt-button-secondary:hover {
    border-color: var(--pt-accent-teal);
    color: var(--pt-accent-teal);
}
.pt-score-active-banner {
    text-align: center;
    background: rgba(var(--pt-accent-teal-rgb), 0.1);
    border: 1px solid rgba(var(--pt-accent-teal-rgb), 0.3);
    color: var(--pt-accent-teal);
    font-size: var(--pt-text-sm);
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.pt-score-btn-active {
    background: rgba(var(--pt-accent-teal-rgb), 0.2) !important;
    border-color: var(--pt-accent-teal) !important;
    color: var(--pt-accent-teal) !important;
    font-weight: 600;
}

/* Sparklines */
.pt-sparkline {
    vertical-align: middle;
}

/* Category health dot */

/* v2: Toolbar above table for Score/Kolommen buttons */
.pt-table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 0.25rem;
}

/* v2: Table footer toolbar additions */
.pt-table-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* =========================================================================
 * Accessibility: Skip link
 * ========================================================================= */
.pt-skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100000;
    padding: 0.75rem 1.25rem;
    background: var(--pt-accent-teal);
    color: var(--pt-main-background);
    font-weight: 600;
    font-size: var(--pt-text-base);
    border-radius: var(--pt-border-radius-small);
    text-decoration: none;
    transition: top 0.15s ease;
}
.pt-skip-link:focus {
    top: 1rem;
}

/* =========================================================================
 * Accessibility: Screen-reader only utility
 * ========================================================================= */
.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;
}

/* =========================================================================
 * Accessibility: Global focus-visible fallback for remaining interactive elements
 * ========================================================================= */
.pt-filter-accordion-header:focus-visible,
.pt-section-toggle-header:focus-visible,
.pt-modal-close-btn:focus-visible,
.pt-lightbox-close:focus-visible,
.pt-page-nav:focus-visible,
.pt-modal-favorite-button:focus-visible,
.pt-modal-copy-btn:focus-visible,
.pt-copy-btn:focus-visible,
.pt-sidebar-collapse-btn:focus-visible,
.pt-column-toggle-btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--pt-accent-teal);
    outline-offset: 2px;
}

/* =========================================================================
 * Accessibility: Reduced motion
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.15s !important;
    }

    /* Exempt loading overlay — functional indicator, not decoration.
       Must re-declare with !important to override the wildcard above. */
    #pt-loading-overlay.pt-animation-started .pt-ring-1 {
        animation: pt-ring-rotate-1 2s linear infinite !important;
    }
    #pt-loading-overlay.pt-animation-started .pt-ring-2 {
        animation: pt-ring-rotate-2 1.5s linear infinite reverse !important;
    }
    #pt-loading-overlay.pt-animation-started .pt-ring-3 {
        animation: pt-ring-rotate-3 2.5s linear infinite !important;
    }
    #pt-loading-overlay.pt-animation-started .pt-loading-logo {
        animation: pt-logo-pulse 1.5s ease-in-out infinite !important;
    }
    .pt-dots::after {
        animation: pt-dots-animation 1.5s steps(4, end) infinite !important;
    }

    .pt-button:hover,
    .pt-modal-kpi-item:hover,
    .pt-modal-kpi-item.is-clickable:hover,
    .ui-slider .ui-slider-handle:hover,
    .pt-product-thumbnail-wrapper:hover,
    .pt-favorite-star:hover,
    #pt-header-broadcast-trigger:hover,
    #pt-zoom-slider::-webkit-slider-thumb:hover,
    #pt-zoom-slider::-moz-range-thumb:hover {
        transform: none !important;
    }

    .pt-sidebar {
        transition: none;
    }
}

/* =========================================================================
 * Maintenance page
 * ========================================================================= */
.pt-maintenance-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2.5rem 1.25rem;
}
.pt-maintenance-card {
    background: var(--pt-surface-color);
    border: 1px solid var(--pt-medium-grey-border);
    border-radius: var(--pt-border-radius);
    padding: 4rem 2rem;
    text-align: center;
    max-width: 43.75rem;
    backdrop-filter: blur(15px);
}
.pt-maintenance-icon {
    margin-bottom: 2rem;
}
.pt-maintenance-icon svg {
    margin: 0 auto;
    display: block;
    opacity: 0.8;
}
.pt-maintenance-content {
    color: var(--pt-text-on-dark-primary);
    line-height: 1.7;
}