/******* STICKED BUTTONS ON THE RIGHT SIDE *********/
.fixed-button {
    position: fixed;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#deleteSelectedEntriesBtn {
    bottom: 310px;
    right: 20px;
    opacity: 0.8;
    background-color: var(--default-button-bg);
    border: 2px solid var(--default-border-color);
    color: white;
}

#addNewPersonExternalBtn1418 {
    bottom: 250px;
    right: 20px;
    opacity: 0.8;
    background-color: var(--default-button-bg);
    border: 2px solid var(--default-border-color);
    color: white;
}

#addNewPersonExternalBtn {
    bottom: 190px;
    right: 20px;
    opacity: 0.8;
    background-color: var(--default-button-bg);
    border: 2px solid var(--default-border-color);
    color: white; /* default text color */
}

#addNewPersonBtn {
    bottom: 130px;
    right: 20px;
    opacity: 0.8;
    background-color: var(--default-button-bg);
    border: 2px solid var(--default-border-color);
    color: white; /* default text color */
}

#viewTreeBtn {
    bottom: 70px; /* Adjust this value to place it below the addNewPersonBtn */
    right: 20px;
    opacity: 0.8;
    background-color: var(--default-button-bg);
    border: 2px solid var(--default-border-color);
    color: var(--default-text-color);
}

/******* CHECK BOX STYLES FOR CARD *********/
.check-box-right {
    position: absolute;
    bottom: 18px;
    right: 18px;
    border: 2px solid var(--default-border-color);
    border-radius: 4px; /* Rounded corners */
    color: var(--default-button-i-color);
    background: var(--default-button-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

    /* Style the actual checkbox */
    .check-box-right input[type="checkbox"] {
        accent-color: var(--default-button-bg);
        cursor: pointer;
    }

    /* Hover state */
    .check-box-right:hover {
        background-color: var(--default-button-bg-hover);
        color: var(--default-button-clr-hover);
    }

    /* Focus state */
    .check-box-right input[type="checkbox"]:focus {
        outline: none;
        box-shadow: 0 0 1px 1px var(--default-form-check-input-focus);
        background-color: var(--default-button-focus);
    }

    /* Disabled state */
    .check-box-right input[type="checkbox"]:disabled {
        background-color: var(--default-button-bgr-disabled);
        color: var(--default-button-clr-disabled);
        cursor: not-allowed;
    }

    /* Active state */
    .check-box-right input[type="checkbox"]:checked {
        background-color: var(--default-button-active);
        color: var(--default-button-clr-hover);
    }

/* Hide the checkbox visually */
.hidden-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Default: Unchecked state shows an empty square (fa-square) */
.check-label i::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Regular weight for fa-square (empty box) */
    content: "\f0c8"; /* Empty square icon (fa-square) */
}

/* When checkbox is checked, show a checkmark icon (fa-check) */
.hidden-checkbox:checked + .check-label i::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Solid weight for fa-check (checkmark) */
    content: "\f00c"; /* Checkmark icon (fa-check) */
    color: black;
}

/* Optional: Change the label background or border to visually indicate */
.hidden-checkbox:checked + .check-label {
    border-color: var(--default-button-bg-hover);
}


/********** CARD STYLES *********/
/* Card flip container styling */
.card {
    perspective: 1000px;
    position: relative;
}

.card-style {
    position: relative;
    background-color: var(--default-card-bg);
    perspective: 1000px; /* Enable 3D perspective for flipping effect */
    position: relative;
    transition: transform 0.6s ease-in-out;
}

.card-front, .card-reverse {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
    position: relative;
    top: 0;
    left: 0;
}

.card-front {
    transform: rotateY(0deg);
}

.card-reverse {
    transform: rotateY(180deg);
}

.card.flipped .card-front {
    transform: rotateY(-180deg);
}

.card.flipped .card-reverse {
    transform: rotateY(0deg);
}

.card-padding-style {
    width: 100%;
    height: 100%;
    padding: 14px 14px 0;
    position: relative;
}

