/**
 * global.css — PandaRed Control Center Design System
 * GitHub/shadcn style — clean, compact, neutral
 *
 * Shape:     none=0  xs=4px  sm=8px  md=12px  lg=16px  xl=28px  full=9999px
 * Motion:    standard = 0.15s ease
 * Typography: Inter font
 */


/* ═══════════════════════════════════════════════════════════════════════════
   0. DESIGN TOKENS (CSS Custom Properties)
   Color tokens are defined in themes.css (6 themes × light/dark)
   This file contains: Shape, Elevation, Motion, Typography, Component tokens
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Fixed/Scrim ──────────────────────────────────────────────────────── */
    --md-sys-color-scrim:                 #000000;
    --md-sys-color-shadow:                #000000;

    /* ── Shape tokens ─────────────────────────────────────────────────────── */
    --md-sys-shape-none:        0px;
    --md-sys-shape-extra-small: 4px;
    --md-sys-shape-small:       8px;
    --md-sys-shape-medium:      12px;
    --md-sys-shape-large:       16px;
    --md-sys-shape-extra-large: 28px;
    --md-sys-shape-full:        9999px;

    /* ── Elevation shadows (subtle, GitHub-style) ─────────────────────────── */
    --md-sys-elevation-0: none;
    --md-sys-elevation-1: 0px 1px 3px rgba(0,0,0,0.06), 0px 1px 2px rgba(0,0,0,0.04);
    --md-sys-elevation-2: 0px 4px 12px rgba(0,0,0,0.08), 0px 2px 4px rgba(0,0,0,0.04);
    --md-sys-elevation-3: 0px 8px 24px rgba(0,0,0,0.12), 0px 4px 8px rgba(0,0,0,0.06);

    /* ── Motion ────────────────────────────────────────────────────────────── */
    --md-sys-motion-easing-standard:    cubic-bezier(.2,0,0,1);
    --md-sys-motion-easing-emphasized:  cubic-bezier(.2,0,0,1);
    --md-sys-motion-duration-short:     0.15s;
    --md-sys-motion-duration-medium:    0.2s;
    --md-sys-motion-duration-long:      0.3s;

    /* ── Typography (Inter) ───────────────────────────────────────────────── */
    --md-sys-typescale-display-large:   57px/64px;
    --md-sys-typescale-display-medium:  45px/52px;
    --md-sys-typescale-headline-large:  32px/40px;
    --md-sys-typescale-headline-medium: 28px/36px;
    --md-sys-typescale-headline-small:  24px/32px;
    --md-sys-typescale-title-large:     22px/28px;
    --md-sys-typescale-title-medium:    16px/24px;
    --md-sys-typescale-title-small:     14px/20px;
    --md-sys-typescale-body-large:      16px/24px;
    --md-sys-typescale-body-medium:     14px/20px;
    --md-sys-typescale-body-small:      12px/16px;
    --md-sys-typescale-label-large:     14px/20px;
    --md-sys-typescale-label-medium:    12px/16px;
    --md-sys-typescale-label-small:     11px/16px;

    /* ── shadcn/ui bridge variables ───────────────────────────────────────── */
    /* These semantic names are used by shadcn components and Tailwind utilities */
    --radius:              0.5rem;   /* 8px — shadcn default base radius */
    --background:          var(--md-sys-color-surface);
    --foreground:          var(--md-sys-color-on-surface);
    --card:                var(--md-sys-color-surface-container-lowest);
    --card-foreground:     var(--md-sys-color-on-surface);
    --popover:             var(--md-sys-color-surface-container-lowest);
    --popover-foreground:  var(--md-sys-color-on-surface);
    --primary-fg:          var(--md-sys-color-on-primary);
    --secondary-bg:        var(--md-sys-color-surface-container);
    --secondary-fg:        var(--md-sys-color-on-surface);
    --muted:               var(--md-sys-color-surface-container-low);
    --muted-foreground:    var(--md-sys-color-on-surface-variant);
    --accent:              var(--md-sys-color-surface-container);
    --accent-foreground:   var(--md-sys-color-on-surface);
    --destructive:         var(--md-sys-color-error);
    --border:              var(--md-sys-color-outline-variant);
    --input:               var(--md-sys-color-outline-variant);
    --ring:                var(--md-sys-color-primary);

    /* ── Component shortcuts ──────────────────────────────────────────────── */
    --md-comp-input-bg:       var(--md-sys-color-surface-container-lowest);
    --md-comp-input-border:   var(--md-sys-color-outline-variant);
    --md-comp-input-text:     var(--md-sys-color-on-surface);
    --md-comp-input-placeholder: var(--md-sys-color-outline);
    --md-comp-card-bg:        var(--md-sys-color-surface-container-lowest);
    --md-comp-card-border:    var(--md-sys-color-outline-variant);
    --md-comp-dialog-bg:      var(--md-sys-color-surface-container-lowest);
    --md-comp-table-header-bg: var(--md-sys-color-surface-container-low);
    --md-comp-table-border:   var(--md-sys-color-outline-variant);
}

/* ── Dark theme non-color tokens ──────────────────────────────────────── */
.dark {
    /* ── Dark elevation ────────────────────────────────────────────────── */
    --md-sys-elevation-1: 0px 1px 3px rgba(0,0,0,0.20), 0px 1px 2px rgba(0,0,0,0.12);
    --md-sys-elevation-2: 0px 4px 12px rgba(0,0,0,0.25), 0px 2px 4px rgba(0,0,0,0.15);
    --md-sys-elevation-3: 0px 8px 24px rgba(0,0,0,0.35), 0px 4px 8px rgba(0,0,0,0.20);

    /* ── Dark component shortcuts ─────────────────────────────────────── */
    /* Inputs use surface-container-high so they appear lighter than the card
       background (surface-container = #18181b) and are visually distinct */
    --md-comp-input-bg:       var(--md-sys-color-surface-container-high);
    --md-comp-input-border:   var(--md-sys-color-outline);
    --md-comp-input-text:     var(--md-sys-color-on-surface);
    --md-comp-input-placeholder: var(--md-sys-color-on-surface-variant);
    --md-comp-card-bg:        var(--md-sys-color-surface-container);
    --md-comp-card-border:    var(--md-sys-color-outline-variant);
    --md-comp-dialog-bg:      var(--md-sys-color-surface-container-high);
    --md-comp-table-header-bg: var(--md-sys-color-surface-container-high);
    --md-comp-table-border:   var(--md-sys-color-outline-variant);
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. BASE & RESET
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

/* ── Custom scrollbars ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-outline); }

* { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Focus rings ────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
#sidebarToggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}

/* ── Base typography ────────────────────────────────────────────────────── */
input, textarea, select {
    font-family: 'Inter', sans-serif;
}

/* ── Selection color ────────────────────────────────────────────────────── */
::selection {
    background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
    color: inherit;
}

/* ── Link styling ───────────────────────────────────────────────────────── */
a:not([class]) { color: var(--md-sys-color-primary); text-decoration: none; }
a:not([class]):hover { text-decoration: underline; }

/* ── Smooth transitions ─────────────────────────────────────────────────── */
button, a, input, select, textarea {
    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease,
                opacity 0.15s ease;
}

/* ── Tooltip base ───────────────────────────────────────────────────────── */
[title]:not(button) { cursor: default; }

/* ── Smooth page transitions ────────────────────────────────────────────── */
main { transition: opacity 0.1s ease; }


/* ═══════════════════════════════════════════════════════════════════════════
   2. M3 COMPONENT CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page Header / Top App Bar ──────────────────────────────────────────── */
.m3-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.625rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
}

@media (min-width: 640px) { .m3-header { padding: 0.625rem 1.25rem; } }
@media (min-width: 1024px) { .m3-header { padding: 0.625rem 1.5rem; } }

/* ── Content Area ───────────────────────────────────────────────────────── */
.m3-content {
    padding: 1rem;
    padding-bottom: 2rem;
}
@media (min-width: 640px) { .m3-content { padding: 1.25rem; padding-bottom: 2rem; } }
@media (min-width: 1024px) { .m3-content { padding: 1.5rem; padding-bottom: 2rem; } }

/* ── Page Title ─────────────────────────────────────────────────────────── */
.m3-page-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m3-page-subtitle {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.25rem;
}


/* ── Buttons ────────────────────────────────────────────────────────────── */

/* Shared button base */
.m3-btn-filled,
.m3-btn-tonal,
.m3-btn-outlined,
.m3-btn-text,
.m3-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;         /* 36px */
    padding: 0 0.875rem;
    font-size: 0.8125rem;    /* 13px */
    font-weight: 500;
    line-height: 1;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.m3-btn-filled:active,
.m3-btn-tonal:active,
.m3-btn-outlined:active,
.m3-btn-text:active,
.m3-btn-danger:active {
    transform: scale(0.98);
}
.m3-btn-filled:disabled,
.m3-btn-tonal:disabled,
.m3-btn-outlined:disabled,
.m3-btn-text:disabled,
.m3-btn-danger:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* Filled button (primary action) */
.m3-btn-filled {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.m3-btn-filled:hover {
    opacity: 0.9;
}

/* Tonal button (secondary action) */
.m3-btn-tonal {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}
.m3-btn-tonal:hover {
    background-color: var(--md-sys-color-surface-container-high);
}

/* Outlined button */
.m3-btn-outlined {
    padding: 0 0.875rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: var(--md-sys-color-on-surface);
}
.m3-btn-outlined:hover {
    background: var(--md-sys-color-surface-container-low);
}

/* Text button (lowest emphasis) */
.m3-btn-text {
    padding: 0 0.5rem;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    border: none;
}
.m3-btn-text:hover {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

/* Danger button */
.m3-btn-danger {
    background-color: #dc2626;
    color: #ffffff;
}
.m3-btn-danger:hover {
    background-color: #b91c1c;
}

/* Icon button (smaller, square) */
.m3-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.m3-icon-btn:hover {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

/* FAB button */
.m3-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-1);
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
}
.m3-fab:hover {
    opacity: 0.9;
    box-shadow: var(--md-sys-elevation-2);
}


/* ── Text Fields ────────────────────────────────────────────────────────── */
input.m3-input,
textarea.m3-input,
select.m3-input,
.m3-input {
    width: 100%;
    height: 2.25rem;         /* 36px for text inputs */
    padding: 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 6px;
    border: 1px solid var(--md-comp-input-border);
    background-color: var(--md-comp-input-bg);
    color: var(--md-comp-input-text);
    outline: none;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input.m3-input::placeholder,
textarea.m3-input::placeholder,
.m3-input::placeholder { color: var(--md-comp-input-placeholder); }

/* textarea overrides height */
textarea.m3-input {
    height: auto;
    min-height: 5rem;
    padding: 0.5rem 0.75rem;
}

input.m3-input:focus,
textarea.m3-input:focus,
select.m3-input:focus,
.m3-input:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
}
.m3-input:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* Textarea */
textarea.m3-textarea,
.m3-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 6px;
    border: 1px solid var(--md-comp-input-border);
    background-color: var(--md-comp-input-bg);
    color: var(--md-comp-input-text);
    outline: none;
    resize: vertical;
    min-height: 5rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.m3-textarea::placeholder,
.m3-textarea::placeholder { color: var(--md-comp-input-placeholder); }
textarea.m3-textarea:focus,
.m3-textarea:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
}

/* Select */
select.m3-select,
.m3-select {
    width: 100%;
    height: 2.25rem;
    padding: 0 2rem 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 6px;
    border: 1px solid var(--md-comp-input-border);
    background-color: var(--md-comp-input-bg);
    color: var(--md-comp-input-text);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dark .m3-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select.m3-select:focus,
.m3-select:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
}

/* Label */
.m3-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 0.375rem;
}

/* Required indicator */
.m3-required { color: var(--md-sys-color-error); margin-left: 0.125rem; }

/* Error message */
.m3-error {
    display: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
    padding: 0.4rem 0.625rem;
    border-radius: 6px;
    border: 1px solid rgba(220, 38, 38, 0.15);
    margin-top: 0.375rem;
}
.dark .m3-error {
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.2);
}
.m3-error.visible { display: flex; align-items: center; gap: 0.375rem; }

/* Search input with icon */
.m3-search-wrap {
    position: relative;
    flex: 1;
}
.m3-search-wrap .m3-search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--md-sys-color-outline);
    pointer-events: none;
    font-size: 18px;
}
.m3-search-wrap .m3-input {
    padding-left: 2.25rem;
    border-radius: 6px;   /* NOT capsule-shaped */
}


/* ── Cards ──────────────────────────────────────────────────────────────── */
.m3-card {
    background: var(--md-comp-card-bg);
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    overflow: hidden;
}

/* Elevated card */
.m3-card-elevated {
    background: var(--md-comp-card-bg);
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* Card padding variant */
.m3-card-body { padding: 1rem; }
@media (min-width: 640px) { .m3-card-body { padding: 1.25rem; } }


/* ── Dialog ─────────────────────────────────────────────────────────────── */

/* Backdrop */
.m3-dialog-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1rem;
}
.m3-dialog-backdrop.open {
    display: flex;
}

/* Dialog container */
.m3-dialog {
    position: relative;
    width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--md-comp-dialog-bg);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Dialog sizes */
.m3-dialog-sm { max-width: 24rem; }
.m3-dialog-md { max-width: 32rem; }
.m3-dialog-lg { max-width: 48rem; }
.m3-dialog-xl { max-width: 64rem; }
.m3-dialog-full { max-width: 90rem; }

/* Dialog header */
.m3-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}

/* Dialog title */
.m3-dialog-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    line-height: 1.3;
}

/* Dialog body */
.m3-dialog-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

/* Dialog footer */
.m3-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}


/* ── Data Table ─────────────────────────────────────────────────────────── */
.m3-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.m3-table thead th {
    padding: 0.5rem 0.875rem;
    text-align: left;
    font-size: 0.6875rem;    /* 11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-comp-table-header-bg);
    border-bottom: 1px solid var(--md-comp-table-border);
    white-space: nowrap;
}

.m3-table tbody td {
    padding: 0.625rem 0.875rem;   /* tighter rows */
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
    vertical-align: middle;
    font-size: 0.8125rem;         /* 13px */
}

.m3-table tbody tr:last-child td { border-bottom: none; }
.m3-table tbody tr:hover td {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 3%, transparent);
}

/* ── Table scroll wrapper with fade indicators ───────────────────────────── */
.m3-table-scroll {
    overflow-x: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}
/* Right fade when content overflows */
.m3-table-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--md-sys-color-surface-container-lowest));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.m3-table-scroll.has-overflow::after  { opacity: 1; }
.m3-table-scroll.scrolled-end::after  { opacity: 0; }


/* ── Pagination ─────────────────────────────────────────────────────────── */
.m3-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 0;
}

.m3-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.375rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.m3-page-btn:hover {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}
.m3-page-btn.active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-weight: 600;
}
.m3-page-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }


/* ── Badges ─────────────────────────────────────────────────────────────── */
.m3-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;  /* 11px */
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    border: 1px solid;
}

/* Badge dot */
.m3-badge-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--md-sys-shape-full);
    flex-shrink: 0;
}

/* Badge variants — GitHub bordered style */
.m3-badge-success {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}
.dark .m3-badge-success {
    background: rgba(20,83,45,0.2);
    color: #4ade80;
    border-color: rgba(74,222,128,0.3);
}
.m3-badge-success .m3-badge-dot { background: #16a34a; }

.m3-badge-warning {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.dark .m3-badge-warning {
    background: rgba(120,53,15,0.2);
    color: #fbbf24;
    border-color: rgba(251,191,36,0.3);
}
.m3-badge-warning .m3-badge-dot { background: #d97706; }

.m3-badge-error {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.dark .m3-badge-error {
    background: rgba(127,29,29,0.2);
    color: #f87171;
    border-color: rgba(248,113,113,0.3);
}
.m3-badge-error .m3-badge-dot { background: #ef4444; }

.m3-badge-info {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.dark .m3-badge-info {
    background: rgba(30,58,138,0.2);
    color: #60a5fa;
    border-color: rgba(96,165,250,0.3);
}
.m3-badge-info .m3-badge-dot { background: #3b82f6; }

.m3-badge-neutral {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    border-color: var(--md-sys-color-outline-variant);
}
.m3-badge-neutral .m3-badge-dot { background: var(--md-sys-color-outline); }


/* ── Empty State ────────────────────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="m3-empty">
 *     <span class="material-symbols-outlined m3-empty-icon">inbox</span>
 *     <div class="m3-empty-title">Нет данных</div>
 *     <div class="m3-empty-text">Здесь пока ничего нет. Создайте первый элемент.</div>
 *     <div class="m3-empty-cta">
 *       <button class="m3-btn-filled">Создать</button>
 *     </div>
 *   </div>
 *
 * Modifiers:
 *   .m3-empty--sm   — compact (tables, panels)
 *   .m3-empty--lg   — large (full-page states)
 */
.m3-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 0;
}
.m3-empty--sm {
    padding: 2rem 1.5rem;
}
.m3-empty--lg {
    padding: 6rem 2rem;
}
.m3-empty-icon {
    font-size: 2.5rem;
    color: var(--md-sys-color-outline);
    margin-bottom: 0.75rem;
    line-height: 1;
    user-select: none;
}
.m3-empty--sm .m3-empty-icon { font-size: 2rem; }
.m3-empty--lg .m3-empty-icon { font-size: 3.5rem; }

.m3-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 0.375rem;
}
.m3-empty--lg .m3-empty-title {
    font-size: 1.125rem;
}
.m3-empty-text {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
    max-width: 22rem;
    line-height: 1.5;
}
.m3-empty-cta {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}


/* ── Spinner ────────────────────────────────────────────────────────────── */
@keyframes m3-spin { to { transform: rotate(360deg); } }

.m3-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--md-sys-color-outline-variant);
    border-top-color: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-full);
    animation: m3-spin 0.8s linear infinite;
}
.m3-spinner-sm { width: 1.25rem; height: 1.25rem; }
.m3-spinner-lg { width: 3rem; height: 3rem; border-width: 3px; }


/* ── Loading State ──────────────────────────────────────────────────────── */

/* Full-area loading placeholder (spinner + optional text) */
.m3-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
}
.m3-loading-text {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
}

/* Button loading state — use setLoading(btn, true) from notify.js
 * or add .is-loading class manually. Shows a spinner inline.
 *
 * Usage:  setLoading(btn, true, 'Сохранение…')
 *         setLoading(btn, false)
 */
[class*="m3-btn"].is-loading,
button.is-loading {
    pointer-events: none;
    opacity: 0.8;
    position: relative;
}
[class*="m3-btn"].is-loading::after,
button.is-loading::after {
    content: '';
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: m3-spin 0.6s linear infinite;
    margin-left: 0.5rem;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Overlay loading mask for containers (cards, sections, tables) */
.m3-overlay-loading {
    position: relative;
    pointer-events: none;
}
.m3-overlay-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--md-sys-color-surface) 70%, transparent);
    border-radius: inherit;
    z-index: 10;
}
.m3-overlay-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--md-sys-color-outline-variant);
    border-top-color: var(--md-sys-color-primary);
    border-radius: 50%;
    animation: m3-spin 0.6s linear infinite;
    z-index: 11;
}


/* ── Tabs ───────────────────────────────────────────────────────────────── */
.m3-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    overflow-x: auto;
}

.m3-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    border: none;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.m3-tab:hover {
    color: var(--md-sys-color-on-surface);
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
}
.m3-tab.active,
.m3-tab-active {
    color: var(--md-sys-color-primary);
    border-bottom-color: var(--md-sys-color-primary);
    font-weight: 600;
}


/* ── Toast / Snackbar ────────────────────────────────────────────────────── */
.m3-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 100;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--md-sys-color-inverse-on-surface);
    background: var(--md-sys-color-inverse-surface);
    box-shadow: var(--md-sys-elevation-3);
    transition: transform var(--md-sys-motion-duration-long) var(--md-sys-motion-easing-standard);
    white-space: nowrap;
}
.m3-toast.visible { transform: translateX(-50%) translateY(0); }


