:root {
    --primary: #4f46e5;
    --teal-50: #e1f5ee;
    --teal-700: #0f6e56;
    --coral-50: #faece7;
    --coral-700: #993c1d;
    --amber-50: #faeeda;
    --amber-700: #854f0b;
}

body {
    background-color: #f5f7fb;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Navbar */
.navbar {
    background: linear-gradient(135deg, #0901a2 0%, #0562b4 100%);
}
.navbar-brand { font-size: 1.3rem; }

/* Stat cards */
.stat-card {
    border-radius: 14px;
    transition: transform .15s ease;
}
.stat-card:hover { transform: translateY(-3px); }

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-primary-soft { background-color: #eef2ff; }
.bg-success-soft { background-color: #ecfdf5; }
.bg-warning-soft { background-color: #fffbeb; }

/* Cards */
.card { border-radius: 14px; }
.card-header { border-radius: 14px 14px 0 0 !important; }

/* Table */
.table > :not(caption) > * > * { padding: .75rem .8rem; }
.badge-status { font-size: .8rem; padding: .4em .7em; border-radius: 8px; }

/* Upcoming items */
.upcoming-item {
    background: #f8fafc;
    border-left: 4px solid #94a3b8;
    border-radius: 8px;
    padding: 10px 14px;
    transition: background .15s;
}
.upcoming-item:hover { background: #eef2ff; }
.upcoming-item.urgency-soon { border-left-color: var(--amber-700); }
.upcoming-item.urgency-later { border-left-color: #378ADD; }

/* Buttons */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background: #4338ca;
    border-color: #4338ca;
}
.btn-sm { font-size: .85rem; }

/* Weekly Schedule Table */
.weekly-schedule th, .weekly-schedule td {
    vertical-align: middle;
    font-size: 0.85rem;
    padding: .6rem .5rem;
}
.weekly-schedule th {
    background-color: #f8fafc;
    font-weight: 600;
}
.weekly-schedule th.is-today-col {
    background-color: #eff6ff !important;
    color: #2563eb;
}
.weekly-schedule td.is-today {
    background-color: #f7fafd;
}
.weekly-schedule td.is-today span {
    color: #2563eb;
    font-weight: bold;
}
.weekly-schedule td.slot-booked {
    padding: 0.35rem !important;
}
.weekly-schedule td.slot-booked .slot-badge {
    display: block;
    background-color: var(--coral-50);
    color: var(--coral-700);
    font-weight: 600;
    border-radius: 8px;
    padding: .4rem .5rem;
    cursor: pointer;
    transition: filter .15s;
}
.weekly-schedule td.slot-booked .slot-badge:hover {
    filter: brightness(0.96);
}
.weekly-schedule td.slot-empty {
    background-color: #ffffff;
    color: #cbd5e1;
}
.weekly-schedule td.slot-empty .slot-free-icon {
    color: var(--teal-700);
    opacity: .35;
    font-size: .9rem;
}

/* Legend */
.schedule-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: .82rem;
    color: #64748b;
    margin-bottom: .75rem;
}
.schedule-legend .dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
}
.dot-free { background-color: var(--teal-700); }
.dot-booked { background-color: var(--coral-700); }

/* Làm mờ nút Thêm khi bị disable */
#btnAddMeeting:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pagination */
.pagination .page-link {
    color: var(--primary);
    border-radius: 6px;
    margin: 0 2px;
    border: 1px solid #e2e8f0;
}
.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    color: #cbd5e1;
}
#pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.weekly-schedule td.slot-empty {
    cursor: pointer;          /* gợi ý có thể click */
    transition: background .15s;
}
.weekly-schedule td.slot-empty:hover {
    background-color: #eef2ff !important;
}
.weekly-schedule td.slot-empty .slot-free-icon {
    transition: transform .15s, opacity .15s;
}
.weekly-schedule td.slot-empty:hover .slot-free-icon {
    opacity: .9;
    transform: scale(1.2);
}