.card-img-padding-style {
    background-color: var(--default-button-bg);
    width: 100%;
    height: 350px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.card-reverse-padding-style {
    background-color: var(--default-button-bg);
    width: 100%;
    height: 350px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    font-size: 0.875rem;
    border: 2px solid var(--default-border-color); /* Debugging */
    border-radius: 6px;
    box-sizing: border-box;
}

.me-2 {
    /*border: 1px solid blue;*/ /* Debugging */
}


    .card-reverse-padding-style input,
    .card-reverse-padding-style select {
        font-size: 0.75rem; /* Smaller font size */
        margin: 4px 0; /* Reduced vertical spacing */
        padding: 4px; /* Adjusted padding to make controls more compact */
    }

    .card-reverse-padding-style label {
        margin: 0; /* Remove default margin */
        line-height: 1; /* Ensure consistent line-height */
        vertical-align: middle; /* Align label text to middle */
    }

    .card-reverse-padding-style .row.mb-3 {
        margin-bottom: 0px; /* Reduce spacing between rows */
        margin-top: 0px; /* Reduce spacing between rows */
    }

    .card-reverse-padding-style .d-flex {
        align-items: center; /* Center align label and input vertically */
    }


.card-photo-style,
.card-photo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px; /* Optional: Adds rounded corners to the image */
    transition: opacity .15s ease;
}

.card-photo-style.is-loading,
.card-photo-img.is-loading {
    opacity: .15;
}

.card.card-style {
    content-visibility: auto;
    contain-intrinsic-size: 360px 280px;
}

.card--fadein {
    opacity: 0;
    transition: opacity .1s ease;
}

.card--fadein.is-ready {
    opacity: 1;
}

.card-nametag-padding-style {
    background-color: var(--default-button-bg);
    width: 100%;
    height: auto; /* Dynamic height */
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
    justify-content: center;
    padding-left: 15px; /* Add padding to adjust the left alignment */
}

.card-title {
    min-height: 50px; /* Set minimum height to ensure consistency */
    margin-bottom: 5px; /* Space between title and subtitle */
    text-align: left; /* Align title to the left */
}

.card-subtitle {
    margin: 0;
    text-align: left; /* Align subtitle to the left */
    font-size: 0.875rem; /* Example smaller font size, adjust as needed */
}


.button-group-padding-style {
    padding-top: 16px;
    padding-left: 10px;
    padding-bottom: 16px;
}


/****** MODAL DIALOG WINDOW POPUP WINDOW ******/
.modal-custom-responsive {
    max-width: 50%; /* 80% of the screen width */
    height: 90%; /* 70% of the screen height */
}

.modal-content {
    height: 100%; /* Ensure modal content fills the modal's height */
}

.modal-body {
    max-height: 600px; /* Adjust this based on your layout */
    position: relative; /* Ensure the container can be a reference for child elements */
    -ms-overflow-style: none; /* Hide the scrollbar for Internet Explorer and Edge */
    overflow: auto; /* Allow scrolling */
}

.modal-body::-webkit-scrollbar {
    display: none; /* Hide the scrollbar for WebKit browsers */
}

.modal-photo-container {
    float: left;
    margin-right: 20px;
}

.modal-description {
    text-align: justify;
}

.modal-footer {
    padding: 5px 10px; /* Reduce the padding */
    font-size: 14px; /* Optional: Decrease font size if needed */
}

.close-btn {
    position: sticky; /* Fixes the button at the bottom */
    margin-bottom: 15px; /* Distance from the bottom of the modal */
    margin-right: 15px; /* Distance from the right side */
    z-index: 10; /* Ensure it stays on top of the content */
    padding: 10px 20px;
    background-color: var(--default-button-bg);
    border: 2px solid var(--default-border-color);
    color: var(--default-button-i-color);
    border-radius: 5px;
}

/********* CONTAINER ************/
.details-container {
    margin-left: 0px;
}

.detail-row {
    display: flex;
    align-items: center;
}

.label {
    min-width: 150px; /* Ensures labels have fixed width */
    display: inline-block;
    margin-right: 10px; /* Space between label and span */
}