/* ── Progress Bar ───────────────────────────────────────────────────────── */
.m3-progress {
    width: 100%;
    height: 0.25rem;
    background: color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
    border-radius: var(--md-sys-shape-full);
    overflow: hidden;
}

.m3-progress-fill {
    height: 100%;
    background: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-full);
    transition: width 0.5s var(--md-sys-motion-easing-standard);
}


/* ── Divider ────────────────────────────────────────────────────────────── */
.m3-divider {
    border: none;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin: 0;
}


/* ── Chip ───────────────────────────────────────────────────────────────── */
.m3-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: var(--md-sys-color-on-surface);
    cursor: default;
}
.m3-chip-selected {
    background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}


/* ── Switch (shadcn compact style) ──────────────────────────────────────── */
/* Usage: <label class="m3-switch"><input type="checkbox"><span class="m3-switch-track"></span></label> */
.m3-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.25rem;   /* 36px */
    height: 1.25rem;  /* 20px */
    cursor: pointer;
    flex-shrink: 0;
}
.m3-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.m3-switch-track {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.m3-switch-track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.125rem;
    width: 0.875rem;  /* 14px thumb */
    height: 0.875rem;
    border-radius: 9999px;
    background: var(--md-sys-color-outline);
    transform: translateY(-50%);
    transition: left 0.15s ease, background-color 0.15s ease, width 0.1s ease;
}
.m3-switch input:checked ~ .m3-switch-track {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}
.m3-switch input:checked ~ .m3-switch-track::after {
    left: calc(100% - 1rem);
    background: var(--md-sys-color-on-primary);
}
.m3-switch input:focus-visible ~ .m3-switch-track {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}
.m3-switch input:disabled ~ .m3-switch-track {
    opacity: 0.38;
    cursor: not-allowed;
}

/* Backward-compat: old .m3-switch-thumb element is now replaced by ::after pseudo */
.m3-switch-thumb { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   3. SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Active nav item — left border accent + subtle bg tint ─────────────── */
.active-nav {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
    color: var(--md-sys-color-primary);
    font-weight: 500;
}
.active-nav .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    color: inherit;
}

/* ── Material Symbols baseline ──────────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Collapsed sidebar — ONLY on desktop (≥1024px) ──────────────────────── */
@media (min-width: 1024px) {
    html.sidebar-collapsed aside {
        width: 3rem !important;
        overflow: hidden !important;
    }
    html.sidebar-collapsed aside .logo-text,
    html.sidebar-collapsed aside .nav-label,
    html.sidebar-collapsed aside .nav-group-header-text,
    html.sidebar-collapsed aside .sidebar-user-text {
        display: none !important;
    }
    html.sidebar-collapsed #sidebarHeader {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    html.sidebar-collapsed #sidebarHeaderRow {
        justify-content: center !important;
        gap: 0 !important;
    }
    html.sidebar-collapsed #sidebarBrandBlock {
        display: none !important;
    }
    html.sidebar-collapsed #sidebarNav {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        overflow-x: hidden !important;
        align-items: center !important;
    }
    html.sidebar-collapsed #sidebarNav a,
    html.sidebar-collapsed #sidebarNav .nav-group-toggle {
        width: 2rem !important;
        height: 2rem !important;
        padding: 0 !important;
        border-radius: 6px !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 0 !important;
    }
    html.sidebar-collapsed #sidebarFooter {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    html.sidebar-collapsed #sidebarFooter .nav-label { display: none !important; }
}

/* ── JS-managed collapsed state ─────────────────────────────────────────── */
aside { position: relative; }

/* Collapsed sidebar — desktop only */
@media (min-width: 1024px) {
    aside.sidebar--collapsed {
        width: 3.5rem !important;
        overflow: hidden;
    }
    aside.sidebar--collapsed .logo-text,
    aside.sidebar--collapsed .nav-label,
    aside.sidebar--collapsed .sidebar-user-text,
    aside.sidebar--collapsed .nav-group,
    aside.sidebar--collapsed #cpTriggerWrap,
    aside.sidebar--collapsed #activeProjectChip {
        display: none !important;
    }
    aside.sidebar--collapsed nav a {
        width: 2.25rem !important;
        height: 2.25rem !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 1px auto !important;
    }
    aside.sidebar--collapsed nav a .material-symbols-outlined {
        font-size: 20px;
    }
    .sidebar-nav-collapsed {
        width: 2.25rem !important;
        height: 2.25rem !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 1px auto !important;
    }
}

