/**
 * 共通CSS
 * ------------------
 */

/* Điều chỉnh jquery chosen */
.chosen-container .chosen-container-single {
    width: 100%;
}
.chosen-container-single .chosen-single {
    height: 34px;
    border-radius: 0px;
    line-height: 33px;
}
.chosen-container-single .chosen-single abbr {
    top: 10px;
    right: 24px;
}
.chosen-container-single .chosen-single div b {
    display: block;
    width: 100%;
    height: 100%;
    background: url('/chosen_v1.8.7/chosen-sprite.png') no-repeat 0 6px !important;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: -18px 6px;
}

/* Show cursor on review icon */
.pointer {
    cursor: pointer;
}

/* Show cursor as pointer */
li.pointer {
    cursor: pointer;
}

.input[file]{
	display:none;
}

.display-right-bottom {
    position: fixed;
    bottom: 10px;
    right: 25px;
}

/* Disabled state for clickable items */
.item-disabled {
    pointer-events: none !important;
    opacity: 0.6 !important;
    cursor: default !important;
    background-color: #f8f9fa !important;
}

.item-disabled .pointer {
    cursor: default !important;
}

.item-disabled:hover {
    background-color: #f8f9fa !important;
}

body.dark-mode .item-disabled,
body.dark-mode .item-disabled:hover {
    background-color: #2a2f33 !important;
}

/* Navbar notification preview */
.notif-preview-item {
    white-space: normal;
    line-height: 1.35;
}
.notif-preview-title {
    display: block;
    padding-right: 4.5rem;
}
.notif-preview-body {
    line-height: 1.4;
}
.notif-preview-meta {
    font-size: 0.75rem;
    line-height: 1.3;
}
.notif-preview-kind {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
}
.notif-modal-kind {
    letter-spacing: 0.04em;
}

/* ============================================================
 * jquery-confirm — dark-mode overrides
 * ------------------------------------------------------------
 * The vendor CSS hardcodes white dialog bg + black text. In dark
 * mode, AdminLTE pushes light text color down through inheritance,
 * so text becomes light-on-light → invisible. Re-paint the dialog
 * in dark tones consistent with the rest. Selectors scoped under
 * body.dark-mode have higher specificity than the vendor's
 * `.jconfirm .jconfirm-box` rules, so they win without !important.
 * ============================================================ */
body.dark-mode .jconfirm .jconfirm-box {
    background: #343a40;
    color: #e3e6ea;
}
body.dark-mode .jconfirm .jconfirm-box div.jconfirm-title-c,
body.dark-mode .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
    color: #f8f9fa;
}
body.dark-mode .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    color: #e3e6ea;
}
body.dark-mode .jconfirm .jconfirm-box div.jconfirm-closeIcon {
    color: #adb5bd;
}
body.dark-mode .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default {
    background-color: #4b545c;
    color: #f8f9fa;
}
body.dark-mode .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover {
    background-color: #5a6268;
    color: #fff;
}