/**
 * Shared acara module UI (Bayuskill shell) — inline icons/badges + mobile table scroll.
 */

/* ── Inline badge groups (status + counter) ── */
.acara-inline-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    max-width: 100%;
    vertical-align: middle;
}

.acara-inline-badges.allow-wrap {
    flex-wrap: wrap;
}

.acara-inline-badges .badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
}

.acara-inline-badges .badge i.fa {
    display: inline-block;
    margin-right: 0.25rem;
    line-height: 1;
}

/* ── Buttons: icon + label always on one row ── */
.acara-btn-inline,
.welcome_docmed_area .btn.acara-btn-inline,
.welcome_docmed_area a.btn.acara-btn-inline {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.35rem;
    white-space: nowrap;
    vertical-align: middle;
}

.acara-btn-inline i.fa,
.welcome_docmed_area .btn i.fa,
.welcome_docmed_area a.btn i.fa,
.tindakan-col .btn i.fa {
    display: inline-block !important;
    line-height: 1;
    margin: 0;
    float: none;
}

.tindakan-col .acara-action-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
}

.tindakan-col .dropdown-toggle::after {
    margin-left: 0.15rem;
}

/* ── Table ── */
.main-card {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.table-acara th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    font-weight: 600;
    white-space: nowrap;
}

.table-acara td {
    vertical-align: middle;
    font-size: 0.875rem;
}

.table-acara .badge:not(.acara-inline-badges .badge) {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.tindakan-col {
    white-space: nowrap;
}

.tindakan-col .dropdown-menu {
    min-width: 14rem;
}

.tindakan-col .dropdown-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    white-space: normal;
    gap: 0.5rem;
}

.tindakan-col .dropdown-item i.fa-fw {
    width: 1.15em;
    text-align: center;
    flex-shrink: 0;
}

.dropdown-header-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
    padding: 0.4rem 1rem 0.2rem;
}

.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: #6c757d;
}

.empty-state > i.fa {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

/* ── Event hub sidebar ── */
.acara-sidebar .list-group-item-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.acara-sidebar .list-group-item-action i.fa {
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
}

.acara-sidebar .list-group-item-action .badge {
    margin-left: auto;
}

.jemputan-acara-page-head {
    gap: 0.75rem;
}

.jemputan-acara-page-head .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* ── Mobile: horizontal scroll table (Bayuskill parity) ── */
@media (max-width: 991.98px) {
    .table-acara-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-acara-scroll > .table-acara {
        min-width: 920px;
    }

    .acara-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }

    .acara-toolbar .acara-toolbar-search {
        width: 100%;
    }

    .acara-toolbar .acara-toolbar-search input[type="text"] {
        width: 100% !important;
        min-width: 0;
        flex: 1 1 auto;
    }

    .acara-page-actions {
        width: 100%;
        justify-content: flex-start !important;
    }
}

@media (max-width: 575.98px) {
    .jemputan-acara-page-head {
        flex-direction: column;
        align-items: stretch !important;
    }

    .jemputan-acara-page-head > .d-flex:last-child {
        width: 100%;
        justify-content: flex-start !important;
    }
}

/* ── Legacy Coderthemes cards inside Bayuskill shell ── */
.welcome_docmed_area .card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 1rem;
}

.welcome_docmed_area .card .header-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.welcome_docmed_area .list-group-item i.mdi {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.welcome_docmed_area .btn i.mdi,
.welcome_docmed_area .btn i.fa {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* Select2 inside Bayuskill forms */
.welcome_docmed_area .select2-container--default .select2-selection--single {
    min-height: 38px;
    padding-top: 4px;
    border-color: #ced4da;
    border-radius: 0.375rem;
}
.welcome_docmed_area .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
.welcome_docmed_area .select2-container {
    width: 100% !important;
}
.welcome_docmed_area .select2-container--default.select2-container--focus .select2-selection--single,
.welcome_docmed_area .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.welcome_docmed_area .is-invalid + .select2-container .select2-selection--single {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

/* ── Sticky footer (Bayuskill shell): footer at viewport bottom on short pages ── */
.portal-page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.portal-page-main {
    flex: 1 0 auto;
    width: 100%;
}

.portal-page-shell > .footer {
    flex-shrink: 0;
    margin-top: auto;
}
