.scheduler-table td { position: relative; min-width: 150px; }
.appointment-card { border-radius: 6px; border-left: 4px solid rgba(0,0,0,0.3) !important; padding: 6px; cursor: pointer; overflow: hidden; transition: all 0.2s ease-in-out; font-size: 11px; }
.appointment-card:hover { z-index: 100 !important; transform: scale(1.03); box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important; height: auto !important; min-height: 80px; }
.appointment-card .app-detail { display: none; }
.appointment-card:hover .app-detail { display: block; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 4px; }
@media (max-width: 768px) { .scheduler-table th { min-width: 120px !important; font-size: 10px; } .appointment-card { padding: 3px; font-size: 10px; } .name-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

.db-circle-progress { width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto; }
.db-circle-inner { width: 110px; height: 110px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); }
.db-circle-amount { font-size: 13px; font-weight: 700; color: #1e293b; }
.db-timeline-card { transition: all 0.2s ease; background: #fff; border: 1px solid #edf2f7 !important; margin-bottom: 8px; }
.db-timeline-card:hover { transform: translateX(5px); box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; }

.db-sidebar-wrapper { height: calc(100vh - 160px); min-height: 600px; }
.db-stack-accordion { height: 99%; display: flex; flex-direction: column; }
.db-stack-accordion .accordion-item { display: flex; flex-direction: column; border: none !important; background: transparent !important; margin-bottom: 10px; border-radius: 16px !important; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.db-stack-accordion .accordion-item:has(.show) { flex-grow: 1; }
.db-stack-accordion .accordion-collapse { flex-grow: 1; height: 0; }
.db-stack-accordion .accordion-body { height: 100%; padding: 15px; background: #fff; display: flex; flex-direction: column; }
.db-stack-accordion .accordion-button { background: #fff !important; padding: 15px 20px; box-shadow: none !important; border-bottom: 1px solid #f1f5f9; }
.db-stack-accordion .accordion-button:not(.collapsed) { color: #1e293b; }
.db-icon-sm { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }

.sidebar-scroll { max-height: 200px; overflow-y: auto; padding-right: 5px; }
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 10px; }
.db-content-scroll { flex-grow: 1; overflow-y: auto; padding-right: 5px; }
.db-content-scroll::-webkit-scrollbar { width: 4px; }
.db-content-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.shadow-blue { box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2); }
.shadow-green { box-shadow: 0 4px 6px rgba(25, 135, 84, 0.2); }

.db-status-danger { background-color: #fff5f5; border-left: 4px solid #f44336 !important; }
.db-status-warning { background-color: #fffaf0; border-left: 4px solid #ff9800 !important; }
.db-status-success { background-color: #f0fff4; border-left: 4px solid #4caf50 !important; }
.db-status-normal { border-left: 4px solid #e2e8f0 !important; }
.dark-mode .db-circle-inner, .dark-mode .db-timeline-card { background-color: #1e293b !important; }
.dark-mode .db-circle-amount, .dark-mode .db-text-main { color: #f8fafc !important; }
.dark-mode .db-stack-accordion .accordion-button, .dark-mode .db-stack-accordion .accordion-body { background: #1e293b !important; color: #f8fafc; border-color: #334155; }
.dark-mode .db-timeline-card { background: #0f172a; border-color: #334155 !important; }