/* ==========================================
   Queue Management System
   Common Styles
========================================== */
:root{
    --primary:#0d6efd;
    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;
    --light:#f8f9fa;
    --dark:#212529;
    --border:#e9ecef;
}
body{
    background:#f4f7fb;
    font-family: "Segoe UI",sans-serif;
    color:#333;
}
/* ==========================================
   Cards
========================================== */
.card{
    border:none;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.card-header{
    background:#fff;
    font-weight:600;
    border-bottom:1px solid var(--border);
}
/* ==========================================
   Navbar
========================================== */
.navbar{
    box-shadow:0 2px 15px rgba(0,0,0,.08);
}
.navbar{
    padding:8px 18px;
}
.navbar-brand{
    line-height:1.2;
    margin:0;
}
.navbar-brand h4,
.navbar-brand h5{
    margin:0;
}
.navbar-brand small{
    font-size:14px;
}
/* ==========================================
   Summary Cards
========================================== */
.summary-card{
    text-align:center;
    padding:2px 20px;
}
.summary-card h6{
    color:#666;
    margin-bottom:10px;
}
.summary-card h2{
    font-size:38px;
    font-weight:700;
    color:var(--primary);
}
/* ==========================================
   Token
========================================== */
.token-box{
    font-size:52px;
    font-weight:bold;
    color:var(--primary);
}
.current-token{
    font-size:32px;
    font-weight:bold;
    color:var(--success);
}
/* ==========================================
   Buttons
========================================== */
.btn{
    border-radius:10px;
}
.btn-success{
    font-size:18px;
    font-weight:600;
    padding:12px;
}
/* ==========================================
   Table
========================================== */
.table thead{
    background:#f8f9fa;
}
.table th{
    font-weight:600;
}
.table td{
    vertical-align:middle;
}
/* ==========================================
   Badge
========================================== */
.badge{
    padding:8px 14px;
    font-size:14px;
    border-radius:20px;
}
/* ==========================================
   Form
========================================== */
.form-control{
    border-radius:10px;
    min-height:45px;
}
.form-control:focus{
    box-shadow:none;
    border-color:var(--primary);
}
/* ==========================================
   Login
========================================== */
.login-card{
    max-width:420px;
    margin:auto;
}
/* ==========================================
   Waiting Table
========================================== */
#waitingTable tr{
    transition:.25s;
}
#waitingTable tr:hover{
    background:#f5f9ff;
}
/* ==========================================
   Loading
========================================== */
.loading{
    opacity:.6;
    pointer-events:none;
}
/* ==========================================
   Mobile
========================================== */
@media(max-width:768px){
.summary-card h2{
    font-size:30px;
}
.token-box{
    font-size:42px;
}
.current-token{
    font-size:24px;
}
.card{
    margin-bottom:15px;
}
.btn{
    width:100%;
}
}