/* =====================================================================
 * iCAFE CLOUD - GIAO DIỆN BOOTSTRAP 5 | TÔNG XANH DƯƠNG TƯƠI MỚI (v2.6)
 * Chỉ ghi đè biến & thành phần của Bootstrap, không dùng theme tối cũ.
 * ===================================================================== */
:root {
    --pd-blue: #1e88e5;
    --pd-blue-dark: #1565c0;
    --pd-blue-deep: #0d47a1;
    --pd-sky: #e8f3ff;
    --pd-cyan: #00b8d9;
    --pd-bg: #f1f6fd;
    --pd-card: #ffffff;
    --pd-border: #dbe7f5;
    --pd-text: #1e293b;
    --pd-muted: #64748b;
    --pd-ok: #16a34a;
    --pd-warn: #f59e0b;
    --pd-hot: #ef4444;
    --pd-side-w: 256px;
    --pd-radius: 14px;
    --pd-shadow: 0 2px 10px rgba(21, 101, 192, .07);

    --bs-primary: #1e88e5;
    --bs-primary-rgb: 30, 136, 229;
    --bs-link-color: #1565c0;
    --bs-link-hover-color: #0d47a1;
    --bs-body-bg: #f1f6fd;
    --bs-body-color: #1e293b;
    --bs-border-color: #dbe7f5;
    --bs-border-radius: .6rem;
    --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html, body {
    background: var(--pd-bg);
    color: var(--pd-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    font-size: 0.855rem;
    line-height: 1.45;
    letter-spacing: -0.01em;
}
.text-primary { color: var(--pd-blue) !important; }
.bg-primary { background-color: var(--pd-blue) !important; }
.text-muted, .text-secondary { color: var(--pd-muted) !important; }

.btn-primary {
    --bs-btn-bg: var(--pd-blue); --bs-btn-border-color: var(--pd-blue);
    --bs-btn-hover-bg: #1976d2; --bs-btn-hover-border-color: #1976d2;
    --bs-btn-active-bg: var(--pd-blue-dark); --bs-btn-active-border-color: var(--pd-blue-dark);
    --bs-btn-disabled-bg: var(--pd-blue); --bs-btn-disabled-border-color: var(--pd-blue);
    box-shadow: 0 3px 8px rgba(30, 136, 229, .25);
}
.btn-outline-primary {
    --bs-btn-color: var(--pd-blue); --bs-btn-border-color: var(--pd-blue);
    --bs-btn-hover-bg: var(--pd-blue); --bs-btn-hover-border-color: var(--pd-blue);
    --bs-btn-active-bg: var(--pd-blue-dark); --bs-btn-active-border-color: var(--pd-blue-dark);
}
.form-control:focus, .form-select:focus {
    border-color: #64b5f6; box-shadow: 0 0 0 .22rem rgba(30, 136, 229, .18);
}

/* ---------------------------------------------------------------- LAYOUT */
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--pd-side-w); z-index: 1040;
    display: flex; flex-direction: column; color: #fff;
    background: linear-gradient(185deg, #1e88e5 0%, #1565c0 55%, #0d47a1 100%);
    transition: transform .25s ease, width .25s ease;
    box-shadow: 4px 0 18px rgba(13, 71, 161, .18);
}
.sidebar-brand { display: flex; align-items: center; gap: .65rem; padding: 1.05rem 1.15rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.14); }
.sidebar-brand .logo-chip { width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--pd-blue); display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.sidebar-brand .brand-text { line-height: 1.15; overflow: hidden; }
.sidebar-brand .brand-text b { display: block; font-size: 1rem; letter-spacing: .2px; }
.sidebar-brand .brand-text small { opacity: .75; font-size: .7rem; }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: .75rem .7rem 1rem; }
.side-heading { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .6; padding: .9rem .7rem .3rem; }
.side-link {
    display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; margin-bottom: 2px;
    color: rgba(255,255,255,.88); border-radius: 10px; text-decoration: none; font-weight: 500; cursor: pointer;
    transition: background .15s, color .15s;
}
.side-link i { width: 1.2rem; text-align: center; opacity: .9; }
.side-link:hover { background: rgba(255,255,255,.13); color: #fff; }
.side-link.active { background: #fff; color: var(--pd-blue-dark); font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.side-link .badge { margin-left: auto; }

.sidebar-footer { padding: .85rem 1rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .72rem; opacity: .8; }

.app-main { margin-left: var(--pd-side-w); min-height: 100vh; transition: margin .25s ease; }
.app-topbar {
    position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--pd-border); padding: .6rem 1.25rem; display: flex; align-items: center; gap: .9rem;
}
.app-content { padding: 1.1rem; max-width: 1900px; margin: 0 auto; }
.btn-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border-radius: 8px; font-size: .85rem; }
#btnSide { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: .85rem; color: var(--pd-blue); border: 1px solid var(--pd-border); background: #fff; transition: all .15s ease; }
#btnSide:hover { background: var(--pd-sky); border-color: var(--pd-blue); color: var(--pd-blue-dark); }

