/* ── Page background ── */
.page-bg {
    background-image: url('/PVDSystem/asset/image/bg.jpg');
    zoom: 0.75;
}
.page-bg-full {
    background-image: url('/PVDSystem/asset/image/bg.jpg');
    zoom: 1;
}

/* ── Dashboard card colours ── */
.div-1 { background-color: #E3242B; border-radius: 5px; }
.div-2 { background-color: #2832C2; border-radius: 5px; }
.div-3 { background-color: #028A0F; border-radius: 5px; }
.div-4 { background-color: #FF8800; border-radius: 5px; }
.div-red   { background-color: #FF0000; border-radius: 5px; }
.div-green { background-color: #008000; border-radius: 5px; }
.div-blue  { background-color: #0000FF; border-radius: 5px; }
.div-lblue { background-color: #0096FF; border-radius: 5px; }
.div-lgreen{ background-color: #16D113; border-radius: 5px; }
.div-pink  { background-color: #E0115F; border-radius: 5px; }

/* ── Loading spinner overlay ── */
#spinner-div {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2;
}
.spinner-img    { margin-top: 350px; }
.spinner-img-lg { margin-top: 355px; margin-bottom: 15px; }

/* ── Login / register form helpers ── */
.flexContainer { display: flex; }
.inputField    { flex: 1; }
.logo-img      { width: 150px; height: 80px; margin-top: -20px; }

/* ── Password toggle button ── */
.pw-btn     { width: 39.5px; height: 38.5px; }
.pw-btn-sm  { width: 39.5px; height: 38px; }
.pw-btn-abs {
    position: absolute;
    margin-top: -38px;
    width: 39.5px;
    height: 38px;
}

/* ── Navigation clock ── */
.clock-div { margin-top: 43px; }

/* ── Dashboard card text ── */
.card-white       { color: white; }
.card-label       { color: white; margin-top: 7px; }
.card-label-l20   { color: white; margin-top: 7px;  margin-left: 20px; }
.card-label-l0    { color: white; margin-top: 7px;  margin-left: 0; }
.card-count       { color: white; }
.card-count-mr    { color: white; margin-right: 8px; margin-top: 17px; }
.card-count-mt40  { color: white; margin-top: 40px; }

/* ── Menu icons ── */
.menu-icon { display: block; border: 0; }

/* ── DataTables ── */
table.dataTable tbody td { vertical-align: middle; }

/* ── Footer ── */
.footer-bottom    { margin-bottom: 15px; }
.footer-copyright { margin-top: 15px; }
.footer-fp        { margin-top: 145px; margin-bottom: 15px; }

/* ── Misc spacing utilities ── */
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.ml-5  { margin-left: 5px; }
.mr-20 { margin-right: 20px; }