/* Fluid, viewport-based typography across the app */
html {
    /* Scales base font-size with viewport width, within safe bounds */
    font-size: clamp(14px, 1.2vw + 0.5rem, 20px);
}

body {
    font-size: 1rem; /* keep body at 1rem based on the fluid root */
    line-height: 1.5;
    min-height: 100vh;
    /* Top layer = adjustable overlay, bottom layer = image */
    background-image: linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)), /* adjust 0.0–1.0 */
    url('/images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* remove on iOS Safari if it janks */
    background-color: #0f172a; /* fallback while image loads */
}

/* Optional: make native headings scale a bit more responsively */
h1 {
    font-size: clamp(1.6rem, 1.1rem + 2vw, 3rem);
}

h2 {
    font-size: clamp(1.4rem, 1.0rem + 1.5vw, 2.25rem);
}

h3 {
    font-size: clamp(1.25rem, 0.95rem + 1vw, 1.875rem);
}

h4 {
    font-size: clamp(1.125rem, 0.90rem + 0.8vw, 1.5rem);
}

h5 {
    font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.25rem);
}

h6 {
    font-size: clamp(1.0rem, 0.80rem + 0.4vw, 1.125rem);
}

/* Existing styles */
.items-default-margin {
    margin: 1rem !important;
}

.items-default-margin-right {
    margin-right: 1rem !important;
}
.items-small-margin-right {
    margin-right: 0.5rem !important;
}

.items-default-margin-left {
    margin-left: 1rem !important;
}

.items-default-margin-x {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}
.items-default-margin-y {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.items-default-margin-top {
    margin-top: 1rem !important;
}

.items-default-margin-bottom {
    margin-bottom: 1rem !important;
}
#nav-drawer, 
#nav-drawer .mud-drawer-paper {
    background-color: rgba(15, 23, 42, 0.60) !important; /* tune 0–1 for more/less transparency */
    backdrop-filter: blur(6px); /* optional "glass" effect */
    -webkit-backdrop-filter: blur(6px); /* Safari */
}
.mud-tabs-tabbar-content, .mud-toolbar, .mud-tabs-scroll-button {
    background-color: rgba(15, 23, 42, 0.90) !important; /* tune 0–1 for more/less transparency */
    backdrop-filter: blur(6px); /* optional "glass" effect */
    -webkit-backdrop-filter: blur(6px); /* Safari */
}
/*.hovarable-item {
    transition: transform 160ms ease, box-shadow 160ms ease, outline-color 160ms ease;
}

    .hovarable-item:hover {
        transform: translateY(-1px) scale(1.005);
    }*/
.widht100 {
    width: 100% !important;
}
.input-field {
    width: 5rem !important;    
}
.hovarable-item {
    /* outline doesn't scale; use box-shadow as a visual outline */
    transition: transform 160ms ease, box-shadow 160ms ease;
    transform-origin: top center; /* optional: keeps growth upwards */
    box-shadow: inset 0 0 0 2px #bca6e3, 0 4px 14px rgba(0,0,0,.18);
    /* make it a bit more grey (neutral slate tones) */
    /*/background: linear-gradient(135deg, rgba(14, 163, 184, 0.5), rgba(10, 1, 13, 0.5));*/
    background-color: rgba(15, 23, 42, 0.60) !important; /* tune 0–1 for more/less transparency */
    backdrop-filter: blur(6px); /* optional "glass" effect */
    -webkit-backdrop-filter: blur(6px); /* Safari */
}
.nonhovarable-item {
    /* make it a bit more grey (neutral slate tones) */
    /*/background: linear-gradient(135deg, rgba(14, 163, 184, 0.5), rgba(10, 1, 13, 0.5));*/
    background-color: rgba(15, 23, 42, 0.60) !important; /* tune 0–1 for more/less transparency */
    backdrop-filter: blur(6px); /* optional "glass" effect */
    -webkit-backdrop-filter: blur(6px); /* Safari */
}

.nonhovarable-item-panel {
    /* make it a bit more grey (neutral slate tones) */
    /*/background: linear-gradient(135deg, rgba(14, 163, 184, 0.5), rgba(10, 1, 13, 0.5));*/
    background-color: rgba(15, 23, 42, 0.60) !important; /* tune 0–1 for more/less transparency */
    backdrop-filter: blur(6px); /* optional "glass" effect */
    -webkit-backdrop-filter: blur(6px); /* Safari */
}