body.side-collapsed .app-sidebar { transform: translateX(-100%); }
body.side-collapsed .app-main { margin-left: 0; }
.side-backdrop { display: none; position: fixed; inset: 0; background: rgba(13,40,90,.45); z-index: 1035; }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-main { margin-left: 0 !important; }
    body.side-open .app-sidebar { transform: none; }
    body.side-open .side-backdrop { display: block; }
    .app-content { padding: .75rem; }
}

/* ---------------------------------------------------------------- CARDS */
.card { border: 1px solid var(--pd-border); border-radius: var(--pd-radius); box-shadow: var(--pd-shadow); background: var(--pd-card); }
.card-header { background: transparent; border-bottom: 1px solid var(--pd-border); padding: .7rem 1rem; font-weight: 700; font-size: .88rem; }
.stat-card { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; }
.stat-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.stat-icon.blue { background: #e3f1ff; color: var(--pd-blue); }
.stat-icon.cyan { background: #e0f7fa; color: #0097a7; }
.stat-icon.green { background: #e4f7ea; color: var(--pd-ok); }
.stat-icon.orange { background: #fff3e0; color: #e65100; }
.stat-icon.gray { background: #eceff4; color: #64748b; }
.stat-icon.red { background: #fde9e9; color: var(--pd-hot); }
.stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.05; }
.stat-label { color: var(--pd-muted); font-size: .76rem; }

.progress { height: .6rem; background: #e6eef9; border-radius: 99px; }
.progress-bar { background: linear-gradient(90deg, #42a5f5, #1e88e5); }
.progress-bar.bg-ok { background: linear-gradient(90deg, #66d98a, #16a34a); }
.progress-bar.bg-warn { background: linear-gradient(90deg, #ffd166, #f59e0b); }
.progress-bar.bg-hot { background: linear-gradient(90deg, #ff8a80, #ef4444); }

/* ------------------------------------------------------------- STATUS UI */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; flex: none; }
.dot.online { background: var(--pd-ok); box-shadow: 0 0 0 4px rgba(22,163,74,.18); }
.dot.offline { background: #94a3b8; }
.dot.alert { background: var(--pd-hot); box-shadow: 0 0 0 4px rgba(239,68,68,.2); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(239,68,68,.05); } }

.pill { display: inline-block; padding: .12rem .5rem; border-radius: 99px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.t-ok { background: #e4f7ea; color: #15803d; }
.t-warn { background: #fff3dc; color: #b45309; }
.t-hot { background: #fde9e9; color: #c62828; }
.t-na { background: #edf1f7; color: #7b8aa0; }
.p-blue { background: #e3f1ff; color: #1565c0; }
.p-violet { background: #efe9ff; color: #5b3fc4; }
.p-gray { background: #edf1f7; color: #5b6b82; }
.mono { font-family: Consolas, 'Cascadia Mono', 'Courier New', monospace; }

/* ------------------------------------------------------------- BẢNG MÁY */
.table-net { --bs-table-bg: transparent; font-size: .82rem; margin-bottom: 0; }
.table-net thead th {
    background: #f4f9ff; color: #35517a; font-weight: 700; white-space: nowrap; vertical-align: middle;
    border-bottom: 2px solid var(--pd-border); position: sticky; top: 0; z-index: 2;
}
.table-net thead tr.group-row th { text-align: center; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; border: 0; padding: .35rem .5rem; }
.table-net thead tr.group-row th.g-net { background: linear-gradient(90deg, #1e88e5, #00b8d9); }
.table-net thead tr.group-row th.g-cpu { background: #3f7fd6; }
.table-net thead tr.group-row th.g-gpu { background: #6a5fd1; }
.table-net thead tr.group-row th.g-mach, .table-net thead tr.group-row th.g-other { background: #9bb4d4; }
.table-net tbody td { white-space: nowrap; vertical-align: middle; padding: .5rem .6rem; }
.table-net tbody tr { cursor: pointer; }
.table-net tbody tr:hover > td { background: #f2f8ff; }
.table-net tbody tr.row-offline > td { color: #8b98ab; }
.table-net tbody tr.row-offline .mname { color: #7b8aa0; }
.table-net tbody tr.row-alert > td:first-child { box-shadow: inset 3px 0 0 var(--pd-hot); }
.table-net .sticky-col { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 150px; }
.table-net thead .sticky-col { z-index: 3; background: #f4f9ff; }
.table-net tbody tr:hover > .sticky-col { background: #f2f8ff; }
.table-net th.sortable { cursor: pointer; user-select: none; }
.table-net th.sortable:hover { color: var(--pd-blue); }
.table-net th .sort-ind { font-size: .65rem; margin-left: 2px; opacity: .8; }
.net-cell-group { border-left: 1px dashed var(--pd-border); }
.mname { font-weight: 700; color: #12315f; }
.table-wrap { max-height: calc(100vh - 290px); min-height: 220px; overflow: auto; border-radius: 0 0 var(--pd-radius) var(--pd-radius); }

.table > :not(caption) > * > * { border-bottom-color: #e9f0f9; }
.table-plain thead th { background: #f4f9ff; color: #35517a; font-weight: 700; white-space: nowrap; border-bottom: 2px solid var(--pd-border); }
.table-plain td { vertical-align: middle; }

.nav-chip .btn { --bs-btn-padding-y: .32rem; font-weight: 600; }
.btn-check:checked + .btn-outline-primary { color: #fff; }

/* ------------------------------------------------------------ NHẬT KÝ */
.log-item { padding: .55rem .25rem; border-bottom: 1px solid #edf2f9; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.log-item:last-child { border-bottom: 0; }

/* ----------------------------------------------------------- TOAST / MISC */
.toast-wrap { position: fixed; right: 1rem; top: 1rem; z-index: 2000; }
.empty-state { text-align: center; color: var(--pd-muted); padding: 2.6rem 1rem; }
.empty-state i { font-size: 2.2rem; color: #b8cde8; display: block; margin-bottom: .6rem; }
.code-chip { background: #eef5ff; border: 1px dashed #90bdf3; color: #0d47a1; border-radius: 8px; padding: .2rem .55rem; font-weight: 600; }
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(13,71,161,.25); }
.modal-header { border-bottom: 1px solid var(--pd-border); }
.modal-footer { border-top: 1px solid var(--pd-border); }
.detail-label { color: var(--pd-muted); font-size: .76rem; }
.detail-val { font-weight: 600; word-break: break-word; }
.section-title { font-weight: 800; color: #12315f; display: flex; align-items: center; gap: .5rem; }
.live-chip { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--pd-border); border-radius: 99px; padding: .28rem .8rem; font-size: .78rem; font-weight: 600; }

/* ------------------------------------------------------- TRANG ĐĂNG NHẬP */
.auth-wrap { min-height: 100vh; display: flex; background: #fff; }
.auth-hero {
    flex: 1 1 56%; position: relative; color: #fff; padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
    background:
        linear-gradient(135deg, rgba(13,71,161,.88) 0%, rgba(30,136,229,.62) 55%, rgba(0,184,217,.45) 100%),
        url('../images/login_banner_blue.jpg') center / cover no-repeat, #1565c0;
}
.auth-hero::after { content: ''; position: absolute; width: 520px; height: 520px; right: -160px; bottom: -200px; border-radius: 50%; background: rgba(255,255,255,.08); }
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero h1 { font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.2; text-shadow: 0 3px 18px rgba(0,0,0,.25); }
.auth-hero .lead { color: rgba(255,255,255,.92); max-width: 560px; }
.hero-feature { display: flex; gap: .7rem; align-items: center; }
.hero-feature .ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); display: grid; place-items: center; }
.auth-panel { flex: 0 0 44%; display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem; background: #fff; }
.auth-box { width: 100%; max-width: 410px; }
.auth-box h2 { font-weight: 800; color: #12315f; }
.input-icon { position: relative; }
.input-icon > i.lead-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8aa4c6; pointer-events: none; }
.input-icon .form-control { padding-left: 2.6rem; height: 48px; border-radius: 12px; background: #f6faff; }
.input-icon .btn-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #8aa4c6; padding: .4rem .7rem; }
.btn-login { height: 48px; border-radius: 12px; font-weight: 700; font-size: 1rem; }
@media (max-width: 991.98px) {
    .auth-wrap { flex-direction: column; }
    .auth-hero { flex: 0 0 auto; padding: 1.6rem 1.4rem; min-height: 300px; }
    .auth-panel { flex: 1 1 auto; padding: 1.6rem 1.2rem 2.2rem; }
}