/* ==========================================================================
   1. PAGE LAYOUT & CONTAINERS
   ========================================================================== */

/* Main Container for the Contacts View */
.t-contacts-view-container {
    padding: 0;
    background-color: var(--mud-palette-background);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Scrollable List Area */
.t-contacts-list-scroll-area {
    display: flex;
    gap: 4px;
    margin: 0 4px;
    padding: 0 2px 8px 2px;
    flex-direction: column;
    overflow-y: auto;
    margin-bottom: 16px;
    border-radius: 8px;
}


/* ==========================================================================
   2. SEARCH HEADER
   ========================================================================== */

.t-contacts-search-header {
    display: flex;
    gap: 8px;
    padding: 16px 8px;
    flex-grow: 1;
}

    /* Specific MudBlazor overrides for the search input within contacts */
    .t-contacts-search-header .mud-input-control {
        margin-top: 0px !important;
        width: 0;
        flex-grow: 1;
        min-width: 92px;
    }

    .t-contacts-search-header .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-radius: 12px;
    }

    /* Label Background fix */
    .t-contacts-search-header.t-contacts-search-bg-fix .mud-input-label-outlined {
        background-color: var(--mud-palette-background);
    }

    /* Label Positioning Overrides */
    .t-contacts-search-header .mud-input-label-outlined {
        transform: translate(14px, 17px) scale(1);
    }

    .t-contacts-search-header .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
        transform: translate(26px, -6px) scale(.75);
    }

    .t-contacts-search-header .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
        transform: translate(26px, -6px) scale(.75);
    }

    .t-contacts-search-header .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end {
        padding: 16.5px 14px;
        padding-inline-start: 26px;
    }


/* ==========================================================================
   3. CONTACT CARD AND PROFILE
   ========================================================================== */

/* Main content wrapper inside the card */
.t-contact-card-content {
    padding: 16px;
    padding-top: 0;
    display: flex;
    row-gap: 6px;
    flex-direction: column;
}

/* Action Icons Bar (Phone, SMS, Email, etc.) */
.t-contact-actions-bar {
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
    gap: 8px;
    align-items: center;
    container-type: inline-size;
    container-name: actions-bar;
    margin-top: 0px;
    align-items: center;
    padding-top: 0;
}

.t-actions-button {
    border-radius: 8px !important;
    height: 32px;
    min-width: 38px!important;
}

.responsive-btn-text {
    display: none;
}

.t-actions-button .mud-button-icon-start {
    margin: 0 !important;
}

.t-contact-more-button{
        margin-left: auto;
}

.t-contact-more-button > button {
    width: 36px;
    height:36px;
}

/* When the container is wider than 600px, show text */
@container actions-bar (min-width: 600px) {
    .responsive-btn-text {
        display: inline;
        text-transform: none;
        font-weight: 400;
        margin-left: 8px;
    }

    .t-actions-button {
        border-radius: 8px !important;
        height: 32px;
        min-width: 64px !important;
    }
}

/* Notes Field Specifics */
.t-contact-notes-field {
    grid-column: 2; /* Maintained for grid contexts */
    height: 100%;
}

    .t-contact-notes-field textarea.mud-input-root {
        margin: 12px 12px 10px !important;
        color: var(--mud-palette-text-primary);
    }


/* Desktop Profile */
.t-form-card-mud-grid-contact {
    min-height: 192px;
    width: 100% !important;
    margin: 0px !important;
    padding-bottom: 8px!important;
}

    .t-form-card-mud-grid-contact .mud-grid-item {
        padding: 0px !important;
    }

    .t-form-card-mud-grid-contact .mud-grid-item {
        padding: 0px !important;
    }



/* ==========================================================================
   4. ADDRESS AND CONTACT GRIDS
   ========================================================================== */

/* -- Address Specific Grid -- */
.t-address-grid {
    display: grid;
    grid-template-columns: 60px 2fr 2fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "address address address address"
        "postalcode city city city";
    grid-gap: 10px;
    row-gap: 9px;
    height: auto;
}

