/* /home/wal/python/mywal-bober/darkovnik/static/darkovnik/css/custom.css */

/* ==========================================================================
   1. Global Utilities
   ========================================================================== */
.view-hidden {
    display: none !important;
}

/* --- Global Aesthetic Refresh --- */

/* 1. Background Gradients */
[data-bs-theme="light"] body {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    background-attachment: fixed;
}

[data-bs-theme="dark"] body {
    background: linear-gradient(135deg, #1e2024 0%, #121416 100%);
    background-attachment: fixed;
}

/* 2. Soft Cards & Modals */
.card, .modal-content {
    border: none !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="dark"] .card, 
[data-bs-theme="dark"] .modal-content {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* 3. Pill Buttons Globally */
.btn:not(.btn-close):not(.navbar-toggler):not(.dropdown-toggle) {
    border-radius: 50rem !important;
}

/* Fix button groups so pills don't break them */
.btn-group > .btn {
    border-radius: 0 !important;
}
.btn-group > .btn:first-child {
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius: 50rem !important;
}
.btn-group > .btn:last-child {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}

/* 4. Forms */
.form-control, .form-select {
    border-radius: 1rem;
    padding: 0.75rem 1.25rem;
    border-color: var(--bs-border-color-translucent);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}

/* 5. Segmented Controls (Filtering Pills) */
.segmented-control {
    display: inline-flex;
    background-color: var(--bs-tertiary-bg);
    border-radius: 50rem;
    padding: 0.25rem;
    gap: 0.25rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.segmented-control .btn {
    border-radius: 50rem !important;
    border: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
    background-color: transparent;
    color: var(--bs-secondary-color);
}
.segmented-control .btn:hover {
    background-color: rgba(0,0,0,0.05);
}
[data-bs-theme="dark"] .segmented-control .btn:hover {
    background-color: rgba(255,255,255,0.05);
}
.segmented-control .btn.active, 
.segmented-control .btn-success,
.segmented-control .btn-secondary:not(.btn-outline-secondary) {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* 6. Condensed Item Rows Alignment */
/* Override list-group to look like floating pills instead of connected lists */
.list-group.sortable-item-list {
    background: transparent;
    border: none;
    gap: 0.5rem;
}
.list-group-item.condensed-item-row {
    border: none !important;
    border-radius: 1rem !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-bs-theme="dark"] .list-group-item.condensed-item-row {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}
.list-group-item.condensed-item-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}
[data-bs-theme="dark"] .list-group-item.condensed-item-row:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
     2. Typography & Text Elements
     ========================================================================== */

/* --- Small Timestamps / Descriptions --- */
/* .timestamp-small, .group-member-wishlist-timestamp, .group-member-wishlist-description moved to Bootstrap utility classes (.small, .text-sm) */

/* --- Text Truncation for Item Descriptions --- */

.description-content {
    position: relative; /* For the ::after pseudo-element */
    transition: max-height 0.35s ease-in-out; /* Smooth transition */
    word-wrap: break-word; /* Ensure long words break to prevent overflow */
    overflow-wrap: break-word; /* Standard property */
}

.description-content.truncated {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show 3 lines */
    line-clamp: 3; /* Standard property */
    -webkit-box-orient: vertical;
    /* max-height will be controlled by line-clamp, no fixed height needed */
}

/* Remove fade-out effect */
.description-content.truncated::after {
    display: none;
}

.description-content.expanded {
    display: block; /* Reset flex/box display to normal block */
    /* max-height: 1000px; */ /* Not strictly needed if we just remove line-clamp, but good for transition if we add it back later */
}

/* ==========================================================================
     3. Navigation (Navbar, Menus)
     ========================================================================== */

/* --- Navbar Avatar --- */
.navbar-avatar {
    width: 28px;
    height: 28px;
    object-fit: cover;
    margin-right: 0.5rem;
}

/* --- Mobile Navbar Menu Rework --- */
.nav-mobile-section-header .nav-link.disabled {
    /* Style the span if using nav-link disabled */
    padding: 0.75rem 1rem 0.25rem 1rem; /* More top padding, less bottom */
    color: var(--bs-secondary-color); /* Use a muted color */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* border-bottom: 1px solid var(--bs-border-color-translucent); */ /* Optional bottom border */
}

/* --- Navbar Height Consistency (Mobile only now) --- */
/* Ensure sticky navbar has no shadow that could be perceived as a line */
.navbar.sticky-top {
    box-shadow: none !important;
}

/* --- Sidebar Navigation Styles --- */
.sidebar-nav {
    transition: width 0.3s ease;
    z-index: 1030;
}

/* Custom Scrollbar for Sidebar */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: var(--bs-border-color);
    border-radius: 10px;
}
.sidebar-nav:hover::-webkit-scrollbar-thumb {
    background-color: var(--bs-secondary);
}

.sidebar-nav .nav-link {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.sidebar-nav .nav-link:hover:not(.active) {
    background-color: var(--bs-secondary-bg);
    transform: translateX(2px);
}

.hover-bg-subtle:hover {
    background-color: var(--bs-secondary-bg);
}

/* Fix mobile menu offcanvas width */
.offcanvas-end {
    max-width: 85%;
}

/* ==========================================================================
     4. Avatars & Images (General image styling, previews, clickable images)
     ========================================================================== */

.user-list-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
}
.owner-avatar {
    /* Used in group_detail */
    width: 20px;
    height: 20px;
    object-fit: cover;
}
.add-member-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
}

/* --- Image Containers & Previews --- */
.item-list-image-container {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}
.image-preview-thumbnail {
    /* For edit modal image preview */
    max-height: 100px;
    max-width: 150px;
}
.profile-avatar-preview {
    /* For profile edit page */
    max-height: 100px;
    max-width: 100%; /* Keep this to prevent overflow */
    object-fit: cover;
}
.received-gift-image-container {
    /* For received gifts list */
    max-width: 80px;
}

/* --- Clickable Image Styling --- */
/* Make image containers that open item detail modal appear clickable */
.item-image-clickable {
    cursor: pointer;
}

/* --- Clickable Image Styling --- */
/* Make image containers that open item detail modal appear clickable */
.item-image-clickable {
    cursor: pointer;
}

/* --- Floating Action Button (FAB) --- */
.fab-add-item {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    display: none; /* Hidden by default (on PC) */
    align-items: center;
    justify-content: center;
    z-index: 1040; /* Above sticky header (1019) and content */
    border: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.fab-add-item:hover {
    transform: scale(1.1);
}

@media (max-width: 767.98px) {
    .fab-add-item {
        display: flex; /* Visible on mobile */
        bottom: 1.5rem;
        right: 1.5rem;
        width: 50px;
        height: 50px;
    }
    
    .fab-add-item .bi {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================================
     5. Forms & Input Elements
     ========================================================================== */
.form-control-sm-min-height {
    /* For link inputs in edit modal */
    min-height: calc(1.5em + 0.5rem + 2px);
}
.checkbox-list-scrollable {
    /* For group/wishlist sharing checkboxes */
    max-height: 200px;
    overflow-y: auto;
}
.checkbox-list-scrollable-lg {
    /* For add group member modal */
    max-height: 300px;
    overflow-y: auto;
}
/* --- Metadata Loading Indicator (related to URL input) --- */
.metadata-loading-indicator .spinner-border-sm {
    vertical-align: text-bottom; /* Aligns spinner better with text */
}

/* --- Select2 Customizations --- */
.select2-selection__clear {
    /* Add some space to the right of the X (clear button), pushing it slightly left from the dropdown arrow */
    margin-right: 1rem; /* Adjust this value as needed */
    /* Ensure it's visually distinct if needed, e.g., slightly more prominent */
}

/* ==========================================================================
     6. Cards & Item Display (Item cards, list rows, specific item features)
     ========================================================================== */

/* ==========================================================================
     8. Mobile UI/UX Enhancements
     ========================================================================== */
/* ... (Moved mobile button styles here if needed, but they were partly inside the removed block. 
   Wait, checking lines 253-380 which were NOT .item-card-redesign but part of section 8. 
   I must be careful only to remove .item-card-redesign parts) 
*/

/* --- Item List Row Buttons (Mobile) --- */
@media (max-width: 767.98px) {
    /* Below md breakpoint */
    .item-list-actions-mobile {
        /* Ensure the container takes up space below the text content */
        margin-top: 0.75rem; /* Add some space above the buttons */
        padding-top: 0.75rem; /* Add padding inside the container */
        border-top: 1px solid var(--bs-border-color); /* Add a separator line */
        /* d-flex flex-wrap gap-1 are already in the HTML */
    }

    /* Hide the pressure of the owner's "(Vaše)" status column on mobile to prevent redundant spacing/border */
    .item-owner-status-indicator {
        display: none !important;
    }
    /* Hide the pool's "(Archivováno)" status column on mobile if action buttons are present */
    .item-pool-status-indicator {
        display: none !important;
    }

    /* Style the claim actions container (right-most column) on mobile
     to visually match the owner actions container */
    .row.align-items-center.gx-0.px-3.py-2 > .col-auto.text-end {
        width: 100%; /* Ensure it takes full width when stacking */
        margin-top: 0.75rem; /* Consistent spacing */
        padding-top: 0.75rem; /* Consistent spacing */
        border-top: 1px solid var(--bs-border-color); /* Consistent separator */
        /* text-align: right; is already on this element via Bootstrap class */
        /* Buttons inside are already handled by the rule below */
    }

    .item-list-actions-mobile .btn,
  /* Also target buttons in the right-aligned claim column */
  .row.align-items-center.gx-0.px-3.py-2 > .col-auto.text-end .btn {
        /* Target buttons directly inside the flex container or the claim column */
        padding-top: 0.5rem !important; /* Adjusted for icon to appear higher */
        padding-bottom: 0.5rem !important; /* Keep total vertical padding for "taller" feel */
        /* py-0 is used in HTML, so use !important to override */
        flex: 1 1 0; /* Grow, shrink, basis 0 for equal distribution */
        min-width: 44px; /* Ensure minimum touch target size */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-list-actions-mobile form {
        /* Ensure forms within the flex container behave correctly */
        display: flex; /* Make the form a flex container itself to properly size its child button. */
        flex: 1 1 0; /* Match button flex behavior, basis 0 for equal distribution */
        min-width: 44px; /* Match button min-width */
    }

    .item-list-actions-mobile form .btn {
        /* Button inside a form */
        width: 100%; /* Make button fill the form's width */
        /* Padding and flex properties are inherited/set above */
    }

    .item-list-actions-mobile .btn .d-none.d-sm-inline,
    .row.align-items-center.gx-0.px-3.py-2
        > .col-auto.text-end
        .btn
        .d-none.d-sm-inline {
        display: none !important; /* Hide text on mobile for all targeted buttons */
    }

    /* --- NEW: Unified Mobile Action Button Sizing --- */
    .mobile-action-item {
        flex: 1 1 0;
        display: flex;
        min-width: 0; /* Allow shrinking below content size */
    }

    .mobile-action-item .btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Item Detail Modal Buttons (Mobile) --- */
@media (max-width: 767.98px) {
    /* Below md breakpoint */
    #itemDetailModal .modal-body .btn {
        /* Target all buttons directly inside the modal body on mobile */
        padding-top: 0.6rem !important; /* Increase vertical padding */
        padding-bottom: 0.6rem !important; /* Increase vertical padding */
        /* py-0 is used in HTML, so use !important to override */
        /* flex properties handled by parent d-flex/d-grid */
        min-width: 44px; /* Ensure minimum touch target size */
        text-align: center; /* Center icon */
    }

    #itemDetailModal .modal-body form {
        /* Ensure forms within flex/grid containers behave correctly */
        display: flex; /* Make form a flex item */
        flex: 1 1 auto; /* Match button flex behavior */
        min-width: 44px; /* Match button min-width */
    }

    #itemDetailModal .modal-body form .btn {
        /* Button inside a form */
        width: 100%; /* Make button fill the form's width */
        /* Padding and flex properties are inherited/set above */
    }

    /* Removed rule hiding text and icon spacing as HTML structure is simplified */
}

/* --- Item List Row - Desktop Action Buttons --- */
@media (min-width: 768px) {
    /* md breakpoint and up */
    .item-list-actions-desktop {
        /* This div is d-none d-md-flex flex-column gap-1 align-items-stretch */
        min-width: 130px; /* Adjust as needed for button text */
        /* max-width: 150px; */ /* Optional: prevent it from getting too wide */
    }

    .item-list-actions-desktop .btn,
    .item-list-actions-desktop form > .btn {
        /* Target button inside d-grid form */
        /* width: 100%; */ /* Ensured by align-items-stretch on parent and d-grid on form */
        /* text-align: left; is set in HTML template */
        padding-top: 0.25rem; /* Adjust padding for sm buttons */
        padding-bottom: 0.25rem;
    }
}

/* --- Lists Spacing --- */
/* Target list group items within our specific item list containers (e.g., wishlist_detail, item_pool) */
.list-group[id^="list-view-items-"] > .list-group-item {
    margin-bottom: 0.5rem; /* Add desired spacing, overrides Bootstrap's default negative margin */
    border-radius: var(
        --bs-list-group-border-radius
    ) !important; /* Ensure all items have rounded corners */
}

/* Restore top border for items that are not the first, as Bootstrap hides it for connected items */
.list-group[id^="list-view-items-"] > .list-group-item:not(:first-child) {
    border-top-width: var(--bs-list-group-border-width);
}

/* Remove bottom margin from the last item in each list group */
.list-group[id^="list-view-items-"] > .list-group-item:last-child {
    margin-bottom: 0;
}
/* Spacing for Condensed View Items */
.list-group[id^="condensed-view-items-"] > .list-group-item.condensed-item-row {
    margin-bottom: 0.25rem; /* Smaller spacing for condensed view */
    border-radius: var(
        --bs-list-group-border-radius
    ) !important; /* Ensure all items have rounded corners */
}

/* Restore top border for condensed items that are not the first */
.list-group[id^="condensed-view-items-"]
    > .list-group-item.condensed-item-row:not(:first-child) {
    border-top-width: var(--bs-list-group-border-width);
}

/* Remove bottom margin from the last condensed item in each list group */
.list-group[id^="condensed-view-items-"]
    > .list-group-item.condensed-item-row:last-child {
    margin-bottom: 0;
}

/* --- Item Priority Visual Indicator --- */
.priority-border-high {
    border-left: 5px solid #f8d7da !important; /* Soft red */
}
.priority-border-low {
    border-left: 5px solid #d1e7dd !important; /* Soft green */
}

/* ==========================================================================
     7. Page-Specific Styles
     ========================================================================== */

/* --- Dashboard Page --- */
.dashboard-activity-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

/* --- Landing Page --- */
.landing-page-hero-image {
    max-height: 350px;
    object-fit: contain;
}

/* --- Sticky Layout (Ensures body is scrollable) --- */
html {
    height: 100%; /* Ensure html takes full height */
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Use min-height so body can grow with content */
    overflow-y: auto; /* Explicitly make body scrollable vertically */
}
/* Main is no longer responsible for pushing footer, the flex-column wrapper does that */
main {
    /* We keep overflow visible to allow sticky headers inside main to work */
    overflow: visible; 
}

/* --- Sticky Wishlist Header --- */
.sticky-header-container {
    position: sticky;
    top: 56px; /* Default for mobile (accounts for mobile top navbar) */
    z-index: 1019;
    background-color: var(--bs-body-tertiary);
    border-bottom: 1px solid var(--bs-border-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

@media (min-width: 992px) {
    .sticky-header-container {
        top: 0; /* No top navbar on PC anymore, so it can stick to the very top */
    }
}

.sticky-header-container + * {
    margin-top: 1rem;
}

/* Shrunk State Base */
.header-shrunk {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
}

/* Header Text Elements */
.header-owner-username {
    /* Maps to slightly smaller than fs-5 */
    font-size: 1.125rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-wishlist-name {
    /* Maps to fs-5 */
    font-size: 1.25rem;
    font-weight: 600;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-shrunk .header-owner-username {
    /* Maps to small */
    font-size: 0.875rem;
}

.header-shrunk .header-wishlist-name {
    /* Maps to fs-6 */
    font-size: 1rem;
    font-weight: 500;
}

/* Collapsible Content (Description, Timestamp, Mobile Groups) */
.header-collapsible-content {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s ease-in-out, 
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-shrunk .header-collapsible-content {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    pointer-events: none;
    border-top-width: 0 !important;
}

/* Interactivity */
.hover-underline:hover {
    text-decoration: underline !important;
}

/* --- Responsive Adjustments --- */

@media (max-width: 767.98px) {
    /* Mobile: Ensure horizontal flow even in default state for "Sleekness" */
    .header-names-container {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.25rem;
    }
    
    .header-owner-username {
        font-size: 1rem; /* fs-6 */
        max-width: 100px;
    }
    
    .header-wishlist-name {
        font-size: 1.125rem; /* slightly larger than fs-6 */
        max-width: 150px;
    }

    /* Mobile Shrunk Tweaks */
    .header-shrunk .header-owner-username {
        max-width: 70px;
        font-size: 0.875rem; /* small */
    }

    .header-shrunk .header-wishlist-name {
        max-width: 100px;
        font-size: 0.875rem; /* small */
    }

    /* Hide the dot separator on mobile when shrunk */
    .header-shrunk .header-names-container .text-muted {
        display: none !important;
    }
    
    /* Ensure PC shrunk meta doesn't show on mobile! */
    .header-shrunk .header-groups-pc {
        display: none !important;
    }
}

@media (min-width: 768px) {
    /* PC Specific Shrunk Meta */
    .header-shrunk .header-groups-pc {
        display: flex !important;
        border-left-width: 1px !important;
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
    }
}

/* Ghosting/Transition fix: ensure internal children transition their layout/opacity */
.shrunk-hide {
    transition: opacity 0.2s ease-in-out;
}

.header-shrunk .shrunk-hide {
    opacity: 0;
    display: none !important;
}

/* Action Buttons Transition & Sizing */
.btn-header-action {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 992px) {
    /* Standardize width on PC (lg+) */
    .btn-header-action {
        min-width: 100px;
        justify-content: center;
    }
}

.header-shrunk .btn-header-action {
    padding: 0.25rem 0.5rem;
}
/* --- END Sticky Wishlist Header --- */

/* Fix for Select2 dropdowns in Bootstrap Modals */
.select2-container--open {
    z-index: 9999 !important;
}

/* Hide Select2 tags for co-owners since we use external chips */
.select2-co-owners + .select2-container .select2-selection--multiple .select2-selection__choice {
    display: none !important;
}
/* Ensure the search input starts at the beginning when choices are hidden */
.select2-co-owners + .select2-container .select2-selection--multiple {
    padding-left: 0.5rem !important;
}
.select2-co-owners + .select2-container .select2-selection--multiple .select2-search--inline {
    margin-left: 0 !important;
}


/* Prettier co-owner chips */
.co-owner-chip {
    transition: all 0.2s ease-in-out;
    border: 1px solid rgba(0,0,0,0.05);
}
.co-owner-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.co-owner-remove-btn:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   Utility Classes (extracted from inline styles)
   ========================================================================== */
.cursor-pointer {
    cursor: pointer;
}
.cursor-move {
    cursor: move;
}
.cursor-grab {
    cursor: grab;
}
.notification-badge {
    font-size: 0.75em;
    padding: 0.2em 0.4em;
}
.item-detail-image {
    max-height: 300px;
    object-fit: contain;
}

/* ==========================================================================
   Mobile Touch Targets
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Increase touch targets for action buttons on mobile list rows */
    .item-list-actions .btn {
        min-height: 54px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* Utility to allow flex items to shrink below their content size */
.min-width-0 {
    min-width: 0 !important;
}

/* Remove focus highlight on mobile navbar toggler after offcanvas close */
.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

/* Mobile notification dropdown sizing */
#notification-list-mobile {
    width: 330px;
    max-width: calc(100vw - 2rem);
    right: 0;
    left: auto;
}

/* Prevent Floating Action Button (FAB) from covering last item card buttons on mobile */
@media (max-width: 767.98px) {
    #wishlist-items-container {
        padding-bottom: 5.5rem;
    }
}