```css
/*==================================================
            UCC ERP v3.0 Dashboard
            Premium Blue Glass UI
==================================================*/

body{
    background:#f4f7fb;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

/*=========================================
        Dashboard Header
=========================================*/

.dashboard-header{
    border-radius:22px;
    overflow:hidden;
    border:none;
    background:linear-gradient(135deg,#0d6efd,#4f46e5,#2563eb);
    background-size:300% 300%;
    animation:gradientMove 8s ease infinite;
}

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

.dashboard-header h2{

font-weight:700;
letter-spacing:.5px;

}

.dashboard-header p{

font-size:15px;

}

.dashboard-icon{

font-size:120px;
opacity:.18;

}

/*=========================================
        Statistics Cards
=========================================*/

.stat-card{

border:none;
border-radius:18px;
color:#fff;
overflow:hidden;
transition:.35s;
position:relative;

}

.stat-card::before{

content:'';
position:absolute;
width:160px;
height:160px;
right:-40px;
top:-40px;
background:rgba(255,255,255,.15);
border-radius:50%;

}

.stat-card:hover{

transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.stat-card .card-body{

padding:25px;

}

.stat-card p{

font-size:14px;
margin-bottom:8px;
opacity:.9;

}

.stat-card h2{

font-size:34px;
font-weight:700;
margin:0;

}

.stat-icon{

font-size:55px;
opacity:.30;

}

/*=========================================
        Quick Buttons
=========================================*/

.quick-btn{

padding:20px;
border-radius:15px;
font-size:16px;
font-weight:600;
transition:.30s;

}

.quick-btn i{

display:block;
margin-bottom:10px;

}

.quick-btn:hover{

transform:translateY(-6px) scale(1.03);

}

/*=========================================
        Cards
=========================================*/

.card{

border:none;
border-radius:18px;
box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.card-header{

border:none;
padding:16px 22px;
font-weight:600;
font-size:17px;

}

/*=========================================
        Table
=========================================*/

.table{

margin-bottom:0;

}

.table thead th{

background:#eef4ff;
color:#0d6efd;
font-weight:600;
border:none;

}

.table tbody td{

padding:14px;
vertical-align:middle;

}

.table tbody tr{

transition:.25s;

}

.table tbody tr:hover{

background:#f8fbff;

}

/*=========================================
        Logged User
=========================================*/

.table-borderless th{

width:120px;
color:#666;

}

.table-borderless td{

font-weight:600;

}

/*=========================================
        Clock
=========================================*/

#clock{

font-size:34px;
font-weight:700;
letter-spacing:2px;
color:#0d6efd;

}

/*=========================================
        Badge
=========================================*/

.badge{

padding:8px 12px;
border-radius:10px;
font-size:13px;

}

/*=========================================
        Scrollbar
=========================================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

background:#0d6efd;
border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#084298;

}

/*=========================================
        Responsive
=========================================*/

@media(max-width:992px){

.dashboard-icon{

display:none;

}

.dashboard-header{

text-align:center;

}

}

@media(max-width:768px){

.stat-card{

margin-bottom:15px;

}

.quick-btn{

margin-bottom:10px;

}

#clock{

font-size:26px;

}

.card-header{

font-size:15px;

}

}

/*===============================
      Premium Glass Clock
===============================*/

.premium-clock{

    width:300px;

    padding:22px;

    border-radius:22px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.25);

    box-shadow:
    0 10px 35px rgba(0,0,0,.20),
    inset 0 1px 1px rgba(255,255,255,.25);

    text-align:center;

    transition:.35s;

}

.premium-clock:hover{

    transform:translateY(-6px);

}

.status{

    color:#fff;

    font-size:14px;

    margin-bottom:15px;

    opacity:.95;

}

.status-dot{

    width:10px;

    height:10px;

    display:inline-block;

    border-radius:50%;

    background:#00ff6a;

    margin-right:8px;

    box-shadow:0 0 15px #00ff6a;

    animation:blink 1s infinite;

}

@keyframes blink{

50%{

opacity:.4;

}

}

.clock-time{

    font-size:42px;

    font-weight:700;

    color:#fff;

    letter-spacing:2px;

    text-shadow:0 0 15px rgba(255,255,255,.4);

}

.clock-date{

    margin-top:10px;

    font-size:18px;

    color:#fff;

    font-weight:600;

}

.clock-full-date{

    font-size:15px;

    color:#f1f1f1;

    opacity:.85;

}

.clock-greeting{

    margin-top:15px;

    display:inline-block;

    padding:7px 18px;

    border-radius:30px;

    background:rgba(255,255,255,.18);

    color:#fff;

    font-size:14px;

    font-weight:600;

}

.clock-title{
    font-size:15px;
    color:#fff;
    margin-bottom:12px;
    opacity:.9;
}

.live-clock{
    font-size:32px;
    font-weight:700;
    line-height:1.4;
    color:#ffffff;
    text-shadow:0 0 15px rgba(255,255,255,.4);
}

.clock-date{
    margin-top:12px;
    font-size:14px;
    color:#f8f9fa;
    opacity:.95;
}

/* ==================================================
   UCC ERP v3.0 - Mobile & Tablet Responsive
================================================== */

/* Tablet */
@media (max-width:991px){

    body{
        font-size:15px;
    }

    .dashboard-header{
        padding:25px !important;
        text-align:center;
    }

    .dashboard-header h2{
        font-size:28px;
    }

    .dashboard-header p{
        font-size:14px;
    }

    .dashboard-icon{
        display:none;
    }

    .stat-card{
        margin-bottom:18px;
    }

    .stat-card .card-body{
        padding:20px;
    }

    .stat-card h2{
        font-size:28px;
    }

    .stat-icon{
        font-size:42px;
    }

    .quick-btn{
        width:100%;
        padding:16px;
        font-size:15px;
        margin-bottom:12px;
    }

    .premium-clock{
        width:100%;
        max-width:100%;
        padding:20px;
    }

    .clock-time,
    .live-clock{
        font-size:32px;
    }

    .clock-date{
        font-size:15px;
    }

    .table-responsive{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .table{
        min-width:750px;
    }

    .card{
        margin-bottom:18px;
    }

}

/* Mobile */
@media (max-width:767px){

    body{
        font-size:14px;
    }

    .dashboard-header{
        padding:18px !important;
        border-radius:15px;
    }

    .dashboard-header h2{
        font-size:22px;
    }

    .dashboard-header p{
        font-size:13px;
        margin-bottom:0;
    }

    .card{
        border-radius:14px;
    }

    .card-header{
        padding:14px 16px;
        font-size:15px;
    }

    .card-body{
        padding:15px;
    }

    .stat-card{
        margin-bottom:15px;
    }

    .stat-card .card-body{
        padding:18px;
    }

    .stat-card h2{
        font-size:24px;
    }

    .stat-card p{
        font-size:13px;
    }

    .stat-icon{
        font-size:36px;
    }

    .quick-btn{
        display:block;
        width:100%;
        padding:15px;
        font-size:15px;
        margin-bottom:10px;
    }

    .premium-clock{
        width:100%;
        padding:18px;
        border-radius:16px;
    }

    .clock-title{
        font-size:14px;
    }

    .clock-time,
    .live-clock{
        font-size:28px;
        letter-spacing:1px;
    }

    .clock-date{
        font-size:14px;
    }

    .clock-full-date{
        font-size:13px;
    }

    .clock-greeting{
        font-size:13px;
        padding:6px 14px;
    }

    #clock{
        font-size:24px;
    }

    .badge{
        font-size:12px;
        padding:6px 10px;
    }

    .table{
        min-width:650px;
    }

    .table th,
    .table td{
        white-space:nowrap;
        font-size:13px;
        padding:10px;
    }

    .table-borderless th{
        width:95px;
        font-size:13px;
    }

    .table-borderless td{
        font-size:13px;
    }

}

/* Small Mobile */
@media (max-width:480px){

    .dashboard-header h2{
        font-size:20px;
    }

    .dashboard-header p{
        font-size:12px;
    }

    .stat-card h2{
        font-size:22px;
    }

    .quick-btn{
        font-size:14px;
        padding:14px;
    }

    .premium-clock{
        padding:15px;
    }

    .clock-time,
    .live-clock{
        font-size:24px;
    }

    .clock-date{
        font-size:13px;
    }

    .clock-full-date{
        font-size:12px;
    }

    .card-header{
        font-size:14px;
    }

}

/*=========================================
        Dashboard Mobile Responsive
=========================================*/

@media (max-width:991px){

    .table-responsive{

        overflow-x:auto;
        -webkit-overflow-scrolling:touch;

    }

    .table{

        min-width:650px;

    }

    .card{

        margin-bottom:15px;

    }

}

@media (max-width:768px){

    .content{

        padding:10px;

    }

    .dashboard-header{

        text-align:center;

    }

    .dashboard-header h2{

        font-size:24px;

    }

    .dashboard-header p{

        font-size:14px;

    }

    .stat-card h2{

        font-size:28px;

    }

    .table th,
    .table td{

        white-space:nowrap;
        font-size:14px;
        padding:10px;

    }

}

@media (max-width:576px){

    .table{

        min-width:600px;

    }

    .card-header h5{

        font-size:15px;

    }

}