/* ==========================================================================
   Shopping List Styles - WI #772
   Adaptive UX with Swipe (Mobile) and Hover (Desktop)
   WCAG 2.2 Compliant
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties / Design Tokens
   ========================================================================== */

:root {
    /* Colors: no local palette here — every rule below reads the app's
       --mw-color-* tokens directly so this file tracks DESIGN.md and
       automatically follows .mud-theme-dark instead of prefers-color-scheme. */

    /* Focus - WCAG 2.2 requires min 3:1 contrast ratio */
    --shopping-focus-ring: 2px solid var(--mw-color-primary);
    --shopping-focus-ring-offset: 2px;
    --shopping-focus-outline: 3px solid rgba(10, 124, 90, 0.5);

    /* Sizing */
    --shopping-touch-target: 44px; /* WCAG 2.2 minimum */
    --shopping-item-padding: 12px 16px;
    --shopping-item-gap: 12px;
    --shopping-border-radius: 8px;

    /* Animations */
    --shopping-transition-fast: 150ms ease;
    --shopping-transition-normal: 250ms ease;
    --shopping-transition-slow: 350ms ease-out;
    --shopping-swipe-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Accessibility: Visually Hidden (Screen Readers Only)
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   Swipeable Shopping Item (Mobile/Touch)
   ========================================================================== */

.swipeable-item-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
    border-radius: var(--shopping-border-radius);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.swipeable-item-container:focus {
    outline: var(--shopping-focus-outline);
    outline-offset: var(--shopping-focus-ring-offset);
}

.swipeable-item-container:focus:not(:focus-visible) {
    outline: none;
}

.swipeable-item-container:focus-visible {
    outline: var(--shopping-focus-outline);
    outline-offset: var(--shopping-focus-ring-offset);
}

/* Swipe Action Backgrounds - Hidden by default, shown only during swipe */
.swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 24px;
    color: white;
    font-weight: 600;
    transition: opacity var(--shopping-transition-fast);
    opacity: 0 !important;
    pointer-events: none;
    visibility: hidden;
}

/* Show swipe action only during active swipe gesture */
.swipe-action.visible {
    opacity: 0.7 !important;
    pointer-events: auto;
    visibility: visible;
}

.swipe-action.active {
    opacity: 1 !important;
    visibility: visible;
}

.swipe-action-left {
    right: 0;
    left: auto;
    background: var(--mw-color-error);
    justify-content: flex-end;
    width: 100%;
}

.swipe-action-right {
    left: 0;
    right: auto;
    background: var(--mw-color-success);
    justify-content: flex-start;
    width: 100%;
}

.swipe-action .action-text {
    margin-left: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.swipe-action-left .action-text {
    margin-left: 0;
    margin-right: 8px;
}

/* Swipeable Item Content */
.swipeable-item-content {
    position: relative;
    background: var(--mw-color-surface);
    border-radius: var(--shopping-border-radius);
    transition: transform var(--shopping-swipe-transition);
    will-change: transform;
    z-index: 1;
}

.swipeable-item-container.is-animating .swipeable-item-content {
    transition: transform var(--shopping-swipe-transition);
}

.swipeable-item-content.is-checked {
    background: rgba(46, 139, 87, 0.12);
}

.item-main {
    display: flex;
    align-items: center;
    padding: var(--shopping-item-padding);
    gap: var(--shopping-item-gap);
    min-height: var(--shopping-touch-target);
}

.item-checkbox {
    flex-shrink: 0;
}

.item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--mw-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-name.checked {
    text-decoration: line-through;
    color: var(--mw-color-text-disabled);
}

.item-quantity {
    font-size: 14px;
    color: var(--mw-color-text-secondary);
    flex-shrink: 0;
}

.item-quantity.checked {
    text-decoration: line-through;
}

/* Recipe source display - compact line under item name */
.item-recipe-source {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--mw-color-primary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-recipe-source .recipe-icon {
    flex-shrink: 0;
    font-size: 14px !important;
}

.item-recipe-source.checked {
    color: var(--mw-color-text-disabled);
    text-decoration: line-through;
}

.item-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mw-color-primary-pale);
    color: var(--mw-color-primary);
}

/* ==========================================================================
   Hoverable Shopping Item (Desktop/Mouse)
   ========================================================================== */

.hoverable-item-container {
    position: relative;
    background: var(--mw-color-surface);
    border-radius: var(--shopping-border-radius);
    margin-bottom: 8px;
    transition: box-shadow var(--shopping-transition-fast),
                background-color var(--shopping-transition-fast);
}

.hoverable-item-container:hover {
    box-shadow: var(--mw-shadow-md);
}

.hoverable-item-container.is-checked {
    background: rgba(46, 139, 87, 0.12);
}

/* Focus States - WCAG 2.2 Compliant */
.hoverable-item-container:focus {
    outline: var(--shopping-focus-outline);
    outline-offset: var(--shopping-focus-ring-offset);
}