.aligned-span {
    flex-grow: 1; /* The span will take up the remaining space */
}

.btn-secondary {
    padding: 5px 10px; /* Adjust button size if needed */
}

.close-btn-container {
    display: flex; /* Use flexbox to align the button */
    justify-content: flex-end; /* Align items to the end (right) */
    position: relative; /* Relative positioning for the container */
}


/****** Modal dialog boxes for URL search *****/
.modal-url {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content-url {
    background-color: #fefefe;
    margin: 10% auto; /* Made the modal taller */
    padding: 40px; /* Increase padding for a more prominent look */
    border: 1px solid #888;
    width: fit-content;
    text-align: center;
    position: relative;
    height: 400px; /* Increased height for the modal */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

#externalUrl {
    padding: 8px;
    font-size: 16px;
}

#externalUrl1418 {
    padding: 8px;
    font-size: 16px;
}

/* Suggestions dropdown styling */
.suggestions-box {
    width: 600px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    top: 45px; /* Adjusted to be below the input field */
    left: 0px;
    z-index: 5; /* Ensure it is above other elements */
    max-height: 300px;
    overflow-y: auto;
    display: none; /* Initially hidden */
}

    .suggestions-box p {
        margin: 0;
        padding: 6px 12px; /* Reduced padding for tighter spacing */
        cursor: pointer;
        font-size: 14px; /* Smaller font for more compact design */
    }

        .suggestions-box p:hover {
            background-color: #f1f1f1;
        }

#suggestions1418 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 600px; /* Same width as the input field */
    max-height: 300px; /* Limits the height of the suggestions box */
    overflow-y: auto; /* Adds vertical scrolling if content overflows */
    border: 1px solid #ccc;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.suggestion-item {
    padding: 8px;
    text-align: left;
    cursor: pointer;
}

    .suggestion-item:hover {
        background-color: #f0f0f0;
    }


/******** Popup Menu *********/
.popup-menu {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 15px; /* Align to the bottom of .card-front */
    right: 10px; /* Align to the right of .card-front */
    background-color: var(--default-button-bg);
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Keeps the popup menu above other elements */
    border-radius: 4px;
    width: 130px; /* Optional: set a width for the popup menu */
}

.popup-options {
    list-style-type: none; /* Removes bullet points */
    padding: 0; /* Removes padding from the list */
    margin: 0; /* Removes margin from the list */
}

    .popup-options li {
        padding: 5px 10px; /* Optional: adds padding to each option */
    }

.popup-option {
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* ===== Photo overlay controls on card image (vertical right rail) ===== */
.card-photo-wrapper {
    /* Fill the photo area (.card-img-padding-style is absolute 350px high) */
    position: relative;
    width: 100%;
    height: 100%;
    display: flex; /* keep the image centered as before */
    align-items: center;
    justify-content: center;
    border-radius: 10px; /* matches .card-photo-style rounded corners */
    overflow: hidden; /* keep overlay inside rounded corners */
}

/* Vertical toolbar on the right edge (minimal footprint over photo) */
/* Transparent vertical overlay that only appears on hover/focus */
.photo-controls {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column; /* stack vertically */
    align-items: flex-end; /* align to the right edge */
    justify-content: center; /* center vertically */
    gap: 10px;
    padding-right: 6px;
    opacity: 0; /* hidden by default */
    pointer-events: none; /* ignore clicks when hidden */
    background: transparent; /* no tint at all */
    transition: opacity 0.2s ease-in-out;
    z-index: 3; /* above overlay */
}

    /* Subtle rail to improve icon legibility without covering the photo */
    .photo-controls::before {
        content: "";
        position: absolute;
        right: -4px; /* hugs the edge */
        top: 0;
        bottom: 0;
        width: 44px; /* narrow rail */
        border-radius: 12px;
        background: linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,0));
        z-index: -1; /* sits behind buttons */
    }