/* Ensure flex centering inside .nav-label */
aside nav a .nav-label {
    display: flex;
    align-items: center;
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. SIDEBAR NAVIGATION BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-badge-dev,
.nav-badge-beta,
.nav-badge-ready,
.nav-badge-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.0625rem 0.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 3px;
    margin-left: 0.5rem;
    white-space: nowrap;
}
.nav-badge-dev {
    background-color: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.nav-badge-beta {
    background-color: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.nav-badge-ready {
    background-color: rgba(16, 185, 129, 0.08);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.nav-badge-new {
    background-color: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. CUSTOM SELECT WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */
.custom-select-wrapper { font-family: 'Inter', sans-serif; }
.custom-select-dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}
.cs-option:first-child { border-radius: 8px 8px 0 0; }
.cs-option:last-child { border-radius: 0 0 8px 8px; }


/* ═══════════════════════════════════════════════════════════════════════════
   6. MOBILE SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    aside,
    aside.sidebar--collapsed {
        position: fixed !important;
        left: 0; top: 0; bottom: 0;
        z-index: 41 !important;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(.4,0,.2,1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    aside.mobile-open,
    aside.sidebar--collapsed.mobile-open {
        transform: translateX(0) !important;
    }

    aside .logo-text,
    aside .nav-label,
    aside .sidebar-user-text,
    aside.sidebar--collapsed .logo-text,
    aside.sidebar--collapsed .nav-label,
    aside.sidebar--collapsed .sidebar-user-text {
        display: flex !important;
    }

    aside nav a,
    aside.sidebar--collapsed nav a,
    aside nav a.sidebar-nav-collapsed,
    .sidebar-nav-collapsed {
        width: auto !important;
        height: auto !important;
        padding: 0.625rem 0.875rem !important;
        border-radius: 6px !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        gap: 0.625rem !important;
    }

    aside .nav-group-toggle,
    aside.sidebar--collapsed .nav-group-toggle {
        width: auto !important;
        height: auto !important;
        padding: 0.625rem 0.875rem !important;
        border-radius: 6px !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        gap: 0.625rem !important;
    }

    aside .nav-group-child,
    aside.sidebar--collapsed .nav-group-child {
        width: auto !important;
        height: auto !important;
        padding: 0.5rem 0.75rem !important;
        padding-left: 2.25rem !important;
        border-radius: 6px !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        gap: 0.5rem !important;
    }

    aside .nav-group-items-inner,
    aside.sidebar--collapsed .nav-group-items-inner {
        margin-left: 0.75rem !important;
        padding-left: 0.75rem !important;
        border-left: 1px solid var(--md-sys-color-outline-variant) !important;
    }

    aside #sidebarHeader,
    aside.sidebar--collapsed #sidebarHeader {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    aside #sidebarHeaderRow,
    aside.sidebar--collapsed #sidebarHeaderRow {
        justify-content: flex-start !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    aside #sidebarBrandBlock,
    aside.sidebar--collapsed #sidebarBrandBlock {
        display: flex !important;
        flex: 1 1 auto !important;
    }

    aside #sidebarNav,
    aside.sidebar--collapsed #sidebarNav {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        overflow-x: visible !important;
        align-items: stretch !important;
    }

    aside #sidebarFooter,
    aside.sidebar--collapsed #sidebarFooter {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    aside .nav-label,
    aside.sidebar--collapsed .nav-label,
    aside .sidebar-user-text,
    aside.sidebar--collapsed .sidebar-user-text {
        display: flex !important;
    }

    #sidebarToggle { display: none !important; }
}

/* ── Mobile sidebar overlay ────────────────────────────────────────────── */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mobile-sidebar-overlay.active {
    display: block;
}

@media (min-width: 1024px) {
    #mobileMenuBtn { display: none !important; }
    .mobile-sidebar-overlay { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. UTILITY HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Animate spin */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* Truncate text */
.m3-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status dot */
.m3-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--md-sys-shape-full);
    flex-shrink: 0;
}
.m3-status-dot-success { background: #16a34a; }
.m3-status-dot-warning { background: #d97706; }
.m3-status-dot-error { background: #dc2626; }
.m3-status-dot-info { background: #2563eb; }
.m3-status-dot-neutral { background: var(--md-sys-color-outline); }

/* Sortable ghost for drag-and-drop */
.sortable-ghost {
    opacity: 0 !important;
    border: 2px dashed var(--md-sys-color-primary) !important;
    border-radius: 8px;
    background: color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent) !important;
    box-shadow: none !important;
}
.sortable-chosen {
    cursor: grabbing !important;
    transform: scale(1.02) rotate(0.5deg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
    z-index: 9999;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. ENHANCED MOTION & MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Extended motion tokens */
:root {
    --md-sys-motion-duration-short1:  50ms;
    --md-sys-motion-duration-short2:  100ms;
    --md-sys-motion-duration-short3:  150ms;
    --md-sys-motion-duration-short4:  200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1:   450ms;
    --md-sys-motion-duration-long2:   500ms;

    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
}

/* ── Smooth color theme transitions ─────────────────────────────────── */
body,
aside,
main,
header,
.m3-card,
.m3-card-elevated,
.m3-dialog,
.m3-toast,
.m3-tabs,
.m3-badge,
.m3-chip {
    transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* ── Button micro-interactions ───────────────────────────────────────── */
.m3-btn-filled,
.m3-btn-tonal,
.m3-btn-outlined,
.m3-btn-text,
.m3-btn-danger {
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
                opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

/* ── Press effect on interactive elements ─────────────────────────────── */
.m3-btn-filled:active,
.m3-btn-tonal:active,
.m3-btn-outlined:active,
.m3-btn-text:active,
.m3-btn-danger:active {
    transform: scale(0.97);
    transition-duration: var(--md-sys-motion-duration-short1);
}

/* ── Interactive card hover ──────────────────────────────────────────── */
.m3-card-interactive,
.m3-card[onclick],
.m3-card[data-href],
a.m3-card {
    cursor: pointer;
    transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}
.m3-card-interactive:hover,
.m3-card[onclick]:hover,
.m3-card[data-href]:hover,
a.m3-card:hover {
    box-shadow: var(--md-sys-elevation-2);
    transform: translateY(-1px);
}
.m3-card-interactive:active,
.m3-card[onclick]:active,
.m3-card[data-href]:active,
a.m3-card:active {
    transform: translateY(0) scale(0.99);
    transition-duration: var(--md-sys-motion-duration-short1);
}

/* ── Enhanced card with state layer overlay ──────────────────────────── */
.m3-card-interactive::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    pointer-events: none;
    z-index: 1;
}
.m3-card-interactive { position: relative; overflow: hidden; }
.m3-card-interactive:hover::before { opacity: 0.04; }
.m3-card-interactive:active::before { opacity: 0.07; }
.m3-card-interactive:focus-visible::before { opacity: 0.08; }

/* ── Dialog enter/exit animation ─────────────────────────────────────── */
.m3-dialog-backdrop {
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}
.m3-dialog-backdrop.open {
    opacity: 1;
}
.m3-dialog-backdrop .m3-dialog {
    transform: scale(0.95) translateY(8px);
    opacity: 0;
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate),
                opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.m3-dialog-backdrop.open .m3-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── Toast/Snackbar slide-up ──────────────────────────────────────────── */
.m3-toast {
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate),
                opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    opacity: 0;
}
.m3-toast.visible {
    opacity: 1;
}

/* ── Custom dropdown animation ───────────────────────────────────────── */
.custom-select-dropdown {
    transform-origin: top center;
    transform: scaleY(0.95) translateY(-4px);
    opacity: 0;
    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate),
                opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.custom-select-dropdown[data-open="true"] {
    transform: scaleY(1) translateY(0);
    opacity: 1;
}

/* ── Nav group expand/collapse smooth ────────────────────────────────── */
.nav-group-items {
    transition: grid-template-rows var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}
.nav-group-arrow {
    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

/* ── Tab indicator slide ─────────────────────────────────────────────── */
.m3-tab {
    transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

/* ── Fade-in animation for page content ──────────────────────────────── */
@keyframes m3-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes m3-fade-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes m3-scale-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes m3-slide-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.m3-animate-fade-in {
    animation: m3-fade-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}
.m3-animate-fade-in-up {
    animation: m3-fade-in-up var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate) both;
}
.m3-animate-scale-in {
    animation: m3-scale-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}
.m3-animate-slide-in-right {
    animation: m3-slide-in-right var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}

/* Staggered children animation */
.m3-stagger > * {
    animation: m3-fade-in-up var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}
.m3-stagger > *:nth-child(1) { animation-delay: 0ms; }
.m3-stagger > *:nth-child(2) { animation-delay: 50ms; }
.m3-stagger > *:nth-child(3) { animation-delay: 100ms; }
.m3-stagger > *:nth-child(4) { animation-delay: 150ms; }
.m3-stagger > *:nth-child(5) { animation-delay: 200ms; }
.m3-stagger > *:nth-child(6) { animation-delay: 250ms; }
.m3-stagger > *:nth-child(7) { animation-delay: 300ms; }
.m3-stagger > *:nth-child(8) { animation-delay: 350ms; }
.m3-stagger > *:nth-child(n+9) { animation-delay: 400ms; }

/* ── Skeleton loading shimmer ────────────────────────────────────────── */
@keyframes m3-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.m3-skeleton,
.skeleton {
    background: linear-gradient(
        90deg,
        var(--md-sys-color-surface-container-high) 25%,
        var(--md-sys-color-surface-container-highest) 50%,
        var(--md-sys-color-surface-container-high) 75%
    );
    background-size: 200% 100%;
    animation: m3-shimmer 1.5s ease infinite;
    border-radius: 4px;
}

/* ── Pulse animation for status dots ─────────────────────────────────── */
@keyframes m3-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.m3-pulse { animation: m3-pulse 2s ease-in-out infinite; }

/* ── Number counter animation ────────────────────────────────────────── */
@keyframes m3-count-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.m3-count-animate {
    animation: m3-count-up var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized-decelerate) both;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. ENHANCED CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card with transitions */
.m3-card {
    position: relative;
    transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.m3-card-elevated {
    position: relative;
    transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* Card header with icon */
.m3-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.m3-card-header-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Card media (images, thumbnails) */
.m3-card-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}
.m3-card-media-square {
    aspect-ratio: 1;
}

/* Card actions */
.m3-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.875rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. ENHANCED LISTS / DROPDOWNS
   ═══════════════════════════════════════════════════════════════════════════ */

/* List container */
.m3-list {
    list-style: none;
    padding: 0.375rem 0;
    margin: 0;
}

/* List item */
.m3-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
    min-height: 2.75rem;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease;
    font-size: 0.875rem;
}

/* List item variants */
.m3-list-item-two {
    min-height: 4rem;
}
.m3-list-item-three {
    min-height: 5rem;
    align-items: flex-start;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

/* State layers */
.m3-list-item:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent);
}
.m3-list-item:focus-visible {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}
.m3-list-item:active {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.m3-list-item.selected {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* Leading elements */
.m3-list-leading {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-surface-variant);
}
.m3-list-leading-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.m3-list-leading-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--md-sys-shape-full);
    object-fit: cover;
}

/* Text content */
.m3-list-text {
    flex: 1;
    min-width: 0;
}
.m3-list-headline {
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m3-list-supporting {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Trailing elements */
.m3-list-trailing {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.6875rem;
    font-weight: 500;
}

/* List divider */
.m3-list-divider {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
    margin: 0;
}
.m3-list-divider-inset {
    margin-left: 1rem;
}
.m3-list-divider-full-inset {
    margin-left: 3.5rem;
}

/* List section header */
.m3-list-subheader {
    padding: 0.375rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. THEME SWITCHER COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dark/Light mode toggle in sidebar */
.theme-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.25s ease;
}
.theme-mode-toggle:hover {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}
.theme-mode-toggle:active {
    transform: scale(0.9) rotate(15deg);
}

/* Dark mode toggle icon animation */
.theme-mode-toggle .material-symbols-outlined {
    transition: transform 0.25s ease;
}
.dark .theme-mode-toggle .material-symbols-outlined {
    transform: rotate(180deg);
}

/* Theme color picker (settings page) */
.theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.theme-swatch {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    padding: 0.875rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    overflow: hidden;
}
.theme-swatch:hover {
    transform: translateY(-1px);
    box-shadow: var(--md-sys-elevation-2);
}
.theme-swatch.active {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
.theme-swatch.active::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-swatch-colors {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.625rem;
}
.theme-swatch-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--md-sys-shape-full);
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.theme-swatch:hover .theme-swatch-dot {
    transform: scale(1.1);
}
.theme-swatch-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}
.theme-swatch-desc {
    font-size: 0.6875rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.125rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. CUSTOM SELECT (compact dropdown per list specs)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dropdown items */
.cs-option {
    min-height: 2.5rem;    /* compact list items */
    display: flex;
    align-items: center;
    padding: 0.375rem 0.875rem !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: background-color 0.1s ease;
}

/* Smooth scrollbar for dropdown */
.custom-select-dropdown {
    overscroll-behavior: contain;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. ALERT COMPONENT (inline, not modal)
   Usage: <div class="m3-alert m3-alert-warning"><span class="material-symbols-outlined">...</span><div>...</div></div>
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.m3-alert > .material-symbols-outlined {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}
.m3-alert-title {
    font-weight: 600;
    margin-bottom: 0.125rem;
}
.m3-alert-default {
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
}
.m3-alert-default > .material-symbols-outlined { color: var(--md-sys-color-on-surface-variant); }

.m3-alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a5f;
}
.dark .m3-alert-info {
    background: rgba(30,58,138,0.15);
    border-color: rgba(96,165,250,0.25);
    color: #93c5fd;
}
.m3-alert-info > .material-symbols-outlined { color: #2563eb; }
.dark .m3-alert-info > .material-symbols-outlined { color: #60a5fa; }

.m3-alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #14532d;
}
.dark .m3-alert-success {
    background: rgba(20,83,45,0.15);
    border-color: rgba(74,222,128,0.25);
    color: #86efac;
}
.m3-alert-success > .material-symbols-outlined { color: #16a34a; }
.dark .m3-alert-success > .material-symbols-outlined { color: #4ade80; }

.m3-alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}
.dark .m3-alert-warning {
    background: rgba(120,53,15,0.15);
    border-color: rgba(251,191,36,0.25);
    color: #fcd34d;
}
.m3-alert-warning > .material-symbols-outlined { color: #d97706; }
.dark .m3-alert-warning > .material-symbols-outlined { color: #fbbf24; }

.m3-alert-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #7f1d1d;
}
.dark .m3-alert-error {
    background: rgba(127,29,29,0.15);
    border-color: rgba(248,113,113,0.25);
    color: #fca5a5;
}
.m3-alert-error > .material-symbols-outlined { color: #dc2626; }
.dark .m3-alert-error > .material-symbols-outlined { color: #f87171; }


/* ═══════════════════════════════════════════════════════════════════════════
   14. AVATAR COMPONENT
   Usage: <div class="m3-avatar m3-avatar-md"><img src="..."><span>AB</span></div>
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 600;
    user-select: none;
}
.m3-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
/* Sizes */
.m3-avatar-xs  { width: 1.5rem;  height: 1.5rem;  font-size: 0.5625rem; }
.m3-avatar-sm  { width: 2rem;    height: 2rem;    font-size: 0.6875rem; }
.m3-avatar-md  { width: 2.5rem;  height: 2.5rem;  font-size: 0.875rem;  }
.m3-avatar-lg  { width: 3rem;    height: 3rem;    font-size: 1rem;      }
.m3-avatar-xl  { width: 4rem;    height: 4rem;    font-size: 1.25rem;   }
.m3-avatar-2xl { width: 5rem;    height: 5rem;    font-size: 1.5rem;    }
/* Default (no modifier) */
.m3-avatar:not([class*="m3-avatar-"]) { width: 2rem; height: 2rem; font-size: 0.6875rem; }

/* Avatar group (stacked) */
.m3-avatar-group {
    display: flex;
    flex-direction: row-reverse;
}
.m3-avatar-group .m3-avatar {
    border: 2px solid var(--md-sys-color-surface);
    margin-left: -0.5rem;
}
.m3-avatar-group .m3-avatar:last-child { margin-left: 0; }

/* Status indicator */
.m3-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.m3-avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    border: 2px solid var(--md-sys-color-surface);
}
.m3-avatar-status-online  { background: #16a34a; }
.m3-avatar-status-away    { background: #d97706; }
.m3-avatar-status-busy    { background: #dc2626; }
.m3-avatar-status-offline { background: var(--md-sys-color-outline); }


/* ═══════════════════════════════════════════════════════════════════════════
   15. CHECKBOX & RADIO (custom styled)
   Usage: <label class="m3-check-label"><input type="checkbox" class="m3-checkbox"><span>Label</span></label>
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared base */
.m3-checkbox,
.m3-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-comp-input-bg);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.m3-checkbox:focus-visible,
.m3-radio:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}
.m3-checkbox:disabled,
.m3-radio:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* Checkbox */
.m3-checkbox {
    border-radius: 4px;
}
.m3-checkbox:checked {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}
.m3-checkbox:checked::after {
    content: '';
    position: absolute;
    width: 0.3125rem;
    height: 0.5625rem;
    border: 1.5px solid var(--md-sys-color-on-primary);
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -2px);
}
.m3-checkbox:indeterminate {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}
.m3-checkbox:indeterminate::after {
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 1.5px;
    background: var(--md-sys-color-on-primary);
}

/* Radio */
.m3-radio {
    border-radius: 9999px;
}
.m3-radio:checked {
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
}
.m3-radio:checked::after {
    content: '';
    position: absolute;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--md-sys-color-primary);
}

/* Label wrapper */
.m3-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface);
    user-select: none;
}
.m3-check-label input:disabled ~ * { opacity: 0.38; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════════════
   16. TOOLTIP
   Usage: <div class="m3-tooltip-wrap"><button>Hover</button><span class="m3-tooltip">Tip text</span></div>
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-tooltip-wrap {
    position: relative;
    display: inline-flex;
}
.m3-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 9999;
    max-width: 14rem;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.m3-tooltip-wrap:hover .m3-tooltip,
.m3-tooltip-wrap:focus-within .m3-tooltip {
    opacity: 1;
}
/* Tooltip placement variants */
.m3-tooltip-bottom {
    bottom: auto;
    top: calc(100% + 6px);
}
.m3-tooltip-right {
    bottom: auto;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}
.m3-tooltip-left {
    bottom: auto;
    right: calc(100% + 6px);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. KBD / KEYBOARD SHORTCUT
   Usage: <kbd class="m3-kbd">⌘K</kbd>
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.0625rem 0.3125rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 4px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    box-shadow: 0 1px 0 var(--md-sys-color-outline-variant);
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. CALLOUT / NOTE BLOCK
   Usage: <div class="m3-callout m3-callout-tip"><strong>Tip:</strong> ...</div>
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-callout {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 3px solid;
    background: var(--md-sys-color-surface-container-low);
    border-color: var(--md-sys-color-outline-variant);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--md-sys-color-on-surface);
}
.m3-callout-tip {
    background: #f0fdf4;
    border-color: #16a34a;
    color: #14532d;
}
.dark .m3-callout-tip {
    background: rgba(20,83,45,0.12);
    border-color: #16a34a;
    color: #86efac;
}
.m3-callout-warning {
    background: #fffbeb;
    border-color: #d97706;
    color: #78350f;
}
.dark .m3-callout-warning {
    background: rgba(120,53,15,0.12);
    border-color: #d97706;
    color: #fcd34d;
}
.m3-callout-danger {
    background: #fef2f2;
    border-color: #dc2626;
    color: #7f1d1d;
}
.dark .m3-callout-danger {
    background: rgba(127,29,29,0.12);
    border-color: #dc2626;
    color: #fca5a5;
}
.m3-callout-info {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1e3a5f;
}
.dark .m3-callout-info {
    background: rgba(30,58,138,0.12);
    border-color: #2563eb;
    color: #93c5fd;
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. SEPARATOR WITH TEXT
   Usage: <div class="m3-separator-text"><span>OR</span></div>
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-separator-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.75rem;
    font-weight: 500;
}
.m3-separator-text::before,
.m3-separator-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--md-sys-color-outline-variant);
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. INLINE CODE & CODE BLOCK
   Usage: <code class="m3-code">snippet</code>  or  <pre class="m3-code-block"><code>...</code></pre>
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-code {
    display: inline;
    padding: 0.0625rem 0.3125rem;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
    font-size: 0.8125em;
    border-radius: 4px;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
}

.m3-code-block {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--md-sys-color-on-surface);
    white-space: pre;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. POPOVER / DROPDOWN MENU CONTAINER
   Shared base for floating menus, popovers, command palettes
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-popover {
    position: absolute;
    z-index: 100;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    min-width: 10rem;
    transform-origin: top center;
    transform: scaleY(0.95) translateY(-4px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.15s ease, opacity 0.1s ease;
}
.m3-popover[data-open="true"],
.m3-popover.open {
    transform: scaleY(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.dark .m3-popover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
}

/* Dropdown menu item */
.m3-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    transition: background-color 0.1s ease;
    border-radius: 4px;
    margin: 0.125rem 0.25rem;
}
.m3-menu-item:hover {
    background: var(--md-sys-color-surface-container);
}
.m3-menu-item.destructive {
    color: var(--md-sys-color-error);
}
.m3-menu-item.destructive:hover {
    background: rgba(220, 38, 38, 0.08);
}
.m3-menu-item .material-symbols-outlined {
    font-size: 15px;
    flex-shrink: 0;
    color: var(--md-sys-color-on-surface-variant);
}
.m3-menu-item.destructive .material-symbols-outlined {
    color: inherit;
}
.m3-menu-separator {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
    margin: 0.25rem 0;
}
.m3-menu-label {
    padding: 0.25rem 0.625rem 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
}


/* ═══════════════════════════════════════════════════════════════════════════
   22. FORM FIELD GROUP
   Combines label + input + helper/error into one unit
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.m3-field-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    line-height: 1.4;
}
.m3-field-helper {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.4;
}
.m3-field-error {
    font-size: 0.75rem;
    color: var(--md-sys-color-error);
    line-height: 1.4;
    display: none;
}
.m3-field.has-error .m3-field-error { display: block; }
.m3-field.has-error .m3-input,
.m3-field.has-error .m3-textarea,
.m3-field.has-error .m3-select {
    border-color: var(--md-sys-color-error);
}
.m3-field.has-error .m3-input:focus,
.m3-field.has-error .m3-textarea:focus,
.m3-field.has-error .m3-select:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-error) 15%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   23. STAT CARD (KPI / metric display)
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
}
.m3-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
}
.m3-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--md-sys-color-on-surface);
    font-variant-numeric: tabular-nums;
}
.m3-stat-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.m3-stat-delta-up   { color: #16a34a; }
.m3-stat-delta-down { color: #dc2626; }
.dark .m3-stat-delta-up   { color: #4ade80; }
.dark .m3-stat-delta-down { color: #f87171; }


/* ═══════════════════════════════════════════════════════════════════════════
   24. TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.m3-timeline-item {
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1rem;
    position: relative;
}
.m3-timeline-item:last-child { padding-bottom: 0; }

.m3-timeline-dot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.m3-timeline-dot-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--md-sys-color-surface-container-high);
    border: 2px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.m3-timeline-dot-icon .material-symbols-outlined { font-size: 12px; }
.m3-timeline-dot-line {
    width: 1px;
    flex: 1;
    background: var(--md-sys-color-outline-variant);
    margin-top: 0.25rem;
}
.m3-timeline-item:last-child .m3-timeline-dot-line { display: none; }
.m3-timeline-content {
    flex: 1;
    min-width: 0;
    padding-top: 0.125rem;
}
.m3-timeline-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}
.m3-timeline-meta {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.0625rem;
}
.m3-timeline-body {
    font-size: 0.8125rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.25rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   25. COMMAND PALETTE / SEARCH INPUT
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-command-wrap {
    position: relative;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.dark .m3-command-wrap { box-shadow: 0 8px 30px rgba(0,0,0,0.35); }

.m3-command-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.m3-command-input-row .material-symbols-outlined {
    font-size: 16px;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}
.m3-command-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface);
    font-family: 'Inter', sans-serif;
}
.m3-command-input::placeholder { color: var(--md-sys-color-on-surface-variant); }

.m3-command-list {
    padding: 0.25rem 0;
    max-height: 20rem;
    overflow-y: auto;
}
.m3-command-group-label {
    padding: 0.375rem 0.875rem 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
}
.m3-command-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--md-sys-color-on-surface);
    transition: background-color 0.1s ease;
}
.m3-command-item:hover,
.m3-command-item[data-selected="true"] {
    background: var(--md-sys-color-surface-container);
}
.m3-command-item .material-symbols-outlined {
    font-size: 15px;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}
.m3-command-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.375rem 0.875rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    font-size: 0.6875rem;
    color: var(--md-sys-color-on-surface-variant);
}
.m3-command-shortcut {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   26. BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.8125rem;
    color: var(--md-sys-color-on-surface-variant);
    flex-wrap: wrap;
}
.m3-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0;
}
.m3-breadcrumb-item a {
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.m3-breadcrumb-item a:hover {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container);
}
.m3-breadcrumb-item:last-child a,
.m3-breadcrumb-item:last-child span {
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
}
.m3-breadcrumb-sep {
    padding: 0 0.0625rem;
    color: var(--md-sys-color-outline);
    font-size: 15px;
    user-select: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   27. SHEET / SIDE PANEL (full-height drawer)
   ═══════════════════════════════════════════════════════════════════════════ */

.m3-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.m3-sheet-backdrop.open {
    display: flex;
    opacity: 1;
}

.m3-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    background: var(--md-sys-color-surface-container-lowest);
    border-left: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.05, 0.7, 0.1, 1);
    box-shadow: -8px 0 30px rgba(0,0,0,0.1);
}
.m3-sheet.open { transform: translateX(0); }

/* Sheet sizes */
.m3-sheet-sm  { width: min(24rem, 90vw); }
.m3-sheet-md  { width: min(32rem, 90vw); }
.m3-sheet-lg  { width: min(48rem, 95vw); }

.m3-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}
.m3-sheet-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}
.m3-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}
.m3-sheet-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}

/* ── Mobile card-view for tables ─────────────────────────────────────────── */
/*
 * Add class="m3-table m3-mobile-cards" to a <table>.
 * Add data-label="Column Name" to every <td>.
 * On mobile the thead hides and each <tr> becomes a card.
 */
@media (max-width: 767px) {
    .m3-mobile-cards { display: block; }
    .m3-mobile-cards thead { display: none; }
    .m3-mobile-cards tbody { display: block; }
    .m3-mobile-cards tbody tr {
        display: grid;
        grid-template-columns: 80px 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: 0.5rem 0.75rem;
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 1rem; /* soft corners for mobile */
        margin: 0 0 0.875rem;
        padding: 0.75rem;
        background: var(--md-sys-color-surface-container-lowest);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
        position: relative;
    }
    .m3-mobile-cards tbody tr.hover\:bg-surface-container-low:hover {
        background: var(--md-sys-color-surface-container-low);
    }
    
    .m3-mobile-cards tbody td {
        display: block;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Hide the standard table data-labels since layout implies meaning */
    .m3-mobile-cards tbody td::before { display: none !important; }
    
    /* 1. Checkbox: absolute top-left over image */
    .m3-mobile-cards tbody td:nth-child(1) {
        position: absolute; top: -0.25rem; left: -0.25rem; z-index: 2;
        background: var(--md-sys-color-surface-container-lowest); border-radius: 50%;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    
    /* 2. Photo: Left column spanning rows */
    .m3-mobile-cards tbody td:nth-child(2) {
        grid-column: 1; grid-row: 1 / 4;
    }
    .m3-mobile-cards tbody td:nth-child(2) .w-12.h-12 {
        width: 80px !important; height: 80px !important;
        border-radius: 0.6rem;
    }

    /* 3. Product Name / Title: Top right */
    .m3-mobile-cards tbody td:nth-child(3) {
        grid-column: 2 / 4; grid-row: 1;
        align-self: start;
        padding-top: 0.125rem !important;
    }
    .m3-mobile-cards tbody td:nth-child(3) .text-\[14px\] {
        font-size: 15px !important;
    }

    /* 4. SKU: below title */
    .m3-mobile-cards tbody td:nth-child(4) {
        grid-column: 2 / 4; grid-row: 2; 
    }
    /* Remove padding around inline inputs on mobile so they fit the grid */
    .m3-mobile-cards tbody td:nth-child(4) input { padding-left: 0; padding-right: 0; }

    /* 5. Price: Bottom right, large text */
    .m3-mobile-cards tbody td:nth-child(5) {
        grid-column: 2; grid-row: 3;
        align-self: center;
    }
    .m3-mobile-cards tbody td:nth-child(5) input { padding-left: 0; font-size: 1.125rem !important; }
    
    /* 6. Status: Next to price */
    .m3-mobile-cards tbody td:nth-child(6) {
        grid-column: 3; grid-row: 3;
        align-self: center; justify-self: end;
    }

    /* 7. Actions: Full width bottom row */
    .m3-mobile-cards tbody td:nth-child(7) {
        grid-column: 1 / 4; grid-row: 4;
        margin-top: 0.5rem; padding-top: 0.625rem !important;
        border-top: 1px solid var(--md-sys-color-outline-variant) !important;
    }
    .m3-mobile-cards tbody td:nth-child(7) > div {
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 0.375rem !important;
    }
    .m3-mobile-cards tbody td:nth-child(7) > div button,
    .m3-mobile-cards tbody td:nth-child(7) > div a {
        background: var(--md-sys-color-surface-container);
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 0.5rem;
    }
}

/* ── Accessibility: skip-to-content ──────────────────────────────────────── */
.skip-to-content {
    position: fixed;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: 0 0 0.5rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.1s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--md-sys-color-on-primary);
    outline-offset: 2px;
}

/* ── Mobile Bottom Navigation ─────────────────────────────────────────────── */
#mobileBottomNav {
    display: none; /* hidden on desktop & tablet */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--md-sys-color-surface) 85%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent);
    padding: 0.375rem 0.5rem max(0.5rem, env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
}

@media (max-width: 767px) {
    #mobileBottomNav {
        display: flex;
    }
    body.has-sidebar, body {
        padding-bottom: 4.5rem;
    }
}

/* ── Tablet Persistent Mini-Sidebar (768px-1279px OR Touch Devices >768px) ── */
@media (min-width: 768px) and (max-width: 1279px),
       (min-width: 768px) and (pointer: coarse) {
    aside,
    aside#mainSidebar {
        position: relative !important;
        transform: translateX(0) !important;
        width: 4rem !important; /* w-16 */
        overflow: hidden !important;
    }
    aside .logo-text,
    aside .nav-label,
    aside .sidebar-user-text,
    aside #cpTriggerWrap,
    aside #activeProjectChip,
    #sidebarToggle {
        display: none !important;
    }
    /* Group containers stay visible as icon rails — but the group header
       button collapses to nothing (just a divider) and children become
       flat icon buttons, mirroring desktop sidebar-collapsed behavior. */
    aside .nav-group-toggle {
        width: 2.75rem !important;
        height: 0.5rem !important;
        padding: 0 !important;
        margin: 0.25rem auto !important;
        border-top: 1px solid var(--md-sys-color-outline-variant) !important;
        opacity: 0.5 !important;
        pointer-events: none !important;
    }
    aside .nav-group-items {
        grid-template-rows: 1fr !important;
    }
    aside .nav-group-items-inner {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
    }
    aside #sidebarHeader {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        justify-content: center !important;
    }
    aside #sidebarBrandBlock {
        display: none !important;
    }
    aside nav a {
        width: 2.75rem !important;
        height: 2.75rem !important;
        padding: 0 !important;
        padding-left: 0 !important;
        gap: 0 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 2px auto !important;
    }
    aside nav a .material-symbols-outlined {
        font-size: 24px;
    }
}

/* ── html.pim-touch mini-sidebar — covers 2-in-1 devices (IdeaPad, Surface, etc.)
   where CSS pointer:coarse doesn't fire but JS touch-detect correctly sets the class.
   Scoped to ≥768px so touch phones keep the off-canvas drawer with full nav-groups. ── */
@media (min-width: 768px) {
    html.pim-touch aside,
    html.pim-touch aside#mainSidebar {
        position: relative !important;
        transform: translateX(0) !important;
        width: 4rem !important;
        overflow: hidden !important;
    }
    html.pim-touch aside .logo-text,
    html.pim-touch aside .nav-label,
    html.pim-touch aside .sidebar-user-text,
    html.pim-touch aside #cpTriggerWrap,
    html.pim-touch aside #activeProjectChip,
    html.pim-touch #sidebarToggle {
        display: none !important;
    }
    /* Same as non-touch tablet rule above: group children stay visible
       as flat icons; the group header collapses to a tiny divider. */
    html.pim-touch aside .nav-group-toggle {
        width: 2.75rem !important;
        height: 0.5rem !important;
        padding: 0 !important;
        margin: 0.25rem auto !important;
        border-top: 1px solid var(--md-sys-color-outline-variant) !important;
        opacity: 0.5 !important;
        pointer-events: none !important;
    }
    html.pim-touch aside .nav-group-items {
        grid-template-rows: 1fr !important;
    }
    html.pim-touch aside .nav-group-items-inner {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
    }
    html.pim-touch aside #sidebarHeader {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        justify-content: center !important;
    }
    html.pim-touch aside #sidebarBrandBlock {
        display: none !important;
    }
    html.pim-touch aside nav a {
        width: 2.75rem !important;
        height: 2.75rem !important;
        padding: 0 !important;
        padding-left: 0 !important;
        gap: 0 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 2px auto !important;
    }
    html.pim-touch aside nav a .material-symbols-outlined {
        font-size: 24px;
    }
}

