/* ============================================================
   BlackBox Mail Alias Management — Frontend Styles
   ============================================================ */

/* ============================================================
   Document-style table layout
   (BuddyBoss scopes these to #media-stream / #media-folder-document-data-table;
    we replicate under our own stream container #bbxmam-alias-stream)
   ============================================================ */

/* --- Table header --- */
#bbxmam-alias-stream .document-data-table-head {
    display: flex;
    border-bottom: 1px solid var(--bb-content-border-color);
    padding: 0 0 8px;
}

#bbxmam-alias-stream .document-data-table-head .data-head {
    font-size: 12px;
    color: #939597;
}

#bbxmam-alias-stream .document-data-table-head .data-head span {
    text-transform: uppercase;
}

#bbxmam-alias-stream .document-data-table-head .data-head-name {
    flex-basis: calc(80% - 50px);
}

#bbxmam-alias-stream .document-data-table-head .data-head-modified {
    flex-basis: 20%;
}

/* --- Checkbox column (header + rows) --- */
#bbxmam-alias-stream .document-data-table-head .data-head-check,
#bbxmam-alias-stream .media-folder_items .bbxmam-alias-check {
    width: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Narrow name column when checkboxes are present */
#bbxmam-alias-stream.bbxmam-bulk-enabled .document-data-table-head .data-head-name {
    flex-basis: calc(80% - 91px);
}

#bbxmam-alias-stream.bbxmam-bulk-enabled .media-folder_items .media-folder_details {
    width: calc(80% - 125px);
}

/* --- Table rows --- */
#bbxmam-alias-stream .media-folder_items {
    margin: 0;
    border-bottom: 1px solid var(--bb-content-border-color);
    padding: 15px 0;
    display: flex;
    align-items: center;
}

#bbxmam-alias-stream .media-folder_items:last-child {
    border-bottom: 0;
}

#bbxmam-alias-stream .media-folder_items .media-folder_icon {
    width: 34px;
    padding-right: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

#bbxmam-alias-stream .media-folder_items .media-folder_details {
    display: flex;
    width: calc(80% - 107px);
    flex-flow: column;
}

#bbxmam-alias-stream .media-folder_items .media-folder_details .media-folder_name {
    font-size: 14px;
    color: var(--bb-headings-color, #122b46);
}

#bbxmam-alias-stream .media-folder_items .media-folder_modified {
    width: 20%;
}

#bbxmam-alias-stream .media-folder_items .media-folder_details__bottom .media-folder_date {
    font-size: 13px;
    color: var(--bb-alternate-text-color, #939597);
}

#bbxmam-alias-stream .media-folder_items .media-folder_group {
    display: none;
}

#bbxmam-alias-stream .media-folder_items .media-folder_actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    flex-shrink: 0;
    position: relative;
}

/* --- Dropdown: hidden by default, visible with .open --- */
#bbxmam-alias-stream .media-folder_items .media-folder_action__list {
    position: absolute;
    top: 30px;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.05), 0 6px 32px 0 rgba(18, 43, 70, 0.1);
    border-radius: 10px;
    width: 198px;
    display: none;
    z-index: 100;
}

#bbxmam-alias-stream .media-folder_items .media-folder_action__list.open {
    display: block;
}

/* --- Mail icon in document-style rows --- */
.bbxmam-alias-item .media-folder_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #7f868f;
}

/* --- Three-dot anchor button (like .media-folder_action__anchor) --- */
.bbxmam-action__anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #939597;
    text-decoration: none;
    width: 32px;
    height: 32px;
}

.bbxmam-action__anchor:hover {
    color: #122b46;
}

/* --- Dropdown title bar (hidden on desktop, shown on mobile when open) --- */
#bbxmam-alias-stream .bb_more_dropdown .bb_more_dropdown__title {
    display: none;
    background-color: var(--bb-content-alternate-background-color, #f5f5f5);
    padding: 10px 15px;
    position: relative;
    align-items: center;
    border-radius: var(--bb-block-radius, 4px) var(--bb-block-radius, 4px) 0 0;
}

#bbxmam-alias-stream .bb_more_dropdown .bb_more_dropdown__close_button {
    color: var(--bb-headings-color, #122b46);
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    right: 15px;
    top: 11px;
}

