/* Increase width and stack permission selectors vertically */
.selector {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
}

.selector-available,
.selector-chosen {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.selector-available select,
.selector-chosen select {
    width: 100% !important;
    height: 300px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

/* Horizontal buttons between stacked boxes */
.selector-chooser {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px;
    margin: 10px 0 !important;
    float: none !important;
    padding: 0 !important;
}

.selector-chooser li {
    list-style: none !important;
    margin: 0 !important;
}

/* Make filter inputs full width */
.selector .selector-filter {
    width: 100% !important;
    padding: 5px 0 !important;
    border: none !important;
}

.selector .selector-filter input {
    width: 100% !important;
    padding: 8px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

/* Move Jazzmin/Admin save buttons to the top and make them full width */
.col-12.col-lg-3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    order: -1 !important;
    margin-bottom: 0 !important;
}

.col-12.col-lg-3 .card {
    display: flex !important;
    flex-direction: column !important;
    /* Stack vertically to match main window width */
    gap: 10px;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.col-12.col-lg-3 .card>div {
    margin: 0 !important;
    width: 100% !important;
}

.col-12.col-lg-3 .btn {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

/* Make the main content area (lg-9) full width */
.col-12.col-lg-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.col-12.col-lg-9 .card {
    width: 100% !important;
    margin: 0 !important;
}

/* Fix tabs content spacing */
.card-body .tab-content {
    padding-top: 20px;
}