.mud-dialog {
    /* make it a bit more grey (neutral slate tones) */
    /*/background: linear-gradient(135deg, rgba(14, 163, 184, 0.5), rgba(10, 1, 13, 0.5));*/
    background-color: rgba(15, 23, 42, 0.60) !important; /* tune 0–1 for more/less transparency */
    backdrop-filter: blur(6px); /* optional "glass" effect */
    -webkit-backdrop-filter: blur(6px); /* Safari */
}

.hovarable-item:hover {
    transform: translateY(-1px) scale(1.002);
    /* first shadow = "outline", second = subtle elevation */
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary, #1976d2), 0 4px 14px rgba(0,0,0,.18);
}

.hovarable-skeleton {
    transition: transform 160ms ease, box-shadow 160ms ease, outline-color 160ms ease;
}

    .hovarable-skeleton:hover {
        transform: translateY(-2px) scale(1.025);
    }

.live-whishlist {
    border: 3px solid rgba(0,128,0,0.3);
}

.offline-whishlist {
    border: 1px solid rgb(128, 128, 128);
}

.whishlist-upper-panel-text {
    font-size: 0.7rem;
}

.main-page-link-text {
    color: #ffffff !important;
}

.devider-line {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.live-icon {
    color: rgba(19, 145, 237, 0.8) !important;
}

.bottom-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface, #fff);
    box-shadow: 0 -4px 14px -4px rgba(0,0,0,.25);
    border-top: 1px solid var(--mud-palette-lines-default, #ddd);
    z-index: 1300;
    overflow: hidden;
    height: 0px; /* collapsed height = header */
    transition: height .28s ease;
}

    .bottom-drawer.open {
        height: 75vh; /* expand to 50% viewport height */
    }

    .bottom-drawer .drawer-header {
        user-select: none;
        cursor: pointer;
    }

    .bottom-drawer .drawer-scroll {
        flex: 1 1 auto;
        overflow: hidden; /* prevent double scrollbars */
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0.5rem;
        overflow-y: scroll;
        scrollbar-gutter: stable;
    }

    .bottom-drawer.open .drawer-scroll {
        /* keeps same flex behavior when expanded */
    }

    .bottom-drawer .drawer-scroll .myitems-zone {
        flex: 1 1 auto;
        height: 100%;
        width: 100%;
    }

    .bottom-drawer .drawer-scroll .tile-flex-zone {
        height: 100%; /* let grid stretch to available space */
        overflow: auto; /* scrolling happens here */
        padding: 4px;
    }

    /* Optional subtle animation for new tiles inside drawer */
    .bottom-drawer.open .whishitem-new {
        animation: whishitem-fade-in .6s ease;
    }

/* New dynamic tile layout (grid) */
.tile-flex-zone {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    align-content: start;
    padding: 4px;
}

/* Tile style (responsive width & height driven by content) */
.whishitem-tile {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 100px;
    /* allow expansion but keep nicer max width */
    max-width: 360px;
    cursor: grab;
    position: relative;
}

    .whishitem-tile:active {
        cursor: grabbing;
    }

    .whishitem-tile .mud-icon-button {
        padding: 0;
    }

.whishitem-tile {
    padding-top: 32px;
}
/* Reserve space for action icon in wishlist item tiles */
.whishitem-tile {
    /* keep existing styles from utility classes */
}

.whishitem-action-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}
.whishitem-action-btn2 {
    position: absolute;
    top: 4px;
    right: 30px;
    z-index: 2;
}
.whishitem-tile-content {
    /* Reserve horizontal room so text and chips never sit beneath the icon */
    padding-right: 44px; /* icon (32) + gap */
    word-break: break-word;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Optional hover effect */
.whishitem-tile:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* If you want tighter layout on very small screens */
@media (max-width: 480px) {
    .tile-flex-zone {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .whishitem-tile {
        min-width: 140px;
    }
}

/* Add once-only animation class */
.whishitem-new {
    animation: fadeIn .18s ease;
}
/* Prevent MudTextField for wishlist search from vertically expanding */
.wishlist-search {
    flex: 0 0 auto !important;
    max-height: 40px; /* final capped height */
    min-height: 38px; /* keep consistent */
    line-height: 1; /* avoid inherited tall line-heights */
    margin-bottom: 0.5rem; /* explicit spacing (avoid collapsing) */
}

    /* Root of the outlined input */
    .wishlist-search .mud-input-root {
        height: 100% !important;
        min-height: 38px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex;
        align-items: center;
    }

    /* The control wrapper sometimes reserves vertical space */
    .wishlist-search .mud-input-control {
        margin: 0 !important;
        height: 100%;
    }

    /* Actual input element */
    .wishlist-search input.mud-input-slot {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        height: 100%;
        box-sizing: border-box;
    }

    /* Remove helper/counter area if rendered */
    .wishlist-search .mud-input-helper-text,
    .wishlist-search .mud-input-counter {
        display: none !important;
    }

/* Stop stretching inside flex column parent */
.no-flex-grow {
    flex-grow: 0 !important;
}

/* Safety: prevent long unbroken strings from forcing growth */
.wishlist-search input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Drawer for create wish item (full overlay on narrow screens) */
.wishitem-drawer {
    width: 100%;
    background: var(--mud-palette-surface,#fff);
}
@media (min-width: 900px) {
    .wishitem-drawer {
        width: 520px;
    }
}

/* Scrollable CreateWhishItemForm */
.create-wishitem-form-root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.create-wishitem-form {
    /* Let it stretch inside flex parent */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* important for nested flex scroll */
}

.create-wishitem-form-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem; /* space for scrollbar */
}

.create-wishitem-form-scroll::-webkit-scrollbar {
    width: 8px;
}
.create-wishitem-form-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.create-wishitem-form-scroll::-webkit-scrollbar-thumb {
    background: var(--mud-palette-grey-light);
    border-radius: 4px;
}
.create-wishitem-form-scroll:hover::-webkit-scrollbar-thumb {
    background: var(--mud-palette-grey);
}

.create-wishitem-form-actions {
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-background);
    padding-top: .5rem;
}

/* Optional: ensure the drawer paper fills available vertical space */
.create-wishitem-drawer-paper,
.bottom-drawer.open > .mud-paper.create-wishitem-drawer-paper {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* If the drawer itself does not already control height, constrain by viewport */
.bottom-drawer.open {
    max-height: 75vh;
}

/* Container scales to screen, centers content, and adds small padding on phones */
.share-dialog {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 8px;
}

/* QR image stays sharp and responsive on small screens */
.qr-wrapper {
    display: flex;
    justify-content: center;
}

.qr-img {
    max-width: 90vw;
    height: auto;
    aspect-ratio: 1 / 1;
    image-rendering: pixelated;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
}

/* Action buttons: row on larger screens, stacked full-width on phones */
.actions {
    display: flex;
}

@media (max-width: 600px) {
    .actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

        .actions .mud-button-root {
            width: 100%;
        }

    .share-dialog {
        max-width: 100%;
    }
}

.one-line-ellipsis {
    display: block; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.stack-span-full {
    flex: 1 1 95vw;
    width: 95vw;
    max-width: 95vw;
    margin-bottom: 1rem !important;
}

.paper-inner-padding-1rem {
    padding: 1rem;    
}
.paper-bottom-inner-padding-1rem {
    padding-bottom: 1rem;
}

/* Mud-like checkbox for native <InputCheckbox> */
.mudlike-checkbox {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    cursor: pointer;
    user-select: none;
}

/* Reset browser styles and draw the box */
.mudlike-checkbox-input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mud-palette-lines-default, rgba(0,0,0,.38));
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    display: grid;
    place-content: center;
    transition: border-color .2s, background-color .2s, box-shadow .2s, opacity .2s;
    margin: 0; /* avoid browser-specific checkbox margins */
}

    /* Checkmark */
    .mudlike-checkbox-input::before {
        content: "";
        width: 12px;
        height: 12px;
        /* Material-like check using polygon */
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
        transform: scale(0);
        transform-origin: center;
        transition: transform .15s ease-in-out;
        background: #fff;
    }

    /* Hover/focus */
    .mudlike-checkbox-input:hover {
        border-color: var(--mud-palette-primary, #1976d2);
    }

    .mudlike-checkbox-input:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(25,118,210,.25); /* fallback focus ring */
    }

    /* Checked state */
    .mudlike-checkbox-input:checked {
        background: var(--mud-palette-primary, #1976d2);
        border-color: var(--mud-palette-primary, #1976d2);
    }

        .mudlike-checkbox-input:checked::before {
            transform: scale(1);
        }

    /* Disabled */
    .mudlike-checkbox-input:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

        .mudlike-checkbox-input:disabled + .mudlike-checkbox-label {
            opacity: .6;
            cursor: not-allowed;
        }
/* Allow long single words to wrap instead of being cut off */
.break-anywhere {
    white-space: normal;
    overflow-wrap: anywhere;  /* preferred */
    word-break: break-word;   /* fallback */
    hyphens: auto;
}
    .break-anywhere.line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }