/* =========================================================
   Payment Hub – Admin Custom CSS (v2.3)
   Compatible: AdminLTE 3/4 + Bootstrap 5
   Place in: public/assets/admin-custom.css
   Include after AdminLTE CSS to override.
   ========================================================= */

/* =============== DESIGN TOKENS =================== */
:root{
    --brand:#4f46e5;         /* indigo-600 */
    --brand-2:#06b6d4;       /* cyan-400   */
    --ink:#0f172a;           /* slate-900  */
    --muted:#6b7280;         /* gray-500   */
    --bg:#f7f8fb;
    --card:#ffffff;
    --line:#eef2f7;
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:18px;
    --shadow-sm:0 4px 12px rgba(2,6,23,.04);
    --shadow-md:0 10px 24px rgba(2,6,23,.06);
    --shadow-lg:0 22px 40px rgba(2,6,23,.08);
}

/* =============== PAGE BACKGROUND ================= */
body.sidebar-mini { background: var(--bg); }
.content-wrapper { background: transparent; }

/* =============== BRAND TOPBAR ==================== */
.main-header.navbar {
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
    color:#fff;
    box-shadow: var(--shadow-md);
    border:0;
}
.main-header .nav-link,
.main-header .navbar-nav .nav-link,
.main-header .navbar-nav .dropdown-toggle { color:#fff!important; opacity:.95; }
.main-header .nav-link:hover { opacity:1; }

/* =============== SIDEBAR (LIGHT DEFAULT) ========= */
.main-sidebar { box-shadow: var(--shadow-lg); }
.brand-link {
    font-weight:700; letter-spacing:.3px;
    background:linear-gradient(90deg, rgba(79,70,229,.08), transparent);
}
.nav-sidebar .nav-item > .nav-link {
    margin: 4px 8px;
    border-radius: var(--radius-sm);
    font-weight:600;
    color:#374151; /* for light sidebar */
    transition: background .2s ease, transform .15s ease;
}
.nav-sidebar .nav-icon { width: 22px; opacity:.9; }
.nav-sidebar .nav-item > .nav-link:hover { background:#eef2ff; }
.nav-sidebar .menu-open > .nav-link,
.nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(79,70,229,.15), rgba(6,182,212,.15));
    color:#111827;
    box-shadow: inset 0 0 0 1px rgba(79,70,229,.22);
}
.nav-treeview > .nav-item > .nav-link { margin: 4px 16px; border-radius: 24px; }
.sidebar .user-panel img { border-radius: 12px; box-shadow: var(--shadow-sm); }