.t-address {
    grid-area: address;
    height: 33px;
}

.t-postalcode {
    grid-area: postalcode;
    height: 33px;
}

.t-city {
    grid-area: city;
    height: 33px;
}

/* -- General Contact Info Grid -- */
.contact-grid-card {
    display: grid;
    grid-template-columns: 60px 2fr 60px 2fr 60px 2fr 60px 2fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "firstname firstname firstname firstname lastname lastname lastname lastname"
        "email email email email mobile mobile mobile mobile"
        "address address address address postalcode postalcode city city"
        "internal internal internal internal internal internal internal internal";
    grid-gap: 10px;
}

    .contact-grid-card .firstname {
        grid-area: firstname;
    }

    .contact-grid-card .lastname {
        grid-area: lastname;
    }

    .contact-grid-card .fullname {
        grid-area: firstname/firstname/lastname/lastname;
    }

    .contact-grid-card .email {
        grid-area: email;
    }

    .contact-grid-card .mobile {
        grid-area: mobile;
    }

    .contact-grid-card .address {
        grid-area: address;
    }

    .contact-grid-card .postalcode {
        grid-area: postalcode;
    }

    .contact-grid-card .city {
        grid-area: city;
    }

    .contact-grid-card .triolinkinternalinfo {
        font-size: large;
        grid-area: internal;
    }


/* ==========================================================================
   5. CONTAINER QUERIES
   ========================================================================== */

/* Triggers when the parent container (Main Window/Card) is > 800px.
   Splits the card content into two columns (Inputs Left, Notes Right). */
@container (min-width: 600px) {
    .t-contact-card-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 16px;
        height: 100%;
        padding-bottom: 0px;
    }

        .t-contact-card-content .t-editable-text-box,
        .t-contact-card-content .t-standard-text-box {
            grid-column: 1;
        }

    .t-contact-notes-field {
        grid-column: 2;
        grid-row: 1 / span 4;
        height: calc(100% - 6px);
    }

        .t-contact-notes-field .mud-input-control-input-container {
            height: 100%;
        }

            .t-contact-notes-field .mud-input-control-input-container .mud-input.mud-input-outlined {
                height: 100%;
            }

                .t-contact-notes-field .mud-input-control-input-container .mud-input.mud-input-outlined > textarea {
                    height: calc(100% - 32px) !important;
                    margin-bottom: 10px;
                }
}


/* ==========================================================================
   6. MEDIA QUERIES
   ========================================================================== */

/* Mobile: Stack grid items vertically */
@media only screen and (max-width: 481px) {
    .contact-grid-card {
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "firstname firstname firstname firstname lastname lastname lastname lastname"
            "mobile mobile mobile mobile mobile mobile mobile mobile"
            "email email email email email email email email"
            "address address address address address address address address"
            "postalcode postalcode postalcode postalcode city city city city"
            "internal internal internal internal internal internal internal internal";
        grid-gap: 20px;
    }
}

/* Large Screens: Horizontal spread */
@media only screen and (min-width: 1250px) {
    .contact-grid-card {
        display: grid;
        grid-template-columns: 60px 2fr 60px 2fr 60px 2fr 60px 2fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "firstname firstname lastname lastname email email mobile mobile"
            "address address address address postalcode postalcode city city"
            "internal internal internal internal internal internal internal internal";
        grid-gap: 10px;
    }
}


/* ==========================================================================
   7. NEW
   ========================================================================== */



    .t-contacts-search-header .mud-input-control {
        background-color: var(--mud-palette-surface);
        border-radius: 12px; 
        transition: box-shadow 0.2s ease;
    }

        /* Hover effect on search bar */
        .t-contacts-search-header .mud-input-control:hover,
        .t-contacts-search-header .mud-input-control:focus-within {
            box-shadow: 0 6px 10px rgba(0,0,0,0.2);
        }