/* File: assets/css/app.css
   Mục tiêu: gom CSS dùng chung (giữ nguyên UI/logic, chỉ làm gọn + đẹp hơn nhẹ)
*/

:root{
    --app-bg-1:#1e3c72;
    --app-bg-2:#2a5298;
    --card-radius:18px;
    --shadow-1:0 20px 40px rgba(0,0,0,0.18);
    --shadow-2:0 10px 25px rgba(0,0,0,0.14);
}

body{
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: linear-gradient(135deg,var(--app-bg-1),var(--app-bg-2));
    min-height:100vh;
}

/* Một vài trang cũ dùng bg-light, override để đồng nhất theme */
body.bg-light{
    background: linear-gradient(135deg,var(--app-bg-1),var(--app-bg-2)) !important;
}

.dashboard{
    background: rgba(255,255,255,0.96);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(6px);
}

.card{
    border:none;
    border-radius: var(--card-radius);
    transition: transform .20s ease, box-shadow .20s ease;
}

.card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

.card-summary{
    color:white;
    padding:20px;
    border-radius: var(--card-radius);
}

/* Gradient summary cards (giữ nguyên tên class cũ) */
.bg-gradient-success{ background: linear-gradient(45deg,#00b09b,#96c93d); }
.bg-gradient-danger{  background: linear-gradient(45deg,#ff416c,#ff4b2b); }
.bg-gradient-primary{ background: linear-gradient(45deg,#396afc,#2948ff); }
.bg-gradient-dark{    background: linear-gradient(45deg,#232526,#414345); }
.bg-gradient-warning{ background: linear-gradient(45deg,#f7971e,#ffd200); }
.bg-gradient-info{    background: linear-gradient(45deg,#2193b0,#6dd5ed); }

.btn{
    border-radius:12px;
}

.section-title{
    font-weight:700;
    font-size:18px;
}

.table thead{
    background:#f8f9fa;
}

/* Sticky header cho bảng (giữ hành vi cũ) */
.table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffc107; /* giống table-warning */
}

.table{
    margin-bottom:0;
}

/* Tabs sticky: đẹp hơn + vẫn giữ layout */
.sticky-tabs{
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    padding-top:10px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}

.toggle-dark{
    cursor:pointer;
    font-size:14px;
}

/* Dark mode (giữ class/logic cũ) */
.dark-mode{
    background:#0f1115 !important;
    color:white !important;
}

.dark-mode .dashboard{
    background:#161a22;
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

.dark-mode table{
    color:white;
}

.dark-mode .sticky-tabs{
    background: rgba(22,26,34,0.92);
}

.dark-mode .table thead th{
    background: rgba(255, 193, 7, 0.85);
}


/* Topbar (login) */
.app-topbar{
    position: sticky;
    top: 0;
    z-index: 1100;
    background: rgba(0,0,0,0.20);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.app-topbar .btn-outline-light{
    border-color: rgba(255,255,255,0.55);
}
.app-topbar strong{
    color: #fff;
}

/* Auth pages */
.auth-wrap{
    min-height: calc(100vh - 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.auth-card{
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.auth-card .card-body{
    padding: 22px;
}
.auth-brand{
    font-weight: 800;
    letter-spacing: .2px;
}
.small-muted{
    color: rgba(255,255,255,0.75);
}


/* Offline modal support (khi không có Bootstrap JS) */
.modal{ display:none; }
.modal.show{ display:block; }
.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:1040;
}
.modal.show{
    position:fixed;
    inset:0;
    overflow:auto;
    z-index:2050;
}
.modal .modal-dialog{ margin: 1.15rem auto; }
body.modal-open{ overflow:hidden; }