/* Show controls on hover or keyboard focus */
.card-photo-wrapper:hover .photo-controls,
.card-photo-wrapper:focus-within .photo-controls,
.card-photo-wrapper.controls-visible .photo-controls {
    opacity: 1;
    pointer-events: auto;
}


/* Show controls on hover or keyboard focus */
.card-photo-wrapper.drag-hover {
    outline: 2px dashed #48a9f8;
    outline-offset: 4px;
    box-shadow: inset 0 0 0 2px #48a9f8;
}

.drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(72,169,248,.12); /* tip: try rgba(203,193,174,.2) for your palette */
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2; /* above image, below controls */
}

.drop-msg {
    background: #fff;
    padding: .5rem .75rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

/* Buttons (harmonized with main button palette, slightly lighter base) */
/* NOTE: to keep both styles without conflict, this rule now targets .photo-btn.solid.
   Use <button class="photo-btn solid"> if you want the solid variant on any button. */
.photo-btn.solid {
    border: none;
    background: rgba(240, 240, 240, 0.95); /* lighter neutral gray base */
    color: var(--default-button-i-color, #333);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Transparent floating photo controls */
.photo-btn {
    border: none;
    background: transparent; /* fully transparent background */
    color: rgba(255, 255, 255, 0.9); /* bright white icon */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none;
}

    .photo-btn i {
        font-size: 20px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* subtle drop shadow for readability */
    }

    /* Hover & focus — slightly brighter with soft halo */
    .photo-btn:hover,
    .photo-btn:focus-visible {
        color: #fff;
        transform: scale(1.1);
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
        outline: none;
    }

    /* Star (same style, slightly larger for visual hierarchy) */
    .photo-btn.star {
        width: 44px;
        height: 44px;
        color: rgba(255, 255, 255, 0.9);
    }

        .photo-btn.star:hover,
        .photo-btn.star:focus-visible {
            color: #fff;
            transform: scale(1.15);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

    /* Disabled */
    .photo-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

    /* --- Star (PIN) : pinned state --- */
    .photo-btn.star i {
        transition: transform .2s ease, color .2s ease, text-shadow .2s ease;
    }

    /* when the star is pinned */
    .photo-btn.star.is-pinned {
        color: #ffd54d; /* gold; swap for your palette if you prefer */
        animation: pin-pop 160ms ease-out;
    }

        .photo-btn.star.is-pinned i {
            text-shadow: 0 0 10px rgba(255, 213, 77, .9), 0 2px 6px rgba(0,0,0,.5);
            transform: scale(1.15);
        }

/* subtle pop animation */
@keyframes pin-pop {
    0% {
        transform: scale(.9);
    }

    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* --- Flash ring on the photo after pin --- */
.card-photo-wrapper.flash-primary::after {
    content: "";
    position: absolute;
    inset: 6px; /* keeps inside rounded corners */
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(255, 213, 77, .95);
    pointer-events: none;
    animation: flash-border .8s ease-out forwards;
}

@keyframes flash-border {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Force gold when pinned (covers button, <i>, and FA ::before glyph) */
.photo-btn.star.is-pinned,
.photo-btn.star.is-pinned i,
.photo-btn.star.is-pinned i::before {
    color: #ffd54d !important; /* use !important to beat .text-white and similar */
}

    /* Don't let :hover / :focus-visible repaint pinned star back to white */
    .photo-btn.star.is-pinned:hover,
    .photo-btn.star.is-pinned:focus-visible {
        color: #ffd54d !important;
    }

    /* Optional: if you have any global .text-white on the icon specifically, neutralize it when pinned */
    .photo-btn.star.is-pinned i.text-white {
        color: #ffd54d !important;
    }

/* ===== GHOST "ADD NEW" CARD — single source of truth ===== */

/* Anchor the absolutely-positioned ghost */
#cardsContainer {
    position: relative;
}

/* Ghost "Add New" card */
#ghostAddCard {
    position: absolute; /* precise placement via JS */
    display: block;
    box-sizing: border-box;
    /* width/height are set by JS to match a real card */
    border: 2px dashed var(--default-border-color);
    border-radius: 6px;
    background-color: var(--default-card-bg);
    box-shadow: 0 1px 8px rgba(0,0,0,.08);
    opacity: 0; /* hidden by default */
    pointer-events: none; /* not clickable when hidden */
    transform: translateZ(0); /* avoid flicker on quick moves */
    transition: opacity .18s ease, box-shadow .18s ease;
    z-index: 9; /* above grid, below popup (10) & fixed buttons (1000) */
}

    #ghostAddCard.ghost-visible {
        opacity: 1;
        pointer-events: auto; /* clickable when visible */
    }

    #ghostAddCard:hover,
    #ghostAddCard:focus-visible {
        box-shadow: 0 4px 14px rgba(0,0,0,.10);
    }

    #ghostAddCard.disabled {
        opacity: 0.6;
        pointer-events: none;
    }

/* Treat the ghost as a solid slab; center its content */
.card.add-card .card-padding-style {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
}

/* Collapse inner blocks so there are no two shaded areas */
.card.add-card .card-img-padding-style.ghost-photo,
.card.add-card .card-nametag-padding-style,
.card.add-card .button-group-padding-style {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    height: 0;
    padding: 0;
}

/* Centered glyph/text */
.card.add-card .ghost-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none; /* clicks go to the card itself */
}