/* Tablet touch: bottom nav + FAB disabled (per UX decision — desktop-class sidebar is enough) */
@media (min-width: 1024px) and (max-width: 2200px) and (hover: none) and (pointer: coarse) {
    #mobileBottomNav { display: none !important; }
    .pim-fab, .pim-fab-menu { display: none !important; }
    body.has-sidebar { padding-bottom: 0; }
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    flex: 1;
    padding: 0.375rem 0.25rem;
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    border-radius: 0.5rem;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-item .material-symbols-outlined {
    font-size: 1.375rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: font-variation-settings 0.15s;
}

.mobile-nav-item:hover,
.mobile-nav-item:focus-visible {
    background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
    color: var(--md-sys-color-primary);
}

.mobile-nav-item--active {
    color: var(--md-sys-color-primary);
}

.mobile-nav-item--active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Mobile slide-up modals (Сеанс 8) ───────────────────────────────────── *
 * On mobile (< 640px) .m3-dialog animates up from the bottom as a sheet.
 * Add .m3-dialog-mobile-sheet to the wrapper (same elem as .m3-dialog)
 * to opt in. Without this class dialogs stay centered (existing behaviour).
 *
 * Structure expected:
 *   <div class="fixed inset-0 z-50 ...">     ← backdrop wrapper
 *     <div class="m3-dialog m3-dialog-mobile-sheet"> ← this
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    /* Backdrop — always align bottom for sheet dialogs */
    .m3-dialog-mobile-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        border-radius: 1rem 1rem 0 0;
        /* Animate slide-up */
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
        max-height: 92dvh;
        overflow-y: auto;
        /* pull handle */
    }
    /* Sheet visible state — added by JS or when parent backdrop is not hidden */
    .m3-dialog-mobile-sheet.sheet-open,
    :not(.hidden) > .m3-dialog-mobile-sheet {
        transform: translateY(0);
    }
    /* Pull handle decoration */
    .m3-dialog-mobile-sheet::before {
        content: '';
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        background: var(--md-sys-color-outline-variant);
        border-radius: 9999px;
        margin: 0.625rem auto 0;
    }
    /* Header in sheet — reduce top padding (handle already gives spacing) */
    .m3-dialog-mobile-sheet .m3-dialog-header {
        padding-top: 0.5rem;
    }
}

/* ── Article TOC ──────────────────────────────────────────────────────── */
.article-toc { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
.article-toc h2 { font-size: 0.875rem; font-weight: 700; margin: 0 0 0.5rem; }
.article-toc ul { list-style: none; padding: 0; margin: 0; }
.article-toc li { padding: 0.25rem 0; }
.article-toc a { font-size: 0.8125rem; color: var(--md-sys-color-primary); text-decoration: none; }
.article-toc a:hover { text-decoration: underline; }
.article-toc ul ul { padding-left: 1rem; }

/* ── PIM Kanban Queue ─────────────────────────────────────────────────── */
.kanban-card { transition: box-shadow 0.15s, transform 0.15s; }
.kanban-card:hover { transform: translateY(-1px); }
.kanban-col { min-height: 100px; }
.sortable-ghost.kanban-card { opacity: 0.3; border: 2px dashed var(--md-sys-color-primary); }
.sortable-chosen.kanban-card { transform: rotate(2deg) scale(1.05); box-shadow: 0 12px 32px rgba(0,0,0,0.2); z-index: 100; }

/* ── Kanban touch-friendly (Сеанс 8) ────────────────────────────────────── *
 * Larger tap targets for card action buttons on touch devices.
 * ─────────────────────────────────────────────────────────────────────────*/
@media (any-pointer: coarse) {
    /* Kanban columns: snap horizontal scroll */
    #boardColumnsWrapper {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    /* Each kanban column: snap point */
    .kanban-column {
        scroll-snap-align: start;
        min-width: calc(100vw - 2rem);
    }
    /* Card action buttons — easier to tap */
    .card-action-btn,
    .kanban-card .m3-icon-btn {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
    /* Drag handle — larger tap zone */
    .card-drag-handle {
        padding: 0.5rem;
    }
}


/* Tablet & Touch styles removed in favor of Tailwind responsive utilities */

/* ── Small tablet / large phone (≤1024px) ────────────────────────────── */
@media (max-width: 1024px) {
    /* Touch targets */
    .tab-btn { min-height: 40px; padding-left: 0.75rem; padding-right: 0.75rem; }
    .m3-icon-btn { min-width: 40px; min-height: 40px; }
    input[type="checkbox"] { width: 1.125rem; height: 1.125rem; }

    /* Table cells */
    table td, table th { padding: 0.625rem 0.5rem; }

    /* Modals - full width */
    .fixed.z-50 > div[class*="max-w-"] {
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem;
    }

    /* Sidebar panels */
    #aiProgressPanel { width: 100% !important; max-width: 320px; }

    /* Bulk bar */
    #bulkFloatingBar { bottom: 4rem; }
    #bulkFloatingBar button { padding: 0.5rem 0.75rem; font-size: 0.6875rem; }

    /* Categories sidebar - narrower */
    .tab-content .w-full.md\:w-72 { max-width: 250px; }
}

@media (max-width: 768px) {
    /* Tabs scroll horizontally */
    #pimTabsContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #pimTabsContainer::-webkit-scrollbar { display: none; }

    /* Stack layouts */
    .tab-content .flex.flex-col.md\:flex-row { flex-direction: column !important; }
    .tab-content .w-full.md\:w-72 { width: 100% !important; max-width: none !important; max-height: 40vh; }

    /* Modals truly full screen */
    .fixed.z-50 > div[class*="max-w-"] {
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Hide less important columns */
    table th:nth-child(n+5), table td:nth-child(n+5) { display: none; }

    /* Coverage bar - stack */
    #pimDashboard .flex.items-center.gap-4 { flex-wrap: wrap; gap: 0.5rem; }
    #dashCoverage { flex-wrap: wrap; }

    .note-editable { min-height: 200px !important; }
    .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
}

/* ── Touch devices only (mobile + tablet, NOT desktop) ───────────────── */
@media (any-pointer: coarse) {
    /* Accurate viewport height */
    body { height: 100vh; height: 100dvh; }

    /* Tab content scrollable */
    .tab-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Pagination — sticky at bottom of scroll container (NOT fixed) */
    .queue-pagination,
    [id$="Pagination"]:not(:empty) {
        position: sticky; bottom: 0; z-index: 20;
        background: var(--md-sys-color-surface-container-lowest);
        border-top: 1px solid var(--md-sys-color-outline-variant);
        padding: 0.5rem 1rem;
    }
    .queue-pagination button,
    [id$="Pagination"] button {
        min-width: 40px; min-height: 40px; font-size: 0.875rem;
    }

    /* Touch targets */
    .tab-btn { min-height: 44px; font-size: 0.8125rem; }
    .m3-icon-btn { min-width: 44px; min-height: 44px; }
    .m3-btn-filled, .m3-btn-text { min-height: 40px; padding: 0.5rem 1rem; }
    input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
    select.m3-select { min-height: 40px; }

    /* Show FAB */
    .pim-fab { display: flex; }

    /* Coverage toggle button + collapsible dashboard on touch */
    .coverage-toggle-btn { display: flex !important; }
    #pimDashboard { transition: max-height 0.3s ease, padding 0.3s ease; overflow: hidden; }
    #pimDashboard:not(.expanded) { max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; }
    #pimDashboard.expanded { max-height: 300px; }

    /* Scrollable tab bar fade indicator */
    #pimTabsContainer::after {
        content: '';
        display: block;
        position: absolute;
        right: 0; top: 0; bottom: 0;
        width: 24px;
        background: linear-gradient(to left, var(--md-sys-color-surface), transparent);
        pointer-events: none;
    }
}

/* ── Portrait mode on touch devices ──────────────────────────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    /* Stack categories sidebar */
    .tab-content .flex.flex-col.md\:flex-row { flex-direction: column !important; }
    .tab-content .w-full.md\:w-72,
    .tab-content .w-72 { width: 100% !important; max-width: none !important; max-height: 35vh; border-right: none !important; border-bottom: 1px solid var(--md-sys-color-outline-variant); }

    /* Analogs 3-column layout → stack (only when pim-tablet.js is NOT active) */
    html:not(.pim-touch) #analogsWizardStep2 .flex-1.flex.min-h-0 { flex-direction: column !important; }
    html:not(.pim-touch) #analogsWizardStep2 .w-72, html:not(.pim-touch) #analogsWizardStep2 .w-56 { width: 100% !important; max-height: 30vh; border-right: none !important; border-bottom: 1px solid var(--md-sys-color-outline-variant); }

    #artSeoSidebar { display: none; }
}

/* ── FAB (Floating Action Button) for touch ─────────────────────────────── */
.pim-fab {
    display: none; position: fixed; bottom: 6rem; right: 1rem; z-index: 40;
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--md-sys-color-primary); color: white;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    align-items: center; justify-content: center; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pim-fab:active { transform: scale(0.92); }
.pim-fab-menu {
    display: none; position: fixed; bottom: 9rem; right: 1rem; z-index: 39;
    flex-direction: column; gap: 0.5rem; align-items: flex-end;
}
.pim-fab-menu.open { display: flex; }
.pim-fab-action {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; border-radius: 12px;
    background: var(--md-sys-color-surface-container-lowest);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid var(--md-sys-color-outline-variant);
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
    color: var(--md-sys-color-on-surface);
}
.pim-fab-action .material-symbols-outlined { font-size: 18px; }

/* ── Fullscreen mode ───────────────────────────────────────────────────── */
body.pim-fullscreen > aside,
body.pim-fullscreen > nav,
body.pim-fullscreen #sidebar { display: none !important; }
body.pim-fullscreen main { margin-left: 0 !important; width: 100% !important; }

/* ── Compact table mode ────────────────────────────────────────────────── */
.compact-tables table td, .compact-tables table th { padding: 0.375rem 0.375rem; font-size: 0.6875rem; }
.compact-tables .text-sm { font-size: 0.6875rem; }
.compact-tables .text-xs { font-size: 0.625rem; }

/* ── Pull-to-refresh indicator ─────────────────────────────────────────── */
.ptr-indicator {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%);
    z-index: 50; background: var(--md-sys-color-primary); color: white;
    padding: 0.5rem 1rem; border-radius: 0 0 12px 12px; font-size: 0.75rem;
    font-weight: 600; transition: transform 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.ptr-indicator.visible { transform: translateX(-50%) translateY(0); }

/* ── Swipe action hints ────────────────────────────────────────────────── */
.swipe-action-bg {
    position: absolute; top: 0; bottom: 0; right: 0;
    display: flex; align-items: center; padding: 0 1rem;
    border-radius: 0 0.75rem 0.75rem 0; font-size: 0.625rem; font-weight: 700; color: white;
}

/* ── Prose-like typography for WYSIWYG editors & content previews ──────── */
.prose h1, .note-editable h1 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.5rem; line-height: 1.3; }
.prose h2, .note-editable h2 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 0.5rem; line-height: 1.3; }
.prose h3, .note-editable h3 { font-size: 1.1rem; font-weight: 600; margin: 0.75rem 0 0.375rem; line-height: 1.3; }
.prose h4, .note-editable h4 { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 0.25rem; line-height: 1.3; }
.prose p, .note-editable p { margin: 0.5rem 0; }
.prose ul, .note-editable ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
.prose ol, .note-editable ol { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
.prose li, .note-editable li { margin: 0.25rem 0; }
.prose table, .note-editable table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
.prose th, .prose td, .note-editable th, .note-editable td { border: 1px solid var(--md-sys-color-outline-variant); padding: 0.375rem 0.5rem; text-align: left; }
.prose th, .note-editable th { background: var(--md-sys-color-surface-container); font-weight: 600; }
.prose b, .prose strong, .note-editable b, .note-editable strong { font-weight: 700; }
.prose a, .note-editable a { color: var(--md-sys-color-primary); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   SUMMERNOTE DARK THEME FIX
   Summernote injects inline styles with black text. We force readable colors.
   ══════════════════════════════════════════════════════════════════════════ */
.dark .note-editor {
    border-color: var(--md-sys-color-outline-variant);
}
.dark .note-editor .note-toolbar {
    background: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-outline-variant);
}
.dark .note-editor .note-toolbar .note-btn {
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    border-color: var(--md-sys-color-outline-variant);
}
.dark .note-editor .note-toolbar .note-btn:hover,
.dark .note-editor .note-toolbar .note-btn.active {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}
.dark .note-editable {
    background: var(--md-sys-color-surface-container-low) !important;
    color: var(--md-sys-color-on-surface) !important;
}
/* Override inline black text from Summernote paste/generation.
   Summernote uses both style="color:..." AND <font color="#000"> */
.dark .note-editable *:not(a) {
    color: inherit !important;
}
.dark .note-editable font[color] {
    color: inherit !important;
}
.dark .note-editable span[style*="color"] {
    color: inherit !important;
}
.dark .note-editable a {
    color: var(--md-sys-color-primary) !important;
}
/* Prose blocks inside dark mode (review diff view etc) */
.dark .prose *:not(a) {
    color: inherit !important;
}
/* Summernote statusbar */
.dark .note-editor .note-statusbar {
    background: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-outline-variant);
}
.dark .note-editor .note-statusbar .note-resizebar {
    border-top-color: var(--md-sys-color-outline-variant);
}
/* Summernote dropdown */
.dark .note-editor .note-dropdown-menu {
    background: var(--md-sys-color-surface-container-lowest);
    border-color: var(--md-sys-color-outline-variant);
}
.dark .note-editor .note-dropdown-item {
    color: var(--md-sys-color-on-surface);
}
.dark .note-editor .note-dropdown-item:hover {
    background: var(--md-sys-color-surface-container);
}
/* Prose in dark mode — ensure readable text */
.dark .prose,
.dark .prose * {
    color: var(--md-sys-color-on-surface);
}
.dark .prose a {
    color: var(--md-sys-color-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM TABLET OPTIMIZATION (Android 10"-12" tablets)
   Target: 800-1280px (portrait) / 1024-1920px (landscape)
   Touch-first, larger targets, better space usage
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PIM Header: reorganize for tablet touch ─────────────────────────── */
@media (any-pointer: coarse) {
    /* PIM topbar — wrap to two rows on narrow tablets */
    .pim-topbar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
    }
    /* Title section */
    .pim-topbar > .flex.items-center.gap-3:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }
    .pim-topbar h1 { font-size: 0.9375rem; }

    /* Action buttons group — larger touch targets */
    .pim-topbar .p-1\.5 {
        padding: 0.625rem;
        min-width: 44px;
        min-height: 44px;
    }
    .pim-topbar .p-1\.5 .material-symbols-outlined {
        font-size: 22px;
    }

    /* Project selector — taller */
    .pim-topbar select#projectSelector {
        min-height: 44px;
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ── PIM Tabs: bigger for tablet ─────────────────────────────────────── */
@media (any-pointer: coarse) {
    #pimTabsContainer {
        gap: 0;
        padding: 0 0.25rem;
    }
    #pimTabsContainer .tab-btn {
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
        min-height: 48px;
        gap: 0.5rem;
    }
    #pimTabsContainer .tab-btn .material-symbols-outlined {
        font-size: 20px;
    }
    /* Active tab indicator — thicker */
    #pimTabsContainer .tab-btn.active {
        border-bottom-width: 3px;
    }
}

/* ── PIM Filters: tablet-friendly ────────────────────────────────────── */
@media (any-pointer: coarse) {
    /* Filter bar */
    #tab-products .flex.items-center.gap-2.px-3.py-2 {
        flex-wrap: wrap;
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }
    /* Search input */
    #filterSearch {
        min-height: 44px;
        font-size: 0.875rem;
        padding-left: 2.25rem;
    }
    #filterSearch + .material-symbols-outlined,
    #filterSearch ~ .material-symbols-outlined {
        font-size: 20px;
    }
    /* Filter selects */
    #filterCategory,
    #filterManufacturer,
    #filterStatus {
        min-height: 44px;
        font-size: 0.875rem;
    }
    /* Advanced filters toggle */
    #advFiltersToggle {
        min-width: 44px;
        min-height: 44px;
    }
    /* Advanced filters row */
    #advFiltersRow {
        padding: 0.625rem 0.75rem;
        gap: 0.75rem;
    }
    #advFiltersRow input[type="number"] {
        min-height: 40px;
        font-size: 0.875rem;
        width: 5rem;
    }
    #advFiltersRow label {
        font-size: 0.8125rem;
        min-height: 40px;
        display: flex;
        align-items: center;
    }
    #advFiltersRow button {
        min-height: 40px;
        font-size: 0.8125rem;
    }
    /* View toggle buttons */
    #btnViewList, #btnViewGrid {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
    #btnViewList .material-symbols-outlined,
    #btnViewGrid .material-symbols-outlined {
        font-size: 22px;
    }
}

/* ── PIM Product Table: tablet optimization ──────────────────────────── */
@media (any-pointer: coarse) {
    /* Table rows — more padding, larger touch zone */
    #productsTable td {
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }
    #productsTable th {
        padding: 0.625rem 0.5rem;
        font-size: 0.6875rem;
    }
    /* Checkbox column — larger */
    #productsTable input[type="checkbox"] {
        width: 1.375rem;
        height: 1.375rem;
    }
    /* Product name cell — wider */
    #productsTable th:nth-child(3),
    #productsTable td:nth-child(3) {
        min-width: 200px;
    }
    /* Action buttons in table rows */
    #productsTable .m3-icon-btn,
    #productsTable button[class*="p-1"] {
        min-width: 40px;
        min-height: 40px;
        padding: 0.375rem;
    }
    /* Product image — slightly larger */
    #productsTable td:nth-child(2) img,
    #productsTable td:nth-child(2) div {
        width: 44px;
        height: 44px;
    }
    /* Status badges — bigger tap target */
    #productsTable .rounded-full {
        min-height: 28px;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ── PIM Product Grid: tablet columns ────────────────────────────────── */
@media (any-pointer: coarse) {
    #productsGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
}
@media (any-pointer: coarse) and (orientation: landscape) {
    #productsGrid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── PIM Pagination: tablet touch ────────────────────────────────────── */
@media (any-pointer: coarse) {
    #tab-products .flex.flex-wrap.justify-between {
        padding: 0.75rem;
    }
    #tab-products .flex.flex-wrap.justify-between .text-xs {
        font-size: 0.8125rem;
    }
    #pagination button {
        min-width: 44px;
        min-height: 44px;
        font-size: 0.875rem;
    }
}

/* ── PIM Categories Panel: tablet ────────────────────────────────────── */
@media (any-pointer: coarse) {
    /* Category list items — bigger touch targets */
    #catListContainer > div,
    #catListContainer button,
    #catListContainer a {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
    /* Category search */
    #catSearch {
        min-height: 44px;
        font-size: 0.875rem;
    }
    /* Category filter pills */
    .cat-desc-filter {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
        min-height: 36px;
    }
    /* Category editor form inputs */
    #tab-categories .m3-input,
    #tab-categories .m3-select,
    #tab-categories textarea {
        min-height: 44px;
        font-size: 0.875rem;
    }
}
/* Landscape: side-by-side categories */
@media (any-pointer: coarse) and (orientation: landscape) {
    #tab-categories {
        flex-direction: row !important;
    }
    #tab-categories > .w-full.md\:w-72 {
        width: 280px !important;
        max-width: 280px !important;
        max-height: none !important;
    }
}

/* ── PIM Bulk Floating Bar: tablet ───────────────────────────────────── */
@media (any-pointer: coarse) {
    #bulkFloatingBar > div {
        border-radius: 1rem;
    }
    #bulkFloatingBar button {
        min-height: 48px;
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
        gap: 0.5rem;
    }
    #bulkFloatingBar button .material-symbols-outlined {
        font-size: 22px;
    }
    #bulkFloatingBar .px-5.py-3:first-child {
        padding: 0.75rem 1.25rem;
    }
    #bulkFloatingBar #bulkCount {
        min-width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
}