/* =============== SIDEBAR (DARK FIX) ============== */
.sidebar-dark .nav-sidebar .nav-link,
.sidebar-dark-primary .nav-sidebar .nav-link,
.main-sidebar .nav-sidebar .nav-link {
    color: #e5e7eb !important;
    opacity: 1 !important;
}
.sidebar-dark .nav-sidebar .nav-link .nav-icon,
.sidebar-dark-primary .nav-sidebar .nav-link .nav-icon {
    color: #cbd5e1 !important;
    opacity: .95;
}
.sidebar-dark .nav-sidebar .nav-link:hover,
.sidebar-dark-primary .nav-sidebar .nav-link:hover { color:#fff !important; }
.sidebar-dark .nav-sidebar .nav-link.active,
.sidebar-dark-primary .nav-sidebar .nav-link.active { color:#fff !important; }
.sidebar-dark .nav-header,
.sidebar-dark-primary .nav-header { color:#9ca3af !important; opacity:1; }

/* =============== CARDS =========================== */
.card {
    border:0; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); overflow:hidden;
}
.card .card-header { background:#fff; border-bottom:1px solid var(--line); }
.card .card-title { font-weight:700; letter-spacing:.2px; }
.card .card-body { background:#fff; }

/* =============== HEADINGS ======================== */
.content-header h1 { font-weight:800; letter-spacing:.2px; color:#0b1220; }
.breadcrumb { background:transparent; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { color:#cbd5e1; }

/* =============== FORMS & FILTERS ================= */
.form-label { font-weight:600; color:#334155; }
.form-control, .form-select {
    border-radius: 12px; border:1px solid var(--line);
    background:#fff; box-shadow:none; transition: box-shadow .2s, border-color .2s;
}
.form-control:focus, .form-select:focus {
    border-color: #c7d2fe; box-shadow: 0 0 0 4px rgba(79,70,229,.15);
}
.input-group .form-control { border-radius:12px!important; }
.input-group .input-group-text { border-radius:12px; background:#f8fafc; border:1px solid var(--line); }

/* Filter wrapper đẹp hơn (áp cho trang list) */
.filter-card {
    padding: 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.filter-card .filter-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 12px;
}
.filter-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.filter-actions .btn {
    min-width: 120px;
    height: 44px;
    border-radius: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem; /* fix icon-text spacing */
}
.filter-actions .btn i { margin: 0 !important; }
.filter-actions .btn i[class*="me-"] { margin-right: 0 !important; }

/* =============== BUTTONS ========================= */
.btn { border-radius: 12px; font-weight:700; letter-spacing:.2px; }
.btn-primary {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    border:0; box-shadow: 0 8px 16px rgba(79,70,229,.18);
}
.btn-primary:hover { filter:brightness(.96); }
.btn-outline-secondary { border-color:#d1d5db; color:#111827; }
.btn-outline-secondary:hover { background:#f3f4f6; }
.btn-warning { color:#1f2937; font-weight:800; }

/* Màu riêng cho nút filter */
.btn-search { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; }
.btn-reset  { background:#f3f4f6; color:#111827; }
.btn-export { background:#fde68a; color:#92400e; }
.btn-total  { background:#67e8f9; color:#155e75; }

/* =============== TABLES ========================== */
.table { margin:0; }
.table thead th {
    position: sticky; top:0; z-index:1;
    background:#fbfdff; border-bottom:1px solid var(--line);
    color:#334155; font-weight:800; letter-spacing:.2px;
}
.table tbody tr { transition: background .15s ease, transform .15s ease; }
.table-hover tbody tr:hover { background:#f9fafb; }
.table td, .table th { vertical-align: middle; }
.table .actions { width: 160px; }
.table-striped tbody tr:nth-of-type(odd){ background:#fcfcfe; }

/* Empty state */
.table-empty, .data-empty {
    text-align:center; padding:64px 16px; color:#64748b; font-weight:600;
}
.table-empty::before, .data-empty::before {
    content:"📂"; font-size:40px; display:block; margin-bottom:12px; opacity:.7;
}

/* =============== STATUS CHIPS ==================== */
.chip { border-radius: 999px; padding: .35rem .7rem; font-weight:700; font-size:.85rem; }
.chip-paid     { background:#dcfce7; color:#166534; }
.chip-pending  { background:#fff7ed; color:#9a3412; }
.chip-failed   { background:#fee2e2; color:#991b1b; }
.chip-callback { background:#e0f2fe; color:#075985; }
.chip-manual   { background:#f5f3ff; color:#5b21b6; }

/* =============== PAGINATION ====================== */
.page-item .page-link {
    border-radius:10px; border:1px solid #e5e7eb; color:#111827;
}
.page-item.active .page-link {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    border-color:transparent;
}

/* =============== MODAL / SWEETALERT2 ============= */
.swal2-popup { border-radius: 16px!important; }
.swal2-styled.swal2-confirm { border-radius:12px!important; font-weight:800!important; }

/* =============== TOAST =========================== */
#toast-container > div { border-radius:12px; box-shadow: var(--shadow-md); }

/* =============== LOGIN PAGE POLISH =============== */
body.login-page {
    background: radial-gradient(1000px 500px at 10% 0%, rgba(79, 70, 229, .12), transparent),
    radial-gradient(1000px 500px at 90% 100%, rgba(6, 182, 212, .12), transparent),
    #f3f4f6;
}
.login-page .card { border-radius:16px; box-shadow: var(--shadow-md); }
.login-page .btn-primary { background:linear-gradient(90deg, var(--brand), var(--brand-2)); border:0; }

/* =============== UTILITIES ======================= */
.shadow-smooth{ box-shadow:var(--shadow-lg)!important; }
.round-lg{ border-radius: var(--radius-lg)!important; }
.badge{ border-radius: 10px; padding:.4rem .6rem; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
    *{ transition:none!important; animation:none!important; }
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #000000;
}

/* QR nhỏ gọn */
.qr-sm{
    width: 180px;
    height: 180px;
    object-fit: contain;
}

/* Khung xem trước: đặt chiều cao + cuộn */
#frameCard .card-body{
    height: 520px;         /* chỉnh 480–640 tuỳ ý */
    overflow: auto;
}

/* THU NHỎ trang PayOS trong iframe bằng transform */
#checkoutFrame{
    /* giữ kích thước “gốc” lớn, rồi scale nhỏ lại */
    width: 1280px;
    height: 1100px;
    border: 0;
    transform: scale(.55);     /* <= chỉnh .5/.6 tuỳ mắt */
    transform-origin: 0 0;     /* thu nhỏ từ góc trái trên */
}

/* Trên màn nhỏ thì thu thêm */
@media (max-width: 991.98px){
    #checkoutFrame{ transform: scale(.48); }
}

.rounded-xl { border-radius: 1rem; }
.table code { font-size: 92%; }