.card.add-card .add-plus {
    font-size: 3.25rem;
    line-height: 1;
}

.card.add-card .add-label {
    font-size: 1rem;
    opacity: .9;
}

/* ---------- Back card rows: label | field ---------- */
.card-reverse-padding-style {
    --label-w: 112px; /* single knob; bump for RU if needed */
}

    .card-reverse-padding-style .d-flex {
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px; /* space between label & field */
        margin-bottom: 4px; /* gentle vertical spacing */
    }

        .card-reverse-padding-style .d-flex:last-child {
            margin-bottom: 0;
        }

        /* Labels: fixed column, no clipping */
        .card-reverse-padding-style .d-flex > label {
            flex: 0 0 var(--label-w);
            margin: 0 !important; /* kill Bootstrap margin */
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25; /* avoid descender cutoffs */
            height: 26px; /* match control height */
            display: flex;
            align-items: center;
        }

        /* Fields: fill remaining width, same height across types */
        .card-reverse-padding-style .d-flex > input.form-control,
        .card-reverse-padding-style .d-flex > select.form-control {
            flex: 1 1 auto;
            min-width: 0;
            width: 100%;
            height: 26px;
            padding: 2px 6px;
            font-size: 0.85rem;
            line-height: 1.2;
            appearance: none; /* keeps date/select compact cross-browser */
        }

    /* Trim extra default margins inside panel */
    .card-reverse-padding-style input,
    .card-reverse-padding-style select {
        margin: 2px 0;
    }

    /* Validation: don’t steal width; show under the field only on error */
    .card-reverse-padding-style .d-flex > span.text-danger {
        display: none;
    }

        .card-reverse-padding-style .d-flex > span.text-danger.field-validation-error {
            display: block;
            order: 3; /* after the field */
            flex: 0 0 100%;
            margin-top: 2px;
            margin-left: calc(var(--label-w) + 10px); /* align under field */
            font-size: 0.78rem;
            line-height: 1.15;
        }

/* Dim/disable pointer while the card is in edit-lock */
.card.edit-lock .button-group-padding-style .button.is-locked {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.card.edit-lock .check-box-right,
.card.edit-lock .check-label {
    opacity: .45;
    pointer-events: none;
}

/* index.css */
.is-locked {
    opacity: .45;
    pointer-events: none; /* makes clicks inert */
}

/* Responsive: labels above inputs on very narrow cards (if ever) */
@media (prefers-reduced-motion: reduce) {
    #ghostAddCard {
        transition: none;
    }
}

/* On pure touch devices, keep photo controls visible by default (leave as-is) */
@media (hover: none) and (pointer: coarse) {
    .photo-controls {
        opacity: 1;
        pointer-events: auto;
    }
}