.hoverable-item-container:focus:not(:focus-visible) {
    outline: none;
}

.hoverable-item-container:focus-visible {
    outline: var(--shopping-focus-outline);
    outline-offset: var(--shopping-focus-ring-offset);
}

.hoverable-item-container.is-focused {
    box-shadow: 0 0 0 3px rgba(10, 124, 90, 0.3);
}

.hoverable-item-container .item-content {
    display: flex;
    align-items: center;
    padding: var(--shopping-item-padding);
    gap: var(--shopping-item-gap);
    min-height: var(--shopping-touch-target);
}

.hoverable-item-container .item-details {
    flex: 1;
    min-width: 0;
}

.hoverable-item-container .item-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--mw-color-text-primary);
}

.hoverable-item-container .item-name.checked {
    text-decoration: line-through;
    color: var(--mw-color-text-disabled);
}

.hoverable-item-container .item-quantity {
    font-size: 14px;
    color: var(--mw-color-text-secondary);
    margin-left: auto;
    padding-right: 16px;
}

.hoverable-item-container .item-quantity.checked {
    text-decoration: line-through;
}

.hoverable-item-container .recipe-badge {
    flex-shrink: 0;
}

/* Action Buttons */
.hoverable-item-container .item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--shopping-transition-fast);
}

.hoverable-item-container .item-actions.visible {
    opacity: 1;
}

.hoverable-item-container .action-button {
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    transition: background-color var(--shopping-transition-fast);
}

.hoverable-item-container .action-button:hover {
    background-color: rgba(10, 124, 90, 0.04);
}

.hoverable-item-container .action-button:focus-visible {
    outline: var(--shopping-focus-ring);
    outline-offset: 2px;
}

.hoverable-item-container .action-button-delete:hover {
    background-color: rgba(229, 57, 53, 0.12);
}

.hoverable-item-container .item-notes {
    padding: 0 16px 12px 52px;
}

/* ==========================================================================
   Category Group
   ========================================================================== */

.category-group {
    margin-bottom: 16px;
}

.category-header {
    cursor: pointer;
    transition: background-color var(--shopping-transition-fast);
    border-radius: 12px 12px 0 0;
}

.category-header:hover {
    background-color: rgba(10, 124, 90, 0.02);
}

.category-header:focus {
    outline: var(--shopping-focus-outline);
    outline-offset: -2px;
}

.category-header:focus:not(:focus-visible) {
    outline: none;
}

.category-header:focus-visible {
    outline: var(--shopping-focus-outline);
    outline-offset: -2px;
}

.category-content {
    background: var(--mw-color-background);
}

.expand-icon {
    transition: transform var(--shopping-transition-fast);
}

/* ==========================================================================
   Reduced Motion Support - WCAG 2.2
   ========================================================================== */

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

    .swipeable-item-content {
        transition: none !important;
    }

    .swipeable-item-container.is-animating .swipeable-item-content {
        transition: none !important;
    }

    .hoverable-item-container,
    .hoverable-item-container .item-actions,
    .hoverable-item-container .action-button,
    .category-header,
    .expand-icon,
    .swipe-action {
        transition: none !important;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --shopping-focus-outline: 3px solid #000000;
    }

    .hoverable-item-container,
    .swipeable-item-content {
        border: 2px solid #000000;
    }

    .item-name {
        font-weight: 600;
    }

    .item-actions .action-button {
        border: 1px solid currentColor;
    }
}

/* Dark mode: every rule above reads --mw-color-* tokens directly, which are
   already redefined under .mud-theme-dark / [data-theme="dark"] in app.css —
   the app's actual theme-toggle mechanism — so no local override is needed
   here. (A prefers-color-scheme override previously lived here but never
   fired, since the app switches themes via a class, not the OS preference.) */

/* ==========================================================================
   Mobile-specific Styles
   ========================================================================== */

@media (max-width: 599px) {
    .swipeable-item-container {
        margin: 0 -16px 8px;
        border-radius: 0;
    }

    .swipeable-item-content {
        border-radius: 0;
    }

    .item-main {
        padding: 12px 16px;
    }

    .swipe-action {
        padding: 0 20px;
    }

    .swipe-action .action-text {
        display: none;
    }

    /* Larger touch targets on mobile */
    .item-checkbox {
        transform: scale(1.1);
    }
}

/* ==========================================================================
   Tablet and Desktop Styles
   ========================================================================== */

@media (min-width: 600px) {
    .hoverable-item-container .item-content {
        padding: 12px 20px;
    }

    .hoverable-item-container .item-actions {
        gap: 8px;
    }

    .hoverable-item-container .action-button {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .swipe-action,
    .item-actions,
    .item-checkbox {
        display: none !important;
    }

    .hoverable-item-container,
    .swipeable-item-content {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc;
    }

    .item-name.checked {
        text-decoration: line-through;
    }

    .item-name.checked::before {
        content: "[x] ";
    }

    .item-name:not(.checked)::before {
        content: "[ ] ";
    }
}