/* ── PIM Modals: tablet touch-friendly (fallback when JS not active) ── */
@media (any-pointer: coarse) {
    /* When pim-tablet.js handles fullscreen, skip these */
    html:not(.pim-touch) #textGenModal > div,
    html:not(.pim-touch) #reviewModal > div,
    html:not(.pim-touch) #imageModal > div {
        max-width: calc(100vw - 1.5rem) !important;
        max-height: calc(100vh - 2rem) !important;
        margin: 0.75rem;
    }

    /* Modal headers — larger touch targets */
    #textGenModal .px-5.py-3,
    #reviewModal .px-5.py-3,
    #imageModal .px-5.py-3 {
        padding: 0.875rem 1.25rem;
    }
    #textGenModal h2 { font-size: 1.125rem; }
    #textGenModal h3, #reviewModal h3, #imageModal h3 { font-size: 1.0625rem; }

    /* Modal close buttons */
    #textGenModal button[onclick*="close"],
    #reviewModal button[onclick*="close"],
    #imageModal button[onclick*="close"] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Text Gen modal — settings form */
    #textGenModal .m3-input,
    #textGenModal .m3-select,
    #textGenModal select,
    #textGenModal textarea {
        min-height: 44px;
        font-size: 0.875rem;
    }
    #textGenModal label {
        font-size: 0.8125rem;
    }

    /* Length selector buttons */
    #textGenLengthGroup button {
        min-height: 44px;
        font-size: 0.8125rem;
    }

    /* Generate button — bigger */
    #btnSubmitGen {
        min-height: 52px;
        font-size: 0.9375rem;
        padding: 0.75rem 1.5rem;
    }

    /* Image modal grid — bigger thumbnails */
    #imageGrid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem;
    }

    /* Review modal buttons */
    #reviewModal button {
        min-height: 44px;
    }

    /* Modal action buttons */
    #imageModal .px-5.py-3:last-child button,
    #reviewModal .px-5.py-3:last-child button {
        min-height: 48px;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* ── Text Gen modal: stack columns in portrait ───────────────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    #textGenModal .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    }
    #textGenModal .w-full.md\:w-1\/2 {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
    }
    /* Limit settings height so preview is visible */
    #textGenModal .w-full.md\:w-1\/2:first-child {
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* ── PIM Series / Mfr-Cat / Filter Pages tables: tablet ──────────────── */
@media (any-pointer: coarse) {
    #tab-series table td,
    #tab-mfr-cat table td,
    #tab-filter-pages table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }
    #tab-series table th,
    #tab-mfr-cat table th,
    #tab-filter-pages table th {
        padding: 0.625rem 0.5rem;
    }
    /* Action buttons */
    #tab-series button,
    #tab-mfr-cat button,
    #tab-filter-pages button {
        min-height: 40px;
    }
    /* Series/Mfr-Cat edit modals */
    #seriesEditorModal > div,
    #mfrCatEditModal > div,
    #fpEditModal > div {
        max-width: calc(100vw - 1.5rem) !important;
    }
    #seriesEditorModal .m3-input,
    #seriesEditorModal .m3-select,
    #mfrCatEditModal .m3-input,
    #mfrCatEditModal .m3-select,
    #fpEditModal .m3-input,
    #fpEditModal .m3-select {
        min-height: 44px;
        font-size: 0.875rem;
    }
}

/* ── PIM Queue Kanban: tablet landscape optimized ────────────────────── */
@media (any-pointer: coarse) and (orientation: landscape) {
    /* In landscape, show 3-4 columns side by side */
    .kanban-column {
        min-width: 260px;
        scroll-snap-align: none;
    }
    #boardColumnsWrapper {
        scroll-snap-type: none;
    }
}

/* ── PIM Import/Export: tablet ───────────────────────────────────────── */
@media (any-pointer: coarse) {
    #tab-import-export .m3-input,
    #tab-import-export .m3-select,
    #tab-import-export button {
        min-height: 44px;
        font-size: 0.875rem;
    }
    #tab-import-export input[type="file"] {
        min-height: 44px;
        padding: 0.5rem;
    }
}

/* ── PIM AI Progress Panel: tablet ───────────────────────────────────── */
@media (any-pointer: coarse) {
    #aiProgressPanel {
        width: 340px !important;
    }
    #aiProgressPanel button {
        min-height: 40px;
    }
}

/* ── PIM Product row action buttons: bigger touch targets ────────────── */
@media (any-pointer: coarse) {
    /* Action buttons in product table (w-9 h-9 = 36px → 44px) */
    #productsTable td .w-9.h-9,
    #productsTable td button[class*="w-9"] {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 44px;
        min-height: 44px;
    }
    #productsTable td .w-9.h-9 .material-symbols-outlined {
        font-size: 22px;
    }
    /* Product checkbox — bigger */
    .product-checkbox {
        width: 1.375rem !important;
        height: 1.375rem !important;
    }
    /* Thumbnail strip — bigger thumbs for touch */
    .grid-thumb-item {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    .grid-thumb-item + div[class*="shrink-0"] {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    /* Inline price input — bigger */
    .product-inline-edit {
        min-height: 40px;
        font-size: 0.9375rem;
    }
    /* Status badge — bigger touch target */
    #productsTable td .inline-flex.items-center {
        min-height: 36px;
        padding: 0.375rem 0.875rem;
        font-size: 0.75rem;
    }
}

/* ── Global: prevent text selection flicker on touch drag ────────────── */
@media (any-pointer: coarse) {
    #productsTable tbody,
    .kanban-card,
    .sortable-item {
        -webkit-user-select: none;
        user-select: none;
    }
    /* Smooth momentum scrolling everywhere */
    .overflow-y-auto,
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    /* Hide scrollbars on touch (cleaner look) */
    .custom-scrollbar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* ── Tablet landscape: maximize content area ─────────────────────────── */
@media (any-pointer: coarse) and (orientation: landscape) {
    /* PIM content — use full height minus header/tabs */
    #tab-products {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    /* Compact header in landscape */
    .pim-topbar {
        padding: 0.375rem 0.75rem;
    }
    .pim-topbar h1 { font-size: 0.875rem; }
    .pim-topbar .m3-breadcrumb { display: none !important; }

    /* Tabs — slightly smaller in landscape to save vertical space */
    #pimTabsContainer .tab-btn {
        padding: 0.5rem 0.875rem;
        min-height: 42px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM ANALOGS — TABLET STEP-BY-STEP LAYOUT
   Step 2 has 3 fixed-width columns that don't fit on tablet portrait.
   Solution: stack vertically with collapsible sections.
   ══════════════════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse) {
    /* Wizard step buttons — bigger */
    .analogs-step-btn {
        min-height: 44px;
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
    }
    /* Step indicators chevrons */
    #analogsSearchView > div:first-child .material-symbols-outlined {
        font-size: 20px;
    }

    /* Step 1: Category checkboxes — bigger targets */
    #analogsCategoryList label {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
    }
    #analogsCategoryList input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }
    #analogsCategoryList label span {
        font-size: 0.875rem;
    }
    /* Step 1 Next button — sticky at bottom so always reachable */
    #analogsStep1Next {
        min-height: 48px;
        font-size: 0.875rem;
        padding: 0.625rem 1.5rem;
    }
    html.pim-touch #analogsWizardStep1 > .mt-3.flex.justify-end {
        position: sticky;
        bottom: 0;
        background: var(--md-sys-color-surface);
        padding-top: 0.5rem;
        padding-bottom: 0.25rem;
        margin-top: 0.5rem !important;
        z-index: 5;
    }
    html.pim-touch #analogsCategoryList {
        padding: 0.5rem !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Step 2: When pim-tablet.js is active, it manages layout via JS.
       These CSS rules only apply as fallback for non-JS touch. */
    html:not(.pim-touch) #analogsWizardStep2 > .flex-1.flex.min-h-0 {
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    html:not(.pim-touch) #analogsWizardStep2 .w-72 {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
    }
    html:not(.pim-touch) #analogsWizardStep2 .w-56 {
        width: 100% !important;
        border-right: none !important;
    }

    /* When pim-tablet.js IS active — ensure lists fill available space */
    html.pim-touch #attributesCheckboxes,
    html.pim-touch #crossAttrGroups,
    html.pim-touch #excludedMfrList,
    html.pim-touch #analogsManufacturerList {
        max-height: none !important;
        min-height: 150px;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Section headers — bigger, touch-friendly */
    #analogsWizardStep2 .text-\[11px\].font-bold.uppercase {
        font-size: 0.8125rem;
        padding: 0.25rem 0;
    }
    #analogsWizardStep2 .text-\[11px\].font-bold.uppercase .material-symbols-outlined {
        font-size: 18px;
    }

    /* Attribute checkboxes — bigger */
    #attributesCheckboxes label {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    #attributesCheckboxes input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }
    #attributesCheckboxes label span {
        font-size: 0.875rem;
    }
    /* Manufacturer checkboxes — bigger */
    #analogsManufacturerList label {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    #analogsManufacturerList input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }
    /* Excluded manufacturers */
    #excludedMfrList label {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    #excludedMfrList input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }
    /* Add cross-group button — bigger */
    #analogsWizardStep2 button[onclick="addCrossGroup()"] {
        min-height: 44px;
        font-size: 0.875rem;
    }
    /* Bottom nav buttons */
    #analogsWizardStep2 .absolute.bottom-0 button {
        min-height: 48px;
        font-size: 0.875rem;
        padding: 0.625rem 1.5rem;
    }
    /* Saved patterns — bigger pills */
    #analogsPatternsList button,
    #btnSavePattern {
        min-height: 40px;
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }

    /* Step 3: Results — bigger cards */
    #analogsSearchResults .text-sm { font-size: 0.875rem; }
    #analogsSearchResults .text-xs { font-size: 0.8125rem; }
    #analogsSearchResults .text-\[10px\] { font-size: 0.75rem; }
    /* Card filter buttons */
    #analogsCardFilter button {
        min-height: 40px;
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }
    /* Analog candidate cards — MUCH more touch-friendly */
    .analog-card {
        padding: 6px !important;
    }
    .analog-card .flex.gap-0\.5 {
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
    }
    .analog-card button[data-action="approve"],
    .analog-card button[data-action="reject"],
    .analog-card button[data-action="remove-search"] {
        min-height: 44px !important;
        padding: 0.5rem !important;
        font-size: 0.8125rem !important;
        border-radius: 0.5rem !important;
    }
    .analog-card button[data-action] .material-symbols-outlined {
        font-size: 20px !important;
    }
    /* Candidate grid — fewer columns but larger cards */
    html.pim-touch #analogsSearchResults .product-row .grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 0.5rem !important;
    }
    /* Bulk-select checkbox — hover doesn't work on touch, show always */
    html.pim-touch .analog-card .analog-bulk-check {
        opacity: 1 !important;
        width: 1.25rem !important;
        height: 1.25rem !important;
        top: 6px !important;
        left: 6px !important;
    }
    /* "Approve all" button in product row */
    .product-row button[data-action="approve-all"] {
        min-height: 40px !important;
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Step 3 filter/bulk bar — wrap, bigger buttons */
    html.pim-touch #analogsSearchResults > .flex.items-center.gap-2.mb-3,
    html.pim-touch #analogsSearchResults > div:first-child {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    html.pim-touch #analogsCardFilter {
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
    }
    html.pim-touch #analogsCardFilter button {
        min-height: 40px !important;
    }
    html.pim-touch [data-action="back-to-filters"],
    html.pim-touch [data-action="bulk-approve-checked"],
    html.pim-touch [data-action="toggle-processed"] {
        min-height: 40px !important;
        padding: 0.5rem 0.875rem !important;
        font-size: 0.8125rem !important;
    }

    /* Pagination buttons — 44x44 touch targets */
    html.pim-touch #analogsSearchResults [data-action^="goto-page"],
    html.pim-touch #analogsSearchResults .flex.items-center.justify-center.gap-2 button {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 0.875rem !important;
    }

    /* Product-row attributes — bigger readable text on touch */
    html.pim-touch .product-row .text-\[9px\],
    html.pim-touch .product-row .text-\[10px\] {
        font-size: 0.75rem !important;
    }
    html.pim-touch .product-row .attr-edit-input {
        font-size: 0.8125rem !important;
        min-height: 32px !important;
        padding: 0.25rem 0.375rem !important;
    }
}

/* Step 3 product-row — stack vertically on portrait tablets */
@media (any-pointer: coarse) and (orientation: portrait) {
    html.pim-touch .product-row > .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
    }
    html.pim-touch .product-row .w-full.sm\:w-56 {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
        display: grid !important;
        grid-template-columns: 96px 1fr !important;
        gap: 0.625rem !important;
        align-items: start !important;
    }
    /* Main product image — left, compact */
    html.pim-touch .product-row .w-full.sm\:w-56 > img {
        grid-row: 1 / span 99;
        grid-column: 1;
        width: 96px !important;
        height: 96px !important;
        margin-bottom: 0 !important;
    }
    /* All non-image children — right column */
    html.pim-touch .product-row .w-full.sm\:w-56 > *:not(img) {
        grid-column: 2;
    }
    /* Attributes block spans full width below the 2-column header */
    html.pim-touch .product-row .w-full.sm\:w-56 > .mt-1\.5.pt-1\.5 {
        grid-column: 1 / -1 !important;
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
    }
}
/* Landscape: keep side-by-side for step 2 if there's room */
/* Landscape side-by-side — only when pim-tablet.js is NOT managing layout */
@media (any-pointer: coarse) and (orientation: landscape) and (min-width: 1024px) {
    html:not(.pim-touch) #analogsWizardStep2 > .flex-1.flex.min-h-0 {
        flex-direction: row !important;
        overflow-y: hidden !important;
    }
    html:not(.pim-touch) #analogsWizardStep2 > .flex-1.flex.min-h-0 > div {
        flex: 1 1 0% !important;
        overflow-y: auto !important;
    }
    html:not(.pim-touch) #analogsWizardStep2 .w-72 {
        width: 260px !important;
        flex: 0 0 260px !important;
        border-right: 1px solid var(--md-sys-color-outline-variant) !important;
        border-bottom: none !important;
    }
    html:not(.pim-touch) #analogsWizardStep2 .w-56 {
        width: 220px !important;
        flex: 0 0 220px !important;
    }
    html:not(.pim-touch) #attributesCheckboxes,
    html:not(.pim-touch) #crossAttrGroups,
    html:not(.pim-touch) #excludedMfrList,
    html:not(.pim-touch) #analogsManufacturerList {
        max-height: none !important;
        flex: 1 1 auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM KANBAN — TABLET OPTIMIZATION
   Bigger cards, bigger text, bigger review buttons
   ══════════════════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse) {
    /* Kanban columns — wider */
    #queueKanbanView .w-64 {
        width: 280px;
    }
    /* Kanban cards — bigger padding, text */
    .kanban-card {
        padding: 0.875rem !important;
    }
    .kanban-card .text-\[9px\] {
        font-size: 0.75rem;
    }
    .kanban-card .text-\[10px\] {
        font-size: 0.8125rem;
    }
    /* Review button in kanban — much bigger */
    .kanban-card .flex.gap-1 button {
        min-height: 44px;
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
    }
    /* Kanban column headers */
    #queueKanbanView .px-3.py-2 {
        padding: 0.625rem 0.75rem;
    }
    #queueKanbanView .text-xs.font-bold {
        font-size: 0.875rem;
    }
    #queueKanbanView .text-\[10px\] {
        font-size: 0.75rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM QUEUE TABLE — TABLET
   ══════════════════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse) {
    /* Queue filter pills — bigger */
    .queue-filter-btn {
        min-height: 40px;
        font-size: 0.8125rem !important;
        padding: 0.375rem 0.875rem !important;
    }
    /* Queue table rows */
    #queueTbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }
    #queueTbody button {
        min-height: 40px;
        min-width: 40px;
    }
    /* Queue actions bar */
    #tab-queue .ml-auto button {
        min-height: 40px;
        font-size: 0.8125rem;
    }
    /* View toggle — bigger */
    #queueViewTable, #queueViewKanban {
        min-width: 40px;
        min-height: 40px;
        padding: 0.5rem;
    }
    /* "Одобрить все" and "Очистить" buttons */
    #tab-queue .m3-btn-text {
        min-height: 44px;
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM SERIES TABLE — TABLET
   ══════════════════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse) {
    /* Series table rows */
    #seriesListBody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }
    #seriesListBody th {
        padding: 0.625rem 0.5rem;
    }
    /* Series checkboxes */
    #seriesListBody input[type="checkbox"],
    #seriesSelectAll {
        width: 1.25rem;
        height: 1.25rem;
    }
    /* Series action buttons */
    #seriesListBody .m3-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }
    #seriesListBody .m3-icon-btn .material-symbols-outlined {
        font-size: 22px;
    }
    /* Series header filters */
    #seriesSearch {
        min-height: 44px;
        font-size: 0.875rem;
    }
    #seriesMfgFilter {
        min-height: 44px;
        font-size: 0.875rem;
    }
    /* Series "Все пустые" and "Выбранные" buttons */
    #tab-series .m3-btn-filled {
        min-height: 44px;
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    /* Series badge clicks */
    #seriesListBody .m3-badge {
        min-height: 32px;
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
    }
    /* Hide less critical columns on portrait */
}
@media (any-pointer: coarse) and (orientation: portrait) {
    /* Hide ID and Model columns on series table in portrait */
    #tab-series table th:nth-child(2),
    #tab-series table td:nth-child(2) {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM CATEGORIES — TABLET LIST ITEMS
   ══════════════════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse) {
    /* Category list items in left panel */
    #catListContainer > div {
        min-height: 48px;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: 0.5rem;
    }
    #catListContainer > div input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }
    /* Category filter pills */
    .cat-desc-filter {
        min-height: 36px;
        font-size: 0.8125rem;
        padding: 0.25rem 0.75rem;
    }
    /* Category AI generate button */
    #catGenBtn {
        min-height: 40px;
        font-size: 0.8125rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM MFR-CAT / FILTER PAGES — TABLET
   ══════════════════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse) {
    /* Manufacturer-category table */
    #tab-mfr-cat table td,
    #tab-filter-pages table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }
    #tab-mfr-cat table button,
    #tab-filter-pages table button {
        min-height: 44px;
        min-width: 44px;
    }
    /* Generate buttons */
    #tab-mfr-cat .m3-btn-filled,
    #tab-filter-pages .m3-btn-filled {
        min-height: 44px;
        font-size: 0.875rem;
    }
    /* Checkboxes */
    #tab-mfr-cat input[type="checkbox"],
    #tab-filter-pages input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }
    /* Filter/search inputs */
    #tab-mfr-cat .m3-input,
    #tab-mfr-cat .m3-select,
    #tab-filter-pages .m3-input,
    #tab-filter-pages .m3-select {
        min-height: 44px;
        font-size: 0.875rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   REVIEW MODAL — TABLET OPTIMIZATION
   ══════════════════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse) {
    /* Review modal — nearly fullscreen (fallback, JS overrides when active) */
    html:not(.pim-touch) #reviewModal > div {
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
        margin: 0.5rem;
        border-radius: 1rem;
    }
    /* Summernote in review — taller */
    #reviewModal .note-editable {
        min-height: 250px !important;
    }
    /* Summernote toolbar — bigger buttons */
    #reviewModal .note-toolbar .note-btn {
        min-width: 40px;
        min-height: 40px;
    }
    /* Diff view — stack on portrait */
    #reviewDiffView {
        gap: 0.75rem;
    }
    #reviewDiffView .prose {
        font-size: 0.875rem;
    }
    /* Action buttons — already 48px min in HTML */
    #reviewModal .rounded-b-xl button {
        font-size: 0.875rem;
    }
}
@media (any-pointer: coarse) and (orientation: portrait) {
    /* Diff view stacks vertically */
    #reviewDiffView {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM GENERATION MODALS (Series, Mfr-Cat, Filter) — TABLET
   ══════════════════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse) {
    /* All generation modals */
    #seriesGenModal > div,
    #seriesEditorModal > div,
    #mfrCatEditModal > div,
    #fpEditModal > div,
    #seriesPromptModal > div,
    #bulkGenModal > div,
    #articleWizard > div {
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
    }
    /* All modal inputs */
    #seriesGenModal .m3-input,
    #seriesGenModal .m3-select,
    #seriesGenModal textarea,
    #seriesEditorModal .m3-input,
    #mfrCatEditModal .m3-input,
    #mfrCatEditModal textarea,
    #fpEditModal .m3-input,
    #fpEditModal textarea {
        min-height: 44px;
        font-size: 0.875rem;
    }
    /* Generate buttons in modals */
    #seriesGenStartBtn,
    #seriesGenModal .m3-btn-filled,
    #mfrCatEditModal .m3-btn-filled,
    #fpEditModal .m3-btn-filled {
        min-height: 52px;
        font-size: 0.9375rem;
    }
    /* Summernote in series editor */
    #seriesEditorModal .note-editable {
        min-height: 300px !important;
    }
    #seriesEditorModal .note-toolbar .note-btn {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM-TABLET.JS — CSS SUPPORT CLASSES
   These classes are added dynamically by /js/pim-tablet.js on touch devices.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── .pim-touch — global marker on <html> ────────────────────────────── */