/* --- Dropdown list: reset browser defaults, match BuddyBoss ul style --- */
#bbxmam-alias-stream .media-folder_action__list ul {
    list-style: none;
    margin: 0;
    padding: 8px;
}

#bbxmam-alias-stream .media-folder_action__list ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- Delete link inside dropdown (matches BuddyBoss <li><a> style) --- */
#bbxmam-alias-stream .media-folder_action__list ul li a.bbxmam-alias-delete {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--bb-body-text-color, #7f868f);
    text-decoration: none;
    white-space: nowrap;
}

#bbxmam-alias-stream .media-folder_action__list ul li a.bbxmam-alias-delete:hover {
    background-color: var(--bb-content-alternate-background-color, #f5f5f5);
    color: var(--bb-danger-color, #c0392b);
}

#bbxmam-alias-stream .media-folder_action__list ul li a.bbxmam-alias-delete i {
    font-size: 20px;
    margin-right: 10px;
    width: 20px;
    flex-shrink: 0;
}

/* --- Migrated badge --- */
.bbxmam-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 500;
    cursor: help;
    vertical-align: middle;
}

.bbxmam-badge-migrated {
    background: #e2e3e5;
    color: #383d41;
}

/* --- Modal: alias input row (input @ domain) --- */
.bbxmam-alias-input-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 6px;
}

.bbxmam-alias-input-wrap input[type="text"] {
    flex: 1 1 0;
    min-width: 0;
}

.bbxmam-alias-input-wrap select#bbxmam-domain {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}

.bbxmam-at-sign {
    font-size: 1.1em;
    font-weight: 600;
    padding: 0 2px;
    flex-shrink: 0;
}

/* --- Modal: help text --- */
.bb-field-wrap .bp-help-text {
    font-size: 14px;
    line-height: 1.5;
}

/* --- Modal: footer --- */
.bb-model-footer {
    background: transparent;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

/* ============================================================
   Responsive — mobile dropdown (matches BuddyBoss nav behaviour)
   ============================================================ */

@media screen and (max-width: 980px) {

    /* Fixed, screen-centred dropdown — identical to BuddyBoss .bb-footer / nav.bp-navs */
    #bbxmam-alias-stream .media-folder_items .media-folder_action__list.open {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: calc(100% - 100px);
        height: fit-content;
        max-width: 220px;
        overflow: auto;
        padding: 0;
        z-index: 992;
        border: 1px solid var(--bb-content-border-color);
        border-radius: var(--bb-block-radius, 4px);
    }

    /* Show title bar with "Optionen" label and × close button */
    #bbxmam-alias-stream .media-folder_items .media-folder_action__list.open .bb_more_dropdown__title {
        display: flex;
        border-bottom: 1px solid var(--bb-content-border-color);
    }

    /* Semi-transparent overlay behind the dropdown */
    #bbxmam-alias-stream .media-folder_items .media-folder_action__list.open + .bb_more_dropdown_overlay {
        background-color: rgba(0, 0, 0, 0.1);
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 991;
    }

}

/* ============================================================
   Responsive — narrow screens
   ============================================================ */

@media screen and (max-width: 540px) {

    /* Hide column headers and checkboxes */
    #bbxmam-alias-stream .document-data-table-head {
        display: none;
    }

    #bbxmam-alias-stream .media-folder_items .bbxmam-alias-check {
        display: none;
    }

    /* Hide mail icon (would sit alone on its own line in column mode) */
    #bbxmam-alias-stream .media-folder_items .media-folder_icon {
        display: none;
    }

    /* Switch rows to vertical layout */
    #bbxmam-alias-stream .media-folder_items {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        position: relative;
        padding-right: 48px;
    }

    /* Name and date take full width */
    #bbxmam-alias-stream .media-folder_items .media-folder_details,
    #bbxmam-alias-stream.bbxmam-bulk-enabled .media-folder_items .media-folder_details {
        width: 100%;
    }

    #bbxmam-alias-stream .media-folder_items .media-folder_modified {
        width: 100%;
    }

    /* Three-dot actions: vertically centred on the right edge */
    #bbxmam-alias-stream .media-folder_items .media-folder_actions {
        position: absolute;
        top: 19px;
        right: 0;
        width: 44px;
    }

}