.gb-dashboard{
font-family: "Segoe UI", Roboto, Arial;
background:#f1f5f9;
padding:6px;
border-radius:12px;
}

/* ===== TABLE ===== */

.gb-table {
    width:100%;
    border-collapse: separate;
    border-spacing:0;
    table-layout: auto; /* cho cột khoa tự rộng */
}

/* Các cột số liệu chia đều */
.gb-table td:not(.gb-khoa),
.gb-table th:not(.gb-khoa) {
    width: 1%;
    text-align:center;
}

/* Cột khoa vừa đủ, chữ không sát lề */
.gb-table td.gb-khoa,
.gb-table th.gb-khoa {
    min-width: 150px;
    max-width: 220px;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
/* HEADER */
.gb-table th{
background:linear-gradient(90deg,#0ea5e9,#0284c7);
color:#fff;
padding:6px;
font-size:14px;
letter-spacing:0.5px;
text-transform:uppercase;
}

/* CELL */
.gb-table td{
padding:4px 6px; 
text-align:center;
border-bottom:1px solid #e5e7eb;
position:relative;
transition:0.2s;
}


/* ===== KHOA ===== */
.gb-khoa{
text-align:left;
color:#0369a1;   /* xanh dương dịu */
    font-weight:600;
font-size:15px;
}

.gb-table td.gb-khoa{
    text-align:left;
    padding-left:12px;
}
.gb-table td.gb-khoa{
    width:180px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* TEXT */
.gb-main div{
margin:1px 0;   /* trước 4px */
font-size:13px; /* nhỏ nhẹ lại */
line-height:1.2;
}

/* ===== SỐ LIỆU ===== */
.gb-remain{
font-size:22px;
font-weight:800;
color:#0ea5e9;
}

.gb-hold{
color:#f59e0b;
font-weight:700;
}

.gb-negative{
color:#dc2626;
font-weight:900;
font-size:22px;
}



.gb-table td:hover .gb-tooltip{
display:block;
}

.gb-res-item{
border-bottom:1px solid rgba(255,255,255,0.2);
padding:4px 0;
}

/* ===== WARNING ===== */
.gb-warning{
color:#dc2626;
font-weight:700;
font-size:13px;
margin-top:4px;
}

/* ===== SUMMARY ===== */
.gb-summary{
background:linear-gradient(90deg,#e0f2fe,#f0f9ff);
padding:15px;
border-radius:12px;
margin-bottom:15px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.gb-summary span{
margin-right:20px;
font-weight:700;
color:#0369a1;
}

/* ===== ANIMATION ===== */
@keyframes pulse{
0%{transform:scale(1)}
50%{transform:scale(1.05)}
100%{transform:scale(1)}
}

.gb-negative{
animation:pulse 1s infinite;
}

/* ===== SCROLL MOBILE ===== */
.gb-dashboard{
overflow-x:auto;
}
.gb-table {
    position: relative;
    z-index: 1;
}

.gb-table td {
    position: relative;
    overflow: visible !important; /* QUAN TRỌNG */
}



/* Hover hiện */
.gb-table td:hover .gb-tooltip {
    display: block;
}

.gb-table {
    border-collapse: separate;
}
.gb-tooltip {
    top: auto;
    bottom: 100%;
    margin-bottom: 6px;
}
/* nếu sát mép trái */
.gb-table td:first-child .gb-tooltip{
    left: 0;
    transform: none;
}

/* nếu sát mép phải */
.gb-table td:last-child .gb-tooltip{
    left: auto;
    right: 0;
    transform: none;
}
/* ===== FORM NHẬP LIỆU ===== */
.gb-form{
background:#ffffff;
padding:20px;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.05);
margin-bottom:20px;
}

/* tiêu đề */
.gb-form h3{
margin-bottom:15px;
color:#0369a1;
font-size:18px;
font-weight:700;
}
.gb-reserve-header-text{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

/* tiêu đề */
.gb-reserve-title{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#0f172a;
    white-space:nowrap;
}

/* dòng note */
.gb-reserve-note{
    margin:0;
    font-size:13px;
    font-weight:400;
    color:#dc2626;
}
/* bảng input */
.gb-form table{
width:100%;
border-collapse:separate;
border-spacing:0 10px;
}

.gb-form td{
padding:6px;
}

/* label loại giường */
.gb-form td:first-child{
font-weight:600;
color:#0f172a;
}

/* input */
.gb-form input[type="number"]{
width:100%;
padding:8px 10px;
border-radius:8px;
border:1px solid #cbd5f5;
background:#f8fafc;
transition:0.2s;
font-weight:600;
}

/* focus */
.gb-form input[type="number"]:focus{
outline:none;
border-color:#0ea5e9;
background:#fff;
box-shadow:0 0 0 2px rgba(14,165,233,0.2);
}

/* readonly */
.gb-form input[readonly]{
background:#e2e8f0;
color:#64748b;
}

/* ===== BUTTON ===== */
.gb-btn{
    padding:8px 16px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    font-weight:700;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:6px;
    transition:all .2s ease;
}



.gb-btn-save:hover{
background:#0284c7;
}

/* ===== FORM GIỮ CHỖ ===== */
.gb-reserve{
background:#ffffff;
padding:20px;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.05);
margin-top:20px;
}

/* bảng giữ chỗ */
.gb-reserve table{
width:100%;
border-collapse:collapse;
margin-top:10px;
}

.gb-reserve th{
background:#0ea5e9;
color:#fff;
padding:10px;
font-size:13px;
}

.gb-reserve td{
padding:8px;
text-align:center;
border-bottom:1px solid #e5e7eb;
}

/* dòng khoa */
.gb-reserve td:first-child {
    text-align: left;
    font-weight: 600;
    color: #0369a1; /* xanh giống tên khoa phía trên */

    width: 1%;           /* quan trọng: ép cột vừa nội dung */
    white-space: nowrap; /* không xuống dòng */
}

/* input giữ chỗ */
.gb-reserve input{
width:60px;
padding:6px;
border-radius:6px;
border:1px solid #cbd5f5;
background:#f8fafc;
text-align:center;
}

/* hover row */
.gb-reserve tr:hover td{
background:#f0f9ff;
}


.gb-main div b{
font-size:16px;
}

.gb-hold{
font-size:16px;
}

.gb-table tr{
height:auto;
}
.gb-tooltip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 6px;

background: #0f172a;
color: #fff;

padding: 8px 10px;
border-radius: 8px;

font-size: 12px;
white-space: nowrap;

z-index: 9999;

box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.gb-main{
background:#f8fafc;
border-radius:10px;
padding:6px;
box-shadow:inset 0 0 5px rgba(0,0,0,0.03);
text-align:center;
}
.gb-save-btn{
    background: linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:10px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    box-shadow:0 3px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.gb-save-btn:hover{
    transform: translateY(-2px);
    box-shadow:0 6px 14px rgba(0,0,0,0.2);
}

.gb-save-btn:active{
    transform: scale(0.96);
}
/* ===== GB TABLE INPUT - CLEAN MEDICAL UI ===== */

.gb-table-input{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#ffffff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(0,0,0,0.04);
}

/* HEADER */
.gb-table-input th{
    background:#f1f5f9;
    color:#0f172a;
    padding:10px;
    font-size:13px;
    font-weight:600;
    text-align:center;
    border-bottom:1px solid #e2e8f0;
}

/* CELL */
.gb-table-input td{
    padding:12px;
    text-align:center;
    background:#ffffff;
    border-bottom:1px solid #f1f5f9;
}

/* INPUT DEFAULT (READONLY) */
.gb-table-input input{
    width:70px;
    padding:8px 6px;
    border-radius:8px;
    border:1.5px solid #cbd5e1;
    background:#ffffff;
    text-align:center;
    font-weight:700;
    font-size:16px;
    color:#0f172a;
}

/* INPUT KHI EDIT */
.bed-input:not([readonly]){
    background:#ffffff;
    border:1.5px solid #0ea5e9;
    box-shadow:0 0 0 2px rgba(14,165,233,0.08);
}

/* HOVER NHẸ */
.gb-table-input td:hover{
    background:#f8fafc;
}

/* SỐ = 0 (nhẹ, không gắt) */
.gb-table-input input[value="0"]{
    color:#94a3b8;
}

/* ===== HEADER FORM ===== */
.gb-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 8px;
    margin-bottom:8px;
    background:#ffffff;
    border-radius:10px;
}

.gb-header h3{
    margin:0;
    font-size:16px;
    font-weight:600;
    color:#0f172a;
}

/* ===== BUTTONS ===== */
.gb-actions{
    display:flex;
    gap:8px;
}


/* SỬA */
.gb-btn-edit{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    color:#fff;
    border:none;
    box-shadow:0 4px 10px rgba(37,99,235,0.35);
}

.gb-btn-edit:hover{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(37,99,235,0.45);
}

.gb-btn-edit:active{
    transform:scale(0.96);
}

/* LƯU */
.gb-btn-save{
    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    border:none;
    box-shadow:0 4px 12px rgba(34,197,94,0.4);
}

.gb-btn-save:hover{
    background:linear-gradient(135deg,#16a34a,#15803d);
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(34,197,94,0.5);
}

.gb-btn-save:active{
    transform:scale(0.96);
}
/* FOCUS INPUT */
.gb-table-input input:focus{
    outline:none;
    border-color:#0ea5e9;
    box-shadow:0 0 0 2px rgba(14,165,233,0.12);
}
.gb-header-form{
    position:relative;
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

/* tiêu đề */
.gb-header-form h3{
    margin:0;
    font-size:16px;
    font-weight:600;
}

/* nút nằm chính giữa */
.gb-header-form .gb-actions{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
}
.gb-header-form{
    position:relative;
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

/* tiêu đề */
.gb-header-form h3{
    margin:0;
    font-size:16px;
    font-weight:600;
}

/* nút nằm chính giữa */
.gb-header-form .gb-actions{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
}
.gb-popup-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s;
    z-index: 9999;
}

.gb-popup-alert.show {
    opacity: 1;
    pointer-events: auto;
}

.gb-alert-success { background: #16a34a; }  /* xanh */
.gb-alert-error { background: #dc2626; }    /* đỏ */
.gb-alert-info { background: #0ea5e9; }     /* xanh dương */
.bed-input:focus{
    background:#ecfeff;
    border-color:#0ea5e9;
}
.gb-refresh-box{
    margin-bottom:12px;
}

.gb-refresh-box{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

/* chữ rõ hơn */
.gb-refresh-text{
    font-size:14px;
    color:#0f172a;
    font-weight:600;
    white-space:nowrap;
}

/* thanh bar chiếm phần còn lại */
.gb-progress{
    flex:1;
    height:6px;
    background:#e2e8f0;
    border-radius:6px;
    overflow:hidden;
}

/* thanh nền */
.gb-progress{
    width:100%;
    height:6px;
    background:#e2e8f0;
    border-radius:6px;
    overflow:hidden;
}

/* thanh chạy */
.gb-progress-bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#0ea5e9,#0284c7);
    transition:width 1s linear;
}
.gb-save-btn{
    display:block;
    margin:20px auto 0;
    min-width:180px;
    text-align:center;
}
/* ===== DASHBOARD: SỐ CĂN PHẢI, GIỮ MÀU SẮC ===== */
.gb-main {
    background:#f8fafc;
    border-radius:10px;
    padding:4px;
    box-shadow:inset 0 0 5px rgba(0,0,0,0.03);
}

.gb-main div {
    display: flex;
    justify-content: space-between; /* chữ trái, số phải */
    align-items: center;
    margin:1px 0;
    font-size:13px;
    line-height:1.2;
}

/* Tổng */
.gb-main div:first-child b {
    color:#0f172a;
    font-weight:600;
}
.gb-main div:first-child span {
    color:#0f172a;
    font-weight:700;
    font-size:16px;
    font-variant-numeric: tabular-nums; /* số thẳng hàng */
    text-align:right;
}

/* Giữ */
.gb-main div:nth-child(2) span.gb-hold {
    color:#f59e0b;
    font-weight:700;
    font-size:16px;
    font-variant-numeric: tabular-nums;
    text-align:right;
}
/* Giữ >0 nổi bật */
.gb-hold-positive {
    font-size:22px !important;   /* lớn hơn bình thường */
    font-weight:900 !important;  /* đậm hơn */
    color:#b45309 !important;    /* cam nổi bật */
}

/* = 0 → đỏ mờ */
.gb-zero{
    color:#dc2626 !important;
    opacity:0.4;
    font-weight:700;
}

/* < 0 → đỏ cảnh báo rõ */
.gb-negative{
    color:#dc2626 !important;
    opacity:1;
    font-weight:900;
    font-size:22px;
}
/* ===== Ô CÒN GIƯỜNG (>0) - XANH DỄ NHÌN ===== */
.gb-cell-positive{
    background: #b7ebd6; /* xanh nhạt nhưng rõ ràng */
    box-shadow: none; /* bỏ bóng sáng */
    transition: all 0.2s ease;
}

/* ===== SỐ CÒN GIƯỜNG (nổi bật vừa phải) ===== */
.gb-cell-positive .gb-remain{
    font-size:22px;
    font-weight:700;
    color:#065f46; /* xanh đậm vừa phải, rõ chữ */
    text-shadow: none; /* bỏ shadow */
}

/* ===== Ô = 0 (giữ trung tính) ===== */
.gb-zero{
    color:#dc2626 !important;
    opacity:0.4;
}
.gb-cell-zero{
    background:#f1f5f9;
    color:#64748b;
}

/* ===== Ô ÂM (cảnh báo mạnh) ===== */
.gb-cell-negative{
    background: linear-gradient(135deg,#fef2f2,#fee2e2);
    border:1px solid rgba(220,38,38,0.3);
}

.gb-cell-negative .gb-remain{
    color:#dc2626;
    font-weight:900;
    font-size:24px;
}
.gb-main{
    transition: all 0.2s ease;
}


/* ===== MỚI (<=3h) - NHẠT HƠN ===== */
.gb-updated-new{
    background: linear-gradient(135deg,#f0fdf4,#dcfce7);
    color:#166534;
    font-weight:700;
    border-radius:8px;
    box-shadow: inset 0 0 4px rgba(34,197,94,0.08);
}

/* chấm xanh */
.gb-updated-new::before{
    content:"● ";
    color:#22c55e;
}


/* ===== TRUNG BÌNH (3–8h) - VÀNG NHẠT ===== */
.gb-updated-mid{
    background:#fefce8;
    color:#a16207;
}

/* chấm vàng */
.gb-updated-mid::before{
    content:"● ";
    color:#facc15; /* vàng sáng nhẹ hơn */
}


/* ===== CŨ (>8h) - dịu, không nổi ===== */
.gb-updated-old{
    background: transparent !important;
    color:#64748b;        /* xám vừa, không đậm */
    font-weight:500;      /* giảm độ đậm */
    opacity:0.75;         /* hơi mờ */
}

/* chấm xám rất nhẹ */
.gb-updated-old::before{
    content:"● ";
    color:#e2e8f0;
}

@media (max-width:768px){

/* ===== HEADER ===== */
.gb-header-form{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.gb-header-form .gb-actions{
    position:static;
    transform:none;
    width:100%;
    display:flex;
    gap:10px;
}

.gb-btn{
    flex:1;
    justify-content:center;
}


/* ===== TABLE INPUT ===== */

/* ẩn header */
.gb-table-input tr:first-child{
    display:none;
}

/* block hóa */
.gb-table-input{
    display:block;
}

/* mỗi row */
.gb-table-input tr{
    display:block;
    margin-bottom:12px;
}

/* FIX THẲNG HÀNG */
.gb-table-input td{
    display:grid;
    grid-template-columns: 1.2fr 1fr; /* label | input */
    align-items:center;
    gap:10px;

    padding:12px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* label */
.gb-table-input td::before{
    content: attr(data-label);
    font-weight:600;
    font-size:14px;
    color:#0f172a;
}

/* input */
.gb-table-input input{
    width:100%;
    max-width:90px;
    text-align:center;
}

}