/* Use html.pim-touch ... to scope any touch-only rule */

/* ── Analogs sub-step indicator (sticky top bar with progress) ──────── */
.analogs-substep-indicator {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--md-sys-color-surface-container-lowest);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 2px 8px -4px rgba(0,0,0,0.12);
}
.analogs-substep-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    flex-wrap: nowrap;
}
.analogs-substep-sep {
    font-size: 16px !important;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.4;
    flex-shrink: 0;
}
.analogs-substep-progress {
    height: 3px;
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
    overflow: hidden;
}
.analogs-substep-progress-fill {
    height: 100%;
    background: var(--md-sys-color-primary);
    transition: width 200ms ease-out;
    border-radius: 0 2px 2px 0;
}

.analogs-substep-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    background: transparent;
    border: 2px solid transparent;
    border-radius: 0.625rem;
    min-height: 44px;
    transition: all 0.2s;
    cursor: pointer;
    flex: 0 1 auto;
    min-width: 0;
}
.analogs-substep-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s;
}
.analogs-substep-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.analogs-substep-btn.active {
    color: var(--md-sys-color-primary);
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.analogs-substep-btn.active .analogs-substep-num {
    background: var(--md-sys-color-primary);
    color: #fff;
}
.analogs-substep-btn .material-symbols-outlined { font-size: 18px; }

/* ── Touch tabs: active-tab underline indicator ──────────────────────── */
html.pim-touch #pimTabsContainer .tab-btn {
    position: relative;
}
html.pim-touch #pimTabsContainer .tab-btn.active::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -2px;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--md-sys-color-primary);
}

/* ── Topbar: more compact on portrait tablet ─────────────────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    html.pim-touch .pim-topbar h1 { font-size: 0.8125rem !important; }
    html.pim-touch .pim-topbar { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
    /* "Покрытие" button — icon only on narrow portrait */
    html.pim-touch #analogsCoverageToggle {
        padding: 0.5rem !important;
        min-width: 36px;
        min-height: 36px;
    }
    html.pim-touch #analogsCoverageToggle > span:not(.material-symbols-outlined) {
        display: none;
    }
    /* Analogs wizard step indicator — reduce outer padding to fit 3 steps */
    html.pim-touch #analogsSearchView > div:first-child {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        gap: 0 !important;
    }
}

/* On narrow portrait tablets: hide labels, keep number+icon */
@media (max-width: 820px) and (orientation: portrait) {
    .analogs-substep-btn:not(.active) .analogs-substep-label { display: none; }
    .analogs-substep-btn:not(.active) .material-symbols-outlined { margin: 0; }
    .analogs-substep-btn { padding: 0.5rem 0.625rem; }
}

/* ── Tablet sub-nav buttons (Prev / Next) ───────────────────────────── */
.tablet-sub-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 0.75rem;
}
.tablet-sub-nav:empty { display: none; }
.tablet-sub-nav-prev {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.625rem 1rem;
    min-height: 48px;
    border-radius: 0.625rem;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem; font-weight: 700;
    transition: background 0.15s;
    cursor: pointer;
}
.tablet-sub-nav-prev:hover { background: var(--md-sys-color-surface-container-high); }
.tablet-sub-nav-next {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    min-height: 48px;
    border-radius: 0.625rem;
    background: var(--md-sys-color-primary);
    color: #fff;
    font-size: 0.875rem; font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    transition: background 0.15s, transform 0.05s;
    cursor: pointer;
}
.tablet-sub-nav-next:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 88%, black); }
.tablet-sub-nav-next:active { transform: scale(0.98); }

/* ── Card view for tables (pim-touch-cards) ──────────────────────────── */
html.pim-touch .pim-touch-cards {
    border: none;
}
html.pim-touch .pim-touch-cards thead {
    display: none;
}
html.pim-touch .pim-touch-cards tbody {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.5rem;
}
html.pim-touch .pim-touch-cards tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0.75rem;
    padding: 0.875rem;
    transition: box-shadow 0.15s;
}
/* Colspan rows (loading, empty states) — keep block layout, no card styling */
html.pim-touch .pim-touch-cards tbody tr:has(td[colspan]) {
    display: block;
    border: none;
    background: none;
    padding: 0;
    border-radius: 0;
}
html.pim-touch .pim-touch-cards tbody tr:has(td[colspan]) td {
    display: block;
    text-align: center;
}
html.pim-touch .pim-touch-cards tbody tr:has(td[colspan]) td::before {
    display: none;
}
html.pim-touch .pim-touch-cards tbody tr:has(td[colspan]) td:last-child {
    border-top: none !important;
    flex: initial;
}
html.pim-touch .pim-touch-cards tbody tr:active {
    box-shadow: var(--md-sys-elevation-2);
}
html.pim-touch .pim-touch-cards tbody td {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    font-size: 0.875rem;
    border: none !important;
}
/* Label from data-label attribute */
html.pim-touch .pim-touch-cards tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label) ": ";
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    min-width: 5rem;
}
/* Checkbox column — no label, smaller */
html.pim-touch .pim-touch-cards tbody td:first-child[data-label=""] {
    flex: 0 0 auto;
}
html.pim-touch .pim-touch-cards tbody td:first-child[data-label=""]::before {
    display: none;
}
/* Actions column — full width bottom */
html.pim-touch .pim-touch-cards tbody td:last-child {
    flex: 1 0 100%;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--md-sys-color-outline-variant) !important;
    margin-top: 0.25rem;
}
html.pim-touch .pim-touch-cards tbody td:last-child::before {
    display: none;
}
/* Name/Title column — take full row */
html.pim-touch .pim-touch-cards tbody td:nth-child(2),
html.pim-touch .pim-touch-cards tbody td:nth-child(3) {
    flex: 1 0 50%;
    min-width: 0;
}
/* Action buttons inside cards — bigger */
html.pim-touch .pim-touch-cards .m3-icon-btn {
    min-width: 48px;
    min-height: 48px;
}
html.pim-touch .pim-touch-cards .m3-icon-btn .material-symbols-outlined {
    font-size: 24px;
}
/* Badges in cards */
html.pim-touch .pim-touch-cards .m3-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    min-height: 28px;
}
/* Checkboxes */
html.pim-touch .pim-touch-cards input[type="checkbox"] {
    width: 1.375rem;
    height: 1.375rem;
}
/* Pagination under cards */
html.pim-touch .pim-touch-cards + div,
html.pim-touch .pim-touch-cards ~ .queue-pagination {
    padding: 0.75rem;
}
html.pim-touch .pim-touch-cards ~ .queue-pagination button,
html.pim-touch .pim-touch-cards + div button {
    min-width: 44px;
    min-height: 44px;
}

/* ── Touch tabs (portrait: icons only, landscape: full text) ─────────── */
html.pim-touch .touch-tabs .tab-btn {
    padding: 0.625rem 0.75rem;
    min-height: 48px;
    font-size: 0.875rem;
    gap: 0.5rem;
}
html.pim-touch .touch-tabs .tab-btn .material-symbols-outlined {
    font-size: 24px;
}
html.pim-touch .touch-tabs .tab-btn.active {
    border-bottom-width: 3px;
}
/* Badge (queue count) in tabs */
html.pim-touch .touch-tabs #queueCount {
    font-size: 0.6875rem;
    min-width: 22px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Fullscreen modals ───────────────────────────────────────────────── */
html.pim-touch .pim-fullscreen-modal {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
/* Modal header — bigger close button */
html.pim-touch .pim-fullscreen-modal button[onclick*="close"],
html.pim-touch .pim-fullscreen-modal button[onclick*="Close"] {
    min-width: 48px;
    min-height: 48px;
}
/* Modal content — comfortable padding */
html.pim-touch .pim-fullscreen-modal > .p-4,
html.pim-touch .pim-fullscreen-modal > .p-5 {
    padding: 1rem;
}
/* Modal action bar */
html.pim-touch .pim-fullscreen-modal > div:last-child {
    padding: 0.75rem 1rem;
}
html.pim-touch .pim-fullscreen-modal > div:last-child button {
    min-height: 52px;
    font-size: 0.9375rem;
    padding: 0.625rem 1.25rem;
}
/* Summernote inside fullscreen modals — fill available height */
html.pim-touch .pim-fullscreen-modal .note-editor {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
html.pim-touch .pim-fullscreen-modal .note-editing-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
html.pim-touch .pim-fullscreen-modal .note-editable {
    flex: 1 1 auto;
    min-height: 250px !important;
    height: auto !important;
}
/* Make the scrollable body area of fullscreen modals expand */
html.pim-touch .pim-fullscreen-modal > .overflow-y-auto,
html.pim-touch .pim-fullscreen-modal > div > .overflow-y-auto {
    flex: 1 1 auto;
}
/* Kanban — scroll fade hint on touch when columns overflow */
@media (any-pointer: coarse) {
    #queueKanbanView {
        position: relative;
    }
    #queueKanbanView::after {
        content: '';
        position: absolute;
        right: 0; top: 0; bottom: 0;
        width: 24px;
        background: linear-gradient(to left, var(--md-sys-color-surface), transparent);
        pointer-events: none;
        z-index: 1;
    }
}

/* textGenModal — portrait: stack columns even above md breakpoint */
@media (any-pointer: coarse) and (orientation: portrait) {
    html.pim-touch #textGenModal .md\:flex-row {
        flex-direction: column !important;
    }
    html.pim-touch #textGenModal .md\:w-1\/2 {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
    }
}

/* PIM Global Search button — touch-friendly */
html.pim-touch #pimGlobalSearchWrap > button {
    min-width: 48px;
    min-height: 48px;
}
html.pim-touch #pimGlobalSearchWrap > button .material-symbols-outlined {
    font-size: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   PIM Design System — Unified Components
   ═══════════════════════════════════════════════════════════════════ */

/* ── Filter Pills ────────────────────────────────────────────────── */
.pim-pill {
    font-size: 10px;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
}
.pim-pill:hover {
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}
.pim-pill.active, .pim-pill[aria-selected="true"] {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary, #fff);
}
.pim-pill .pim-pill-count {
    font-size: 9px;
    opacity: 0.7;
    margin-left: 2px;
}

/* ── Empty States ────────────────────────────────────────────────── */
.pim-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
    gap: 0.5rem;
}
.pim-empty-icon {
    font-size: 48px;
    opacity: 0.15;
    margin-bottom: 0.25rem;
}
.pim-empty-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}
.pim-empty-desc {
    font-size: 0.75rem;
    opacity: 0.6;
    max-width: 320px;
    line-height: 1.5;
}

/* ── Loading Spinner ─────────────────────────────────────────────── */
.pim-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
}
.pim-loading-spinner {
    font-size: 28px;
    color: var(--md-sys-color-primary);
    animation: spin 1s linear infinite;
}
.pim-loading-text {
    font-size: 0.75rem;
}

/* ── Step Wizard ─────────────────────────────────────────────────── */
.pim-steps {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.pim-step {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.2s ease;
    cursor: default;
}
.pim-step-num {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.pim-step.active {
    background: var(--md-sys-color-primary);
    color: #fff;
}
.pim-step.active .pim-step-num {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.pim-step.completed {
    background: var(--md-sys-color-primary-container, #e8f5e9);
    color: var(--md-sys-color-on-primary-container, #1b5e20);
    cursor: pointer;
}
.pim-step.completed .pim-step-num {
    background: var(--md-sys-color-primary);
    color: #fff;
}
.pim-step.disabled {
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-container);
    opacity: 0.5;
}
.pim-step.disabled .pim-step-num {
    background: var(--md-sys-color-surface-container-high, #e0e0e0);
    color: var(--md-sys-color-on-surface-variant);
}
.pim-step-sep {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.3;
    margin: 0 0.125rem;
}

/* ── Progress Bar ────────────────────────────────────────────────── */
.pim-progress {
    width: 100%;
    height: 6px;
    background: var(--md-sys-color-surface-container);
    border-radius: 9999px;
    overflow: hidden;
}
.pim-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--md-sys-color-primary);
    transition: width 0.4s ease;
}
.pim-progress-fill.success { background: #22c55e; }
.pim-progress-fill.warning { background: #f59e0b; }
.pim-progress-fill.error   { background: #ef4444; }

/* ── Status Badge ────────────────────────────────────────────────── */
.pim-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.pim-status-success { background: #dcfce7; color: #166534; }
.pim-status-warning { background: #fef3c7; color: #92400e; }
.pim-status-error   { background: #fee2e2; color: #991b1b; }
.pim-status-info    { background: #dbeafe; color: #1e40af; }
.pim-status-neutral { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); }
@media (prefers-color-scheme: dark) {
    .pim-status-success { background: rgba(34,197,94,0.15); color: #86efac; }
    .pim-status-warning { background: rgba(245,158,11,0.15); color: #fcd34d; }
    .pim-status-error   { background: rgba(239,68,68,0.15); color: #fca5a5; }
    .pim-status-info    { background: rgba(59,130,246,0.15); color: #93c5fd; }
}
html.dark .pim-status-success { background: rgba(34,197,94,0.15); color: #86efac; }
html.dark .pim-status-warning { background: rgba(245,158,11,0.15); color: #fcd34d; }
html.dark .pim-status-error   { background: rgba(239,68,68,0.15); color: #fca5a5; }
html.dark .pim-status-info    { background: rgba(59,130,246,0.15); color: #93c5fd; }

/* ── Skeleton Loading ────────────────────────────────────────────── */
.pim-skeleton {
    background: linear-gradient(90deg, var(--md-sys-color-surface-container) 25%, var(--md-sys-color-surface-container-high, #e8e8e8) 50%, var(--md-sys-color-surface-container) 75%);
    background-size: 200% 100%;
    animation: pim-shimmer 1.5s infinite;
    border-radius: 4px;
}
.pim-skeleton-text { height: 12px; margin-bottom: 8px; }
.pim-skeleton-text:last-child { width: 60%; }
.pim-skeleton-circle { border-radius: 50%; }
.pim-skeleton-card {
    padding: 1rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
}
@keyframes pim-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── New item highlight ──────────────────────────────────────────── */
.pim-new-item {
    animation: pim-highlight 2s ease-out;
}
@keyframes pim-highlight {
    0%   { background-color: rgba(var(--md-sys-color-primary-rgb, 33,150,243), 0.15); }
    100% { background-color: transparent; }
}

/* ── Kanban card transitions ─────────────────────────────────────── */
.kanban-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kanban-card:active {
    transform: scale(0.98);
}

/* ══════════════════════════════════════════════════════════════════════════
   PIM TABLET — iteration 2: full-tab touch coverage
   Applies only when `.pim-touch` is set on <html> by /js/pim-tablet.js
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ATTRIBUTE GLUE (critical: drag-drop unusable before) ────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    /* Stack 3 drag zones vertically instead of 3 cramped columns */
    html.pim-touch #tab-attribute-glue #glue-step-1 > .grid.grid-cols-3,
    html.pim-touch #tab-attribute-glue #glue-step-2 > .grid.grid-cols-3,
    html.pim-touch #tab-attribute-glue #glue-step-3 > .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.625rem !important;
    }
    /* Drop-zones: clamp height so all 3 fit on one screen with scroll inside each */
    html.pim-touch #glue-all-attributes,
    html.pim-touch #glue-parent-attribute,
    html.pim-touch #glue-child-attributes {
        height: auto !important;
        max-height: 32vh !important;
        min-height: 140px !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* Step indicators: collapse sub-text on the two inactive steps to save space */
    html.pim-touch .glue-step-indicator:not(.active) .text-\[11px\] { display: none; }
    html.pim-touch .glue-step-indicator { padding: 0.5rem 0.625rem !important; }
    html.pim-touch .glue-step-indicator .font-semibold { font-size: 0.75rem !important; }
    /* Sticky "Next" button in Step 1/2 so it stays reachable */
    html.pim-touch #tab-attribute-glue .glue-step > .mt-4.flex.justify-end,
    html.pim-touch #tab-attribute-glue .glue-step > .mt-4.flex.justify-between {
        position: sticky;
        bottom: 0;
        background: var(--md-sys-color-surface-container-lowest);
        padding: 0.625rem 0;
        margin: 0.75rem -1rem -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-top: 1px solid var(--md-sys-color-outline-variant);
        z-index: 5;
    }
    html.pim-touch #glue-next-step-2,
    html.pim-touch #tab-attribute-glue .glue-step button[id^="glue-next"],
    html.pim-touch #tab-attribute-glue .glue-step button[id^="glue-prev"],
    html.pim-touch #tab-attribute-glue .glue-step button[id^="glue-apply"] {
        min-height: 48px !important;
        padding: 0.625rem 1.25rem !important;
    }
}
@media (any-pointer: coarse) {
    /* Bigger drag items — easier to grab and drag on touch */
    html.pim-touch #glue-all-attributes .glue-attr-item,
    html.pim-touch #glue-parent-attribute .glue-attr-item,
    html.pim-touch #glue-child-attributes .glue-attr-item {
        min-height: 44px !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
        touch-action: none;
    }
}

/* ── ATTRIBUTE MANAGER (fixed 288px sidebar broke layout in portrait) ── */
@media (any-pointer: coarse) and (orientation: portrait) {
    html.pim-touch #tab-attribute-manager {
        flex-direction: column !important;
    }
    html.pim-touch #tab-attribute-manager > .w-72 {
        width: 100% !important;
        max-height: 38vh !important;
        border-right: none !important;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
        flex-shrink: 0 !important;
    }
    html.pim-touch #attributes-list > * {
        min-height: 44px !important;
        padding: 0.5rem 0.625rem !important;
    }
    html.pim-touch #attributes-list {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    html.pim-touch #attr-search {
        min-height: 40px !important;
        font-size: 0.875rem !important;
    }
    html.pim-touch #tab-attribute-manager > .w-72 button[title="Обновить список"] {
        min-width: 40px !important;
        min-height: 40px !important;
    }
    html.pim-touch #attribute-editor {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── PRODUCTS (filter overflow + narrow inputs) ──────────────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    /* Row 1: main filters — wrap and make selects 50% each */
    html.pim-touch #tab-products > div > .shrink-0 > div:first-child {
        flex-wrap: wrap !important;
        row-gap: 0.5rem !important;
        padding: 0.625rem 0.75rem !important;
    }
    html.pim-touch #tab-products #filterSearch {
        font-size: 0.875rem !important;
    }
    html.pim-touch #tab-products > div > .shrink-0 .relative.w-full.sm\:w-52 {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    html.pim-touch #filterCategory,
    html.pim-touch #filterManufacturer {
        flex: 1 1 calc(50% - 0.25rem) !important;
        width: auto !important;
        min-width: 0 !important;
    }
    html.pim-touch #filterStatus {
        flex: 1 1 calc(50% - 0.25rem) !important;
        width: auto !important;
        min-width: 0 !important;
    }
    /* AI-generation buttons wrap to new line together, text still shown */
    html.pim-touch #tab-products button[onclick*="bulkGenerateProductsNoDesc"],
    html.pim-touch #tab-products button[onclick*="openBulkTextModalCustom"] {
        min-height: 40px !important;
    }
    /* Row 2: advanced filters */
    html.pim-touch #advFiltersRow {
        flex-wrap: wrap !important;
        row-gap: 0.5rem !important;
    }
    /* Select-all checkbox & product checkboxes — bigger */
    html.pim-touch #selectAllProducts {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    html.pim-touch #productsTable tbody input[type="checkbox"] {
        width: 1.125rem !important;
        height: 1.125rem !important;
    }
    /* Pagination in products */
    html.pim-touch #tab-products [id$="Pagination"] button {
        min-width: 40px !important;
        min-height: 40px !important;
    }
    /* View toggle buttons — slightly bigger */
    html.pim-touch #btnViewList,
    html.pim-touch #btnViewGrid {
        min-width: 36px !important;
        min-height: 36px !important;
    }
}

/* ── CATEGORIES (sidebar vs editor stacking) ─────────────────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    /* Sidebar: 50vh — generous height for category tree, editor gets other half */
    html.pim-touch #tab-categories > .w-full.md\:w-72 {
        max-height: 50vh !important;
        min-height: 35vh !important;
        flex-shrink: 0 !important;
        width: 100% !important;
    }
    /* When no editor is visible (catEditorEmpty shown), let sidebar expand more */
    html.pim-touch #tab-categories:has(#catEditorEmpty:not(.hidden)) > .w-full.md\:w-72 {
        max-height: 75vh !important;
    }
    /* Editor: fill remaining space */
    html.pim-touch #tab-categories > .flex-1.flex.flex-col.bg-surface-container-lowest {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    html.pim-touch #catEditorContent {
        min-height: 0 !important;
    }
    /* Category list items in sidebar — larger touch targets */
    html.pim-touch #catListContainer > * {
        min-height: 48px !important;
        font-size: 0.875rem !important;
    }
    html.pim-touch #catListContainer label {
        padding: 0.5rem 0.625rem !important;
    }
    /* Search input */
    html.pim-touch #catSearch {
        min-height: 44px !important;
        font-size: 0.9375rem !important;
    }
    /* Category editor header buttons */
    html.pim-touch #catEditorContent > div:first-child button {
        min-height: 44px !important;
    }
    /* Desc filter pills — bigger tap targets */
    html.pim-touch .cat-desc-filter {
        min-height: 40px !important;
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    html.pim-touch #tab-categories { overscroll-behavior: contain; }
    /* Category list scroll */
    html.pim-touch #catListContainer {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ── QUEUE (header filters overflow + kanban scroll cue) ─────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    /* Already flex-wrap — just tighten the row-gap and make pills touch-size */
    html.pim-touch #tab-queue > div > div:first-child {
        row-gap: 0.5rem !important;
        padding: 0.625rem 0.75rem !important;
    }
    html.pim-touch .queue-filter-btn,
    html.pim-touch .queue-type-btn {
        min-height: 36px !important;
        padding: 0.375rem 0.625rem !important;
    }
    /* Bulk action buttons */
    html.pim-touch #tab-queue button[onclick*="bulkApproveAll"],
    html.pim-touch #tab-queue #queueClearMenu > button,
    html.pim-touch #tab-queue button[onclick*="loadQueue()"] {
        min-height: 40px !important;
        padding: 0.5rem 0.625rem !important;
    }
    /* Queue date filter */
    html.pim-touch #queueDateFilter {
        min-height: 36px !important;
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    /* View toggle */
    html.pim-touch #queueViewTable,
    html.pim-touch #queueViewKanban {
        min-width: 40px !important;
        min-height: 36px !important;
    }
}
/* Kanban horizontal scroll cue — fade on right edge */
@media (any-pointer: coarse) {
    html.pim-touch #queueKanbanView {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }
    /* Kanban cards — bigger text, tight padding */
    html.pim-touch .kanban-card {
        touch-action: manipulation;
    }
    html.pim-touch .kanban-card .text-\[9px\] { font-size: 0.75rem !important; }
    html.pim-touch .kanban-card .text-\[10px\] { font-size: 0.8125rem !important; }
}

/* ── FILTER PAGES (Step 2 overfilled header + Summernote height) ─────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    /* Step 1: remove max-width constraint on category list */
    html.pim-touch #fpCatList,
    html.pim-touch #fpStep1 .max-w-xs {
        max-width: 100% !important;
    }
    /* Step 2 header — already flex-wrap; just ensure items are touch-sized */
    html.pim-touch #fpStep2 > .shrink-0 {
        row-gap: 0.5rem !important;
        padding: 0.625rem 0.75rem !important;
    }
    html.pim-touch #fpStep2 > .shrink-0 > button[onclick*="fpBackToCategories"] {
        min-height: 40px !important;
    }
    html.pim-touch #fpStep2 > .shrink-0 > button[onclick*="generateAllEmpty"],
    html.pim-touch #fpStep2 > .shrink-0 > #fpGenBtn {
        min-height: 40px !important;
    }
    html.pim-touch #filterPageSearch {
        min-height: 40px !important;
        font-size: 0.875rem !important;
    }
    html.pim-touch #fpSort {
        min-height: 36px !important;
    }
    /* Pagination */
    html.pim-touch #fpPagination button {
        min-width: 40px !important;
        min-height: 40px !important;
    }
}
/* Filter Pages modal: shrink dual Summernote editors */
html.pim-touch #fpEditModal .note-editor .note-editable {
    max-height: 22vh !important;
    min-height: 100px !important;
}

/* ── ARTICLES (Summernote too tall + filter pills wrap) ──────────────── */
@media (any-pointer: coarse) {
    /* Inline Summernote editor: clamp height to viewport */
    html.pim-touch #artDetailView .note-editor .note-editable,
    html.pim-touch #tab-articles .note-editor .note-editable {
        max-height: 45vh !important;
        min-height: 200px !important;
    }
    /* Filter pills — horizontal scroll instead of wrap */
    html.pim-touch #articleStatusFilter {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    html.pim-touch #articleStatusFilter::-webkit-scrollbar { display: none; }
    html.pim-touch .art-filter-btn {
        flex-shrink: 0 !important;
        min-height: 36px !important;
        padding: 0.375rem 0.75rem !important;
    }
    /* Article list items — padding for touch */
    html.pim-touch #articleListContainer > *,
    html.pim-touch #artListView [data-article-id] {
        min-height: 56px !important;
    }
    /* Detail header bar buttons */
    html.pim-touch #artDetailView > .shrink-0 button {
        min-height: 40px !important;
    }
}
@media (any-pointer: coarse) and (orientation: portrait) {
    html.pim-touch #tab-articles .flex.items-center.gap-2.flex-wrap,
    html.pim-touch #tab-articles > div > .shrink-0 {
        row-gap: 0.5rem !important;
    }
    html.pim-touch #artSearchInput,
    html.pim-touch #artSortBy {
        min-height: 40px !important;
    }
}

/* ── SERIES / MFR-CAT (filter bars wrap + Summernote) ────────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    html.pim-touch #tab-series > div > div:first-child,
    html.pim-touch #tab-mfr-cat > div > div:first-child {
        flex-wrap: wrap !important;
        row-gap: 0.5rem !important;
        padding: 0.625rem 0.75rem !important;
    }
    html.pim-touch #seriesSearch,
    html.pim-touch #seriesMfgFilter,
    html.pim-touch #seriesSortBy,
    html.pim-touch #mfrCatSearch,
    html.pim-touch #mfrCatMfgFilter,
    html.pim-touch #mfrCatCatFilter,
    html.pim-touch #mfrCatSortBy {
        min-height: 40px !important;
        font-size: 0.8125rem !important;
    }
    /* Pagination buttons w-9 h-9 → 44px */
    html.pim-touch #seriesPagination button,
    html.pim-touch #mfrCatPagination button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}
html.pim-touch #mfrCatEditModal .note-editor .note-editable,
html.pim-touch #seriesEditorModal .note-editor .note-editable {
    max-height: 40vh !important;
}

/* ── CARD-VIEW TRUNCATION (shared across all tables converted to cards) */
html.pim-touch .pim-touch-cards td[data-label] {
    overflow: hidden;
}
html.pim-touch .pim-touch-cards td[data-label] > *:not(button):not(.flex):not(input) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── AI MODAL (7-tab overflow) ───────────────────────────────────────── */
@media (any-pointer: coarse) {
    html.pim-touch .ai-modal-tab {
        min-height: 44px !important;
        padding: 0.5rem 0.875rem !important;
        white-space: nowrap;
        flex-shrink: 0 !important;
    }
    html.pim-touch #projectAiModal .flex.overflow-x-auto {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    html.pim-touch #projectAiModal .ai-modal-tab {
        scroll-snap-align: start;
    }
    /* Fullscreen modal — remove max-width constraint */
    html.pim-touch #projectAiModal > div {
        max-width: 100vw !important;
    }
    /* Prompt template buttons */
    html.pim-touch #projectAiModal .prompt-tpl-btn {
        min-height: 44px !important;
        padding: 0.5rem 0.625rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   REVIEW MODAL — Tablet / Touch Overhaul
   ══════════════════════════════════════════════════════════════════════ */

/* ── Base touch adjustments ─────────────────────────────────────────── */
@media (any-pointer: coarse) {
    /* Modal fills screen on touch devices */
    html.pim-touch #reviewModal > div {
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Summernote editor */
    html.pim-touch #reviewModal .note-editor {
        display: flex !important;
        flex-direction: column !important;
    }
    html.pim-touch #reviewModal .note-editor .note-editable {
        flex: 1 1 auto !important;
        min-height: 200px !important;
        -webkit-overflow-scrolling: touch;
        font-size: 0.9375rem !important;
        line-height: 1.65 !important;
        padding: 1rem !important;
    }
    html.pim-touch #reviewModal .note-toolbar {
        padding: 0.375rem !important;
        gap: 0.125rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    html.pim-touch #reviewModal .note-toolbar .note-btn-group {
        flex-shrink: 0;
    }
    html.pim-touch #reviewModal .note-toolbar .note-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 0.875rem !important;
    }

    /* Body padding — slightly tighter */
    html.pim-touch #reviewEditorPane .p-4 {
        padding: 0.75rem !important;
    }

    /* Stats bar — larger text for readability */
    html.pim-touch #reviewStatsBar {
        padding: 0.5rem 0.75rem !important;
        gap: 0.75rem !important;
    }
    html.pim-touch #reviewStatsBar span,
    html.pim-touch #reviewStatsBar button {
        font-size: 0.75rem !important;
    }

    /* Reject dropdown — positioned properly */
    html.pim-touch #rejectDropdown {
        min-width: 260px !important;
    }
    html.pim-touch #rejectDropdown button {
        min-height: 48px !important;
        font-size: 0.875rem !important;
        padding: 0.625rem 0.75rem !important;
    }

    /* Diff view — constrained height */
    html.pim-touch #reviewDiffView {
        -webkit-overflow-scrolling: touch;
    }
    html.pim-touch #reviewDiffView .prose {
        max-height: 35vh !important;
        font-size: 0.875rem !important;
    }

    /* Action footer buttons — large touch targets */
    html.pim-touch #reviewEditorPane > div:last-child button {
        min-height: 48px !important;
        font-size: 0.875rem !important;
    }
    html.pim-touch #reviewApproveBtn {
        min-height: 52px !important;
        font-size: 1rem !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 0.75rem !important;
    }

    /* Resizer — thicker for touch */
    html.pim-touch #reviewResizer {
        width: 6px !important;
        min-width: 6px !important;
    }
    html.pim-touch #reviewResizer > div:last-child {
        width: 4px !important;
        height: 40px !important;
    }

    /* Preview pane URL bar */
    html.pim-touch #reviewPreviewPane > div:first-child {
        padding: 0.5rem 0.75rem !important;
    }
    html.pim-touch #reviewPreviewPane > div:first-child button {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Header buttons */
    html.pim-touch #reviewModal > div > div:first-child button {
        min-height: 40px !important;
        min-width: 40px !important;
    }
    /* Tab switcher buttons */
    html.pim-touch .review-tab-btn {
        min-height: 40px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
    }
}

/* ── Portrait tablet: stacked layout ───────────────────────────────── */
@media (any-pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
    /* Stack panes vertically */
    html.pim-touch #reviewSplitBody {
        flex-direction: column !important;
    }
    /* Hide resizer in portrait */
    html.pim-touch #reviewResizer {
        display: none !important;
    }
    /* Desktop preview toggle hidden — tab switcher shown instead */
    html.pim-touch #btnReviewPreview {
        display: none !important;
    }
    /* Each pane fills full width when visible */
    html.pim-touch #reviewEditorPane,
    html.pim-touch #reviewPreviewPane {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        height: 100% !important;
    }
    html.pim-touch #reviewPreviewPane {
        border-left: none !important;
        border-top: 1px solid var(--md-sys-color-outline-variant, #444) !important;
    }
    /* Summernote taller on portrait — fills available space */
    html.pim-touch #reviewModal .note-editor .note-editable {
        min-height: 300px !important;
    }
    /* Diff view single column on narrow portrait */
    html.pim-touch #reviewDiffView > .grid {
        grid-template-columns: 1fr !important;
    }
    html.pim-touch #reviewDiffView > .grid > div {
        border-right: none !important;
        border-bottom: 1px solid var(--md-sys-color-outline-variant, #444);
    }
}

/* ── Landscape tablet: optimized side-by-side ─────────────────────── */
@media (any-pointer: coarse) and (orientation: landscape) {
    /* Tab switcher hidden — use split view */
    html.pim-touch #reviewTabSwitcher {
        display: none !important;
    }
    /* Summernote uses available height */
    html.pim-touch #reviewModal .note-editor .note-editable {
        max-height: 60vh !important;
    }
}

/* ── Phone-specific (narrow screens) ──────────────────────────────── */
@media (any-pointer: coarse) and (max-width: 640px) {
    /* Ultra-compact header */
    html.pim-touch #reviewModal > div > div:first-child {
        padding: 0.375rem 0.5rem !important;
    }
    html.pim-touch #reviewModal h3,
    html.pim-touch #reviewModal .text-sm.font-bold {
        font-size: 0.8125rem !important;
    }
    html.pim-touch #reviewTargetInfo {
        display: none !important;
    }
    /* Footer: stack actions vertically if very narrow */
    html.pim-touch #reviewEditorPane > div:last-child > div:last-child {
        flex-wrap: wrap;
    }
    /* Approve button full-width */
    html.pim-touch #reviewApproveBtn {
        flex: 1;
        justify-content: center;
    }
}

/* Hamburger button injected by touch-detect.js on touch devices */
.pim-touch-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin-right: 0.5rem;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.pim-touch-hamburger:active { background: var(--md-sys-color-surface-container); }
html:not(.pim-touch) .pim-touch-hamburger { display: none !important; }

/* Analogs category search field — proper touch sizing */
html.pim-touch .analogs-cat-search-input {
    min-height: 40px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
html.pim-touch #analogsCatSearchClear {
    width: 28px !important;
    height: 28px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CROSS-CUTTING TOUCH FIXES (iteration 3)
   Fixes that apply across the whole PIM app on touch devices.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. iOS Safari auto-zoom prevention ──────────────────────────────── *
 * iOS zooms the viewport when focusing an input with font-size < 16px.
 * Force all form controls inside .pim-touch to ≥16px to kill the zoom. */
html.pim-touch input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.pim-touch select,
html.pim-touch textarea {
    font-size: 16px !important;
}
/* Exception: when a parent explicitly asks for smaller text (compact UI),
   keep 16px while the element is FOCUSED (iOS only zooms based on focus font-size).
   Visual rendering can still be small via transform:scale() if needed. */
html.pim-touch input[class*="text-"]:focus,
html.pim-touch select[class*="text-"]:focus,
html.pim-touch textarea[class*="text-"]:focus { font-size: 16px !important; }

/* ── 2. Hover-state guards: disable :hover effects on touch ─────────── *
 * Without this, tapping a button leaves its hover colour stuck until the
 * user taps elsewhere. All common PIM hover elements cleared on touch. */
html.pim-touch .pim-pill:hover,
html.pim-touch .tab-btn:hover,
html.pim-touch .m3-btn-filled:hover,
html.pim-touch .m3-btn-text:hover,
html.pim-touch .m3-icon-btn:hover,
html.pim-touch .analogs-substep-btn:hover,
html.pim-touch .kanban-card:hover,
html.pim-touch .product-row:hover,
html.pim-touch .analog-card:hover,
html.pim-touch .glue-attr-item:hover,
html.pim-touch .art-filter-btn:hover,
html.pim-touch .queue-filter-btn:hover,
html.pim-touch .queue-type-btn:hover,
html.pim-touch .cat-desc-filter:hover,
html.pim-touch [class*="hover:bg-"]:hover,
html.pim-touch [class*="hover:text-"]:hover {
    /* Force the element to behave as if not hovered — let its base styles win */
    transition: none !important;
}
/* Stronger approach: reset specific stuck properties for key components */
html.pim-touch .pim-pill:not(.active):not([aria-selected="true"]):hover {
    border-color: var(--md-sys-color-outline-variant) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    background: transparent !important;
}

/* ── 3. pim-pill — enlarge on touch (used in Products/Queue/Articles) ── */
@media (any-pointer: coarse) {
    html.pim-touch .pim-pill {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    html.pim-touch .pim-pill .pim-pill-count { font-size: 0.6875rem !important; }
}

/* ── 4. touch-action: manipulation (kill 300ms delay + double-tap zoom) */
html.pim-touch button,
html.pim-touch a,
html.pim-touch .pim-pill,
html.pim-touch .tab-btn,
html.pim-touch [role="button"],
html.pim-touch [onclick],
html.pim-touch label,
html.pim-touch input[type="checkbox"],
html.pim-touch input[type="radio"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ── 5. user-select:none on UI chrome (tabs/headers/cards/pills) ────── *
 * Prevents accidental text selection when scrolling or tapping controls. */
html.pim-touch .tab-btn,
html.pim-touch .ai-modal-tab,
html.pim-touch .analogs-substep-btn,
html.pim-touch .pim-topbar,
html.pim-touch .pim-topbar h1,
html.pim-touch .analogs-step-btn,
html.pim-touch .glue-step-indicator,
html.pim-touch .analog-card > .flex.gap-0\.5,
html.pim-touch .analog-card .flex.items-center.justify-between {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ── 6. pim-topbar — flex-wrap on portrait tablet ────────────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    html.pim-touch .pim-topbar {
        flex-wrap: wrap !important;
        row-gap: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    html.pim-touch .pim-topbar > .flex:first-child { min-width: 0; }
}

/* ── 7. Safe-area insets for iPads with home-indicator gesture ───────── */
@media (any-pointer: coarse) {
    html.pim-touch .tablet-sub-nav,
    html.pim-touch #analogsWizardStep2 > .absolute.bottom-0,
    html.pim-touch #tab-attribute-glue .glue-step > .mt-4.flex {
        padding-bottom: max(0.625rem, env(safe-area-inset-bottom)) !important;
    }
}

/* ── 8. Orientation-change / viewport height robustness ──────────────── *
 * Use 100dvh instead of 100vh on touch where needed. Modern browsers back. */
@supports (height: 100dvh) {
    html.pim-touch .pim-fullscreen-modal {
        max-height: 100dvh !important;
        height: 100dvh !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MAIN SIDEBAR — TABLET OVERLAY DRAWER (wider, more comfortable)
   Was 18rem (288px) with cramped items. Now 21rem (336px) with bigger
   touch targets, readable labels, proper active-state styling.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 2200px) and (hover: none) and (pointer: coarse) {
    /* Wider drawer */
    aside,
    aside.sidebar--collapsed {
        width: 21rem !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }
    /* Sidebar header: bigger logo + title */
    aside #sidebarHeader {
        padding: 0.875rem 1rem !important;
    }
    aside #sidebarHeader .w-7.h-7 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    aside #sidebarHeader h1 {
        font-size: 0.9375rem !important;
    }
    /* Active project chip */
    aside #activeProjectChip { padding: 0.25rem 0.75rem 0.375rem !important; }
    aside #activeProjectChip .text-\[11px\] { font-size: 0.8125rem !important; }
    aside #activeProjectChip .text-\[13px\] { font-size: 1rem !important; }

    /* Command palette trigger — taller */
    aside #cpTriggerWrap button {
        min-height: 44px !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    aside #cpTriggerWrap button .material-symbols-outlined { font-size: 20px !important; }

    /* Nav items — bigger touch targets, larger icons + labels */
    aside nav a,
    aside.sidebar--collapsed nav a,
    aside nav a.sidebar-nav-collapsed,
    .sidebar-nav-collapsed,
    aside .nav-group-toggle,
    aside.sidebar--collapsed .nav-group-toggle {
        min-height: 44px !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.875rem !important;
        gap: 0.75rem !important;
        border-radius: 0.5rem !important;
    }
    /* Nav item icons — bigger */
    aside nav a .material-symbols-outlined,
    aside .nav-group-toggle .material-symbols-outlined,
    aside .nav-group-child .material-symbols-outlined {
        font-size: 20px !important;
    }
    /* Group headers — larger, more prominent */
    aside .nav-group-toggle {
        height: auto !important;
        font-size: 0.6875rem !important;
        letter-spacing: 0.08em !important;
        margin-top: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
        min-height: 32px !important;
    }
    aside .nav-group-toggle .nav-label { font-weight: 700 !important; }
    /* Group children — nested but still touch-sized */
    aside .nav-group-child,
    aside.sidebar--collapsed .nav-group-child {
        min-height: 42px !important;
        padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
        font-size: 0.8125rem !important;
        gap: 0.625rem !important;
        border-radius: 0.5rem !important;
    }
    /* Active state — visually distinct */
    aside nav a.active,
    aside nav a[aria-current="page"],
    aside .nav-group-child.active {
        background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent) !important;
        color: var(--md-sys-color-primary) !important;
        font-weight: 600 !important;
    }
    /* Nav spacing */
    aside #sidebarNav {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
        padding-top: 0.375rem !important;
        gap: 0.125rem !important;
    }
    /* Footer: bigger theme/logout/user */
    aside #sidebarFooter {
        padding: 0.625rem 0.625rem max(0.625rem, env(safe-area-inset-bottom)) !important;
    }
    aside #sidebarFooter nav > div,
    aside #sidebarFooter nav > a,
    aside #sidebarFooter nav > button {
        min-height: 44px !important;
        font-size: 0.875rem !important;
    }
    aside #sidebarFooter .h-8 { height: auto !important; min-height: 44px !important; }
    /* Recent nav section */
    aside #recentNavSection .text-\[11px\] { font-size: 0.75rem !important; }

    /* Smooth scroll inside nav */
    aside #sidebarNav {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* Kill hover stickiness on touch */
    aside nav a:hover,
    aside .nav-group-toggle:hover,
    aside .nav-group-child:hover,
    aside #cpTriggerWrap button:hover {
        transition: none !important;
    }
    /* touch-action on nav items */
    aside nav a,
    aside .nav-group-toggle,
    aside .nav-group-child,
    aside #cpTriggerWrap button,
    aside #sidebarFooter button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    /* Prevent text-selection while scrolling */
    aside nav { -webkit-user-select: none; user-select: none; }
}

/* Overlay backdrop: darker on tablet so content behind is clearly dimmed */
@media (min-width: 1024px) and (max-width: 2200px) and (hover: none) and (pointer: coarse) {
    .mobile-sidebar-overlay {
        background: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* ── Premium Mobile Modals -> Bottom Sheets ───────────────────────────────── */
@media (max-width: 767px) {
    /* Convert standard center modals to bottom sheets */
    div[class*="fixed inset-0"][class*="items-center"]:not(#mobileSidebarOverlay):not(.mobile-sidebar-overlay) {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    
    /* The modal content window */
    div[class*="fixed inset-0"][class*="items-center"] > div:not(.skip-to-content),
    div[class*="fixed inset-0"][class*="items-center"] > form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-height: 90vh !important;
        animation: m3SlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
        border-bottom: none !important;
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
}

@keyframes m3SlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ── Microsurfacing details ────────────────────────────────────────────────── */

/* Smooth scrolling and snapping for all horizontal tabs */
.overflow-x-auto {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Elevate the bulk actions bar above the mobile bottom nav */
@media (max-width: 767px) {
    #bulkFloatingBar {
        bottom: 5.5rem !important; /* Above the 4.5rem bottom nav */
    }
    /* Hide scrollbars for cleaner tabs on mobile */
    .overflow-x-auto::-webkit-scrollbar {
        display: none;
    }
    .overflow-x-auto {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   html.pim-touch — Touch rules for 2-in-1 devices (IdeaPad, Surface, etc.)
   These mirror the @media (any-pointer: coarse) rules above but are triggered
   by the JS class instead of a CSS media query, because 2-in-1 devices can
   report pointer:fine (trackpad) even with a working touchscreen.
   ══════════════════════════════════════════════════════════════════════════ */

/* Body height */
html.pim-touch body { height: 100vh; height: 100dvh; }

/* Tab content scrollable */
html.pim-touch .tab-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Pagination sticky */
html.pim-touch .queue-pagination,
html.pim-touch [id$="Pagination"]:not(:empty) {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--md-sys-color-surface-container-lowest);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding: 0.5rem 1rem;
}
html.pim-touch .queue-pagination button,
html.pim-touch [id$="Pagination"] button {
    min-width: 40px; min-height: 40px; font-size: 0.875rem;
}

/* Global touch targets */
html.pim-touch .tab-btn { min-height: 44px; font-size: 0.8125rem; }
html.pim-touch .m3-icon-btn { min-width: 44px; min-height: 44px; }
html.pim-touch .m3-btn-filled, html.pim-touch .m3-btn-text { min-height: 40px; padding: 0.5rem 1rem; }
html.pim-touch input[type="checkbox"]:not(.m3-checkbox) { width: 1.25rem; height: 1.25rem; }
html.pim-touch select.m3-select { min-height: 40px; }

/* Coverage toggle */
html.pim-touch .coverage-toggle-btn { display: flex !important; }
html.pim-touch #pimDashboard { transition: max-height 0.3s ease, padding 0.3s ease; overflow: hidden; }
html.pim-touch #pimDashboard:not(.expanded) { max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; }
html.pim-touch #pimDashboard.expanded { max-height: 300px; }

/* Scrollable tab bar fade */
html.pim-touch #pimTabsContainer::after {
    content: '';
    display: block;
    position: absolute; right: 0; top: 0; bottom: 0; width: 24px;
    background: linear-gradient(to left, var(--md-sys-color-surface), transparent);
    pointer-events: none;
}

/* PIM topbar */
html.pim-touch .pim-topbar { flex-wrap: wrap; gap: 0.5rem; padding: 0.625rem 0.75rem; }
html.pim-touch .pim-topbar > .flex.items-center.gap-3:first-child { flex: 1 1 auto; min-width: 0; }
html.pim-touch .pim-topbar h1 { font-size: 0.9375rem; }
html.pim-touch .pim-topbar .p-1\.5 { padding: 0.625rem; min-width: 44px; min-height: 44px; }
html.pim-touch .pim-topbar .p-1\.5 .material-symbols-outlined { font-size: 22px; }
html.pim-touch .pim-topbar select#projectSelector { min-height: 44px; font-size: 0.875rem; padding: 0.5rem 0.75rem; }

/* PIM tabs */
html.pim-touch #pimTabsContainer { gap: 0; padding: 0 0.25rem; }
html.pim-touch #pimTabsContainer .tab-btn { padding: 0.75rem 1rem; font-size: 0.8125rem; min-height: 48px; gap: 0.5rem; }
html.pim-touch #pimTabsContainer .tab-btn .material-symbols-outlined { font-size: 20px; }
html.pim-touch #pimTabsContainer .tab-btn.active { border-bottom-width: 3px; }

/* Filter bar */
html.pim-touch #filterSearch { min-height: 44px; font-size: 0.875rem; padding-left: 2.25rem; }
html.pim-touch #filterCategory,
html.pim-touch #filterManufacturer,
html.pim-touch #filterStatus { min-height: 44px; font-size: 0.875rem; }
html.pim-touch #advFiltersToggle { min-width: 44px; min-height: 44px; }
html.pim-touch #btnViewList, html.pim-touch #btnViewGrid { min-width: 44px; min-height: 44px; padding: 0.5rem; }

/* Products table */
html.pim-touch #productsTable td { padding: 0.75rem 0.5rem; font-size: 0.8125rem; }
html.pim-touch #productsTable th { padding: 0.625rem 0.5rem; font-size: 0.6875rem; }
html.pim-touch #productsTable input[type="checkbox"] { width: 1.375rem; height: 1.375rem; }
html.pim-touch #productsTable .m3-icon-btn,
html.pim-touch #productsTable button[class*="p-1"] { min-width: 40px; min-height: 40px; padding: 0.375rem; }
html.pim-touch #productsTable .rounded-full { min-height: 28px; padding: 0.25rem 0.75rem; font-size: 0.75rem; }

/* Products grid — 2 columns */
html.pim-touch #productsGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; }

/* Pagination buttons */
html.pim-touch #pagination button { min-width: 44px; min-height: 44px; font-size: 0.875rem; }

/* Category list */
html.pim-touch #catListContainer > div,
html.pim-touch #catListContainer button,
html.pim-touch #catListContainer a { min-height: 44px; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
html.pim-touch #catSearch { min-height: 44px; font-size: 0.875rem; }
html.pim-touch .cat-desc-filter { font-size: 0.75rem; padding: 0.375rem 0.75rem; min-height: 36px; }

/* Bulk floating bar */
html.pim-touch #bulkFloatingBar > div { border-radius: 1rem; }
html.pim-touch #bulkFloatingBar button { min-height: 48px; padding: 0.75rem 1rem; font-size: 0.8125rem; gap: 0.5rem; }
html.pim-touch #bulkFloatingBar button .material-symbols-outlined { font-size: 22px; }
html.pim-touch #bulkFloatingBar #bulkCount { min-width: 32px; height: 32px; font-size: 0.875rem; }

/* Modals — large/fullscreen on touch */
html.pim-touch #textGenModal > div,
html.pim-touch #imageModal > div { max-width: calc(100vw - 1.5rem) !important; max-height: calc(100vh - 2rem) !important; margin: 0.75rem; }
html.pim-touch #btnSubmitGen { min-height: 52px; font-size: 0.9375rem; padding: 0.75rem 1.5rem; }
html.pim-touch #imageGrid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.75rem; }
html.pim-touch #textGenModal button { min-height: 44px; }

/* Series/Mfr-Cat table cells */
html.pim-touch #tab-series table td,
html.pim-touch #tab-mfr-cat table td,
html.pim-touch #tab-filter-pages table td { padding: 0.75rem 0.5rem; font-size: 0.8125rem; }

/* Kanban horizontal scroll snapping */
html.pim-touch #boardColumnsWrapper { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
html.pim-touch .kanban-column { scroll-snap-align: start; min-width: calc(100vw - 2rem); }
html.pim-touch .card-action-btn,
html.pim-touch .kanban-card .m3-icon-btn { min-width: 2.5rem; min-height: 2.5rem; }

/* Portrait: stack PIM category sidebar */
html.pim-touch.pim-portrait .tab-content .flex.flex-col.md\:flex-row { flex-direction: column !important; }
html.pim-touch.pim-portrait .tab-content .w-full.md\:w-72,
html.pim-touch.pim-portrait .tab-content .w-72 { width: 100% !important; max-width: none !important; max-height: 35vh; border-right: none !important; border-bottom: 1px solid var(--md-sys-color-outline-variant); }

/* Landscape: side-by-side categories */
html.pim-touch.pim-landscape #tab-categories { flex-direction: row !important; }
html.pim-touch.pim-landscape #tab-categories > .w-full.md\:w-72 { width: 280px !important; max-width: 280px !important; max-height: none !important; }
html.pim-touch.pim-landscape #productsGrid { grid-template-columns: repeat(3, 1fr) !important; }

/* ── Analogs Step 3 candidates grid on tablet ─────────────────────────── */
/* Keep original left/right layout — floating chip handles visibility */
html.pim-touch .product-row > .flex.flex-col.sm\:flex-row > div:first-child {
    /* Use the original left column, just tighten it a bit */
    width: 11rem !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
}

/* Make candidate grid use 2-column minimum */
html.pim-touch .product-row [style*="minmax(170px"] {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
}


/* ── Floating product chip (JS-injected) ─────────────────────────────── */
#analogsFloatingProduct {
    display: none;
    position: fixed;
    top: 0;
    left: var(--sidebar-width, 4rem);
    right: 0;
    z-index: 9990;
    background: var(--md-sys-color-surface-container);
    border-bottom: 2px solid var(--md-sys-color-primary);
    padding: 0.75rem 1.25rem;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border-radius: 0 0 0.75rem 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
/* Show only on pim-touch — JS sets opacity:1 when active */
html.pim-touch #analogsFloatingProduct { display: flex; left: 4rem; }
html.pim-touch.pim-phone #analogsFloatingProduct { left: 0; }

/* ══════════════════════════════════════════════════════════════════════
   ANALOGS: Tablet / Touch Overhaul
   ══════════════════════════════════════════════════════════════════════ */

/* ── Base touch adjustments ─────────────────────────────────────────── */
@media (any-pointer: coarse) {
    /* Bulk checkboxes always visible on touch */
    html.pim-touch .analog-bulk-check {
        opacity: 1 !important;
        visibility: visible !important;
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    /* Analog action buttons — larger touch targets */
    html.pim-touch .analog-card button[data-action] {
        min-height: 36px !important;
        font-size: 0.6875rem !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 0.375rem !important;
    }
    html.pim-touch .analog-card button[data-action] .material-symbols-outlined {
        font-size: 16px !important;
    }
    /* Step 1: category checkboxes — larger tap area */
    html.pim-touch .analogs-cat-check {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    html.pim-touch label[data-cat-label] {
        min-height: 44px !important;
        padding: 0.5rem 0.75rem !important;
    }
    /* Step 2: attribute / manufacturer checkboxes */
    html.pim-touch .attribute-checkbox,
    html.pim-touch .analogs-mfg-check {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    html.pim-touch #attributesCheckboxes label,
    html.pim-touch #analogsManufacturerList label {
        min-height: 44px !important;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.8125rem !important;
    }
    /* Step buttons — larger */
    html.pim-touch .analogs-step-btn {
        min-height: 44px !important;
        font-size: 0.8125rem !important;
    }
    /* Pattern pills — touchable */
    html.pim-touch #analogsPatternsList button {
        min-height: 40px !important;
        padding: 0.375rem 0.75rem !important;
    }
    /* Card filter buttons */
    html.pim-touch .card-filter-btn {
        min-height: 40px !important;
        padding: 0.375rem 0.75rem !important;
    }
    /* Coverage panel */
    html.pim-touch .analogs-cov-tab {
        min-height: 40px !important;
    }
    /* Search results scroll momentum */
    html.pim-touch #analogsSearchResults {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    /* Product row — gap between items */
    html.pim-touch #analogsSearchResults > .space-y-3,
    html.pim-touch #analogsSearchResults > div {
        gap: 0.75rem;
    }
}

/* ── Touch product rows — header strip layout (JS renders differently) ── */
@media (any-pointer: coarse) {
    /* Product header strip — compact horizontal */
    html.pim-touch .product-row-header {
        padding: 0.625rem !important;
        gap: 0.625rem !important;
    }
    html.pim-touch .product-row-header img {
        border-radius: 0.5rem;
    }
    /* Attrs toggle: nice tap target */
    html.pim-touch .product-attrs-toggle summary {
        min-height: 40px;
        display: flex;
        align-items: center;
    }
    html.pim-touch .product-attrs-toggle .product-attrs-section {
        margin: 0;
        padding: 0;
        border: none;
    }
    /* Action icon buttons in header */
    html.pim-touch .product-row-header button,
    html.pim-touch .product-row-header a {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Candidates grid: responsive sizing per orientation */
    html.pim-touch .analog-candidates-grid {
        gap: 0.5rem !important;
    }
    /* Candidate cards: larger action buttons */
    html.pim-touch .analog-card button[data-action] {
        min-height: 36px !important;
        font-size: 0.6875rem !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 0.375rem !important;
    }
    html.pim-touch .analog-card button[data-action] .material-symbols-outlined {
        font-size: 16px !important;
    }
}

/* ── Portrait: tighter grid ───────────────────────────────────────── */
@media (any-pointer: coarse) and (orientation: portrait) {
    html.pim-touch .analog-candidates-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    }
    html.pim-touch .product-row-header img {
        width: 56px !important;
        height: 56px !important;
    }
}

/* ── Landscape: slightly wider cards ──────────────────────────────── */
@media (any-pointer: coarse) and (orientation: landscape) {
    html.pim-touch .analog-candidates-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }
}

/* ── Phone (<640px): ultra-compact ────────────────────────────────── */
@media (max-width: 640px) {
    html.pim-touch .analog-candidates-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    }
    html.pim-touch .product-row-header img {
        width: 48px !important;
        height: 48px !important;
    }
    html.pim-touch .product-row-header {
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }
    html.pim-touch .analog-card button[data-action] {
        min-height: 32px !important;
    }
}
#analogsFloatingProduct img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.625rem;
    object-fit: contain;
    border: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
    background: var(--md-sys-color-surface-container-lowest, #111);
}
#analogsFloatingProduct .afp-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
#analogsFloatingProduct .afp-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}
#analogsFloatingProduct .afp-meta {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#analogsFloatingProduct .afp-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
#analogsFloatingProduct .afp-attr {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--md-sys-color-surface-container, rgba(0,0,0,0.06));
    font-size: 0.625rem;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    line-height: 1.4;
}
#analogsFloatingProduct .afp-attr b {
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
}
#analogsFloatingProduct .afp-price {
    color: var(--md-sys-color-primary);
    font-weight: 800;
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* ===== BATCH SPREADSHEET EDITOR ===== */
#batchEditorTable {
    border-spacing: 0;
    min-width: 100%;
}
#batchEditorTable th {
    position: relative;
    user-select: none;
}
#batchEditorTable th::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: var(--md-sys-color-outline-variant, #444);
}
#batchEditorTable td {
    vertical-align: middle;
}
.batch-cell-input:focus {
    background: color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 8%, transparent) !important;
    outline: none;
}
.batch-cell-input::selection {
    background: color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 25%, transparent);
}
#batchEditorBody tr:nth-child(even) {
    background: color-mix(in srgb, var(--md-sys-color-surface-container, #1E1E1E) 30%, transparent);
}
#batchEditorBody tr:hover {
    background: color-mix(in srgb, var(--md-sys-color-surface-container-low, #252525) 60%, transparent) !important;
}
.batch-col-highlight {
    background: color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 5%, transparent) !important;
}
/* Frozen columns shadow */
#batchEditorTable th[class*="sticky"],
#batchEditorTable td[class*="sticky"] {
    background: var(--md-sys-color-surface-container-lowest, #121212);
}
#batchEditorTable th[class*="left-8"]::before,
#batchEditorTable td[class*="left-8"]::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, rgba(0,0,0,0.12), transparent);
    pointer-events: none;
}
/* Batch editor responsive */
@media (max-width: 768px) {
    #batchEditorPanel {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .batch-cell-input {
        font-size: 11px !important;
    }
}

/* Review tab switcher states */
.review-tab-btn {
    color: var(--md-sys-color-on-surface-variant, #999);
    transition: all 0.15s ease;
}
.review-tab-btn.active {
    background: var(--md-sys-color-surface-container-lowest, #1a1a1a);
    color: var(--md-sys-color-on-surface, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Search inputs with icon — fix icon overlap on touch devices */
@media (any-pointer: coarse) {
    html.pim-touch input.m3-input[class*="pl-7"] {
        padding-left: 2.5rem !important;
    }
}