.appointment-panel {
 position: absolute;
 top: 0;
 right: 0;
 width: 320px;
 height: 100%;
 background: #fff;
 box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
 display: flex;
 flex-direction: column;
 border-left: 1px solid #eef0f4;
 transform: translateX(100%);
 transition: transform 0.25s ease;
 z-index: 30;
}
.appointment-panel.show {
 transform: translateX(0);
}
.appointment-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.12);
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.2s ease;
 z-index: 25;
}
.appointment-overlay.show {
 opacity: 1;
 pointer-events: auto;
}

.appointment-panel-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 12px;
 border-bottom: 1px solid #eef0f4;
}
.appointment-panel-title {
 display: flex;
 align-items: center;
 gap: 8px;
 font-weight: 600;
 color: var(--bs-text);
}
.appointment-panel-close {
 border: none;
 background: var(--bs-body-bg);
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #334155;
 cursor: pointer;
}

.appointment-tabs {
 display: flex;
 gap: 8px;
 padding: 8px 12px;
 border-bottom: 1px solid #eef0f4;
}
.appointment-tab {
 font-size: 12px;
 padding: 6px 10px;
 border-radius: 9999px;
 color: #334155;
 background: var(--bs-body-bg);
 cursor: pointer;
}
.appointment-tab.active {
 background: #e2e8f0;
 color: var(--bs-text);
 font-weight: 600;
}

.appointment-panel-content {
 padding: 8px 0;
 overflow-y: auto;
}

.appointment-section {
 padding: 4px 0;
}
.appointment-section-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 8px 12px;
}
.appointment-section-title {
 display: flex;
 align-items: center;
 gap: 8px;
}
.appointment-section-indicator.late {
 background: #ef4444;
}
.appointment-section-indicator.upcoming {
 background: #3b82f6;
}
.appointment-section-indicator.later {
 background: #64748b;
}
.appointment-section-indicator {
 width: 3px;
 height: 14px;
 border-radius: 2px;
}
.appointment-section-count {
 font-size: 12px;
 color: #fff;
 background: #6b7280;
 border-radius: 9999px;
 padding: 2px 8px;
 line-height: 18px;
 font-weight: 700;
}
.appointment-section-count.upcoming {
 background: #3b82f6;
 color: #fff;
}
.appointment-section-count.later {
 background: #6b7280;
 color: #fff;
}
.appointment-section-count.late {
 background: #ef4444;
 color: #fff;
}
.appointment-section-toggle {
 color: #334155;
 font-size: 12px;
}
.appointment-list {
 padding: 0 8px;
}

/* Item layout */
.appointment-item {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 10px 12px;
 border-top: 1px solid #f1f5f9;
}
.appointment-avatar {
 width: 28px;
 height: 28px;
 border-radius: 9999px;
 background: #e5edff;
 color: #334155;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 12px;
}
.appointment-info {
 flex: 1;
 min-width: 0;
}
.appointment-time-row {
 display: flex;
 align-items: center;
 gap: 8px;
 color: #475569;
 font-size: 12px;
}
.appointment-time {
 color: var(--bs-text);
 font-weight: 600;
}
.appointment-late {
 color: #ef4444;
 font-weight: 600;
}
.appointment-customer-row {
 margin-top: 2px;
 color: var(--bs-text);
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 6px;
}
.appointment-badge-new {
 background: #10b981;
 color: #fff;
 font-size: 11px;
 padding: 2px 6px;
 border-radius: 9999px;
 font-weight: 700;
 line-height: 16px;
}
.appointment-service-row {
 margin-top: 2px;
 color: #64748b;
 font-size: 12px;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
}
.appointment-duration {
 color: #64748b;
}
.appointment-duration::before {
 content: " \2022 ";
 color: #94a3b8;
 margin: 0 4px;
}

.appointment-tech-btn {
 align-self: center;
 background: #e5e7eb;
 color: #334155;
 border: none;
 border-radius: 10px;
 padding: 4px 8px;
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.02em;
 cursor: pointer;
}
.appointment-tech-btn.assigned {
 background: #e2e8f0;
 color: var(--bs-text);
}

/* Empty state */
.appointment-empty {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 color: #64748b;
 font-size: 12px;
 padding: 24px 12px;
}

/* Host container positioning */
.column-gap.wait-form {
 position: relative;
}
/* Today Appointments Panel Styles */
.appointment-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.1);
 z-index: 99;
 opacity: 0;
 visibility: hidden;
 transition: all 0.3s ease;
}
.column-gap.wait-form {
 position: relative;
}
.appointment-overlay.show {
 opacity: 1;
 visibility: visible;
}

.appointment-panel {
 position: absolute;
 top: 0;
 right: 0;
 width: 420px;
 height: 100%;
 background: #ffffff;
 box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
 display: flex;
 flex-direction: column;
 z-index: 100;
 transform: translateX(100%);
 opacity: 0;
 transition: all 0.3s ease;
}
.appointment-panel.show {
 transform: translateX(0);
 opacity: 1;
}

.appointment-panel-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 16px 20px;
 border-bottom: 1px solid var(--bs-border-color);
}
.appointment-panel-title {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 16px;
 font-weight: 600;
 color: var(--bs-text);
}
.appointment-panel-title i {
 color: #3b82f6;
}
.appointment-panel-close {
 width: 28px;
 height: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 border: none;
 border-radius: 6px;
 color: #9ca3af;
 font-size: 16px;
 cursor: pointer;
 transition: all 0.15s ease;
}
.appointment-panel-close:hover {
 background: var(--bs-body-bg);
 color: var(--bs-text);
}

.appointment-tabs {
 display: flex;
 border-bottom: 1px solid var(--bs-border-color);
 padding: 0 20px;
}
.appointment-tab {
 padding: 12px 16px;
 font-size: 13px;
 font-weight: 500;
 color: #6b7280;
 cursor: pointer;
 border-bottom: 2px solid transparent;
 transition: all 0.15s ease;
 white-space: nowrap;
}
.appointment-tab:hover {
 color: var(--bs-text);
}
.appointment-tab.active {
 color: var(--bs-text);
 border-bottom-color: #1f2937;
}

.appointment-panel-content {
 flex: 1;
 overflow-y: auto;
 padding: 0;
}
.appointment-panel-content::-webkit-scrollbar {
 width: 5px;
}
.appointment-panel-content::-webkit-scrollbar-track {
 background: transparent;
}
.appointment-panel-content::-webkit-scrollbar-thumb {
 background: #d1d5db;
 border-radius: 3px;
}

.appointment-section {
 border-bottom: 1px solid var(--bs-border-color);
}
.appointment-section-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 20px;
 cursor: pointer;
 transition: background 0.15s ease;
}
.appointment-section-header:hover {
 background: var(--bs-body-bg);
}
.appointment-section-title {
 display: flex;
 align-items: center;
 gap: 8px;
}
.appointment-section-indicator {
 width: 4px;
 height: 16px;
 border-radius: 2px;
 background: #ef4444;
}
.appointment-section-indicator.upcoming {
 background: #10b981;
}
.appointment-section-indicator.later {
 background: #6b7280;
}
.appointment-section-label {
 font-size: 14px;
 font-weight: 600;
 color: var(--bs-text);
}
.appointment-section-right {
 display: flex;
 align-items: center;
 gap: 8px;
}
.appointment-section-count {
 font-size: 14px;
 font-weight: 700;
 color: #fff;
 background: #ef4444;
 border-radius: 9999px;
 padding: 2px 10px;
 line-height: 20px;
}
.appointment-section-count.upcoming {
 background: #3b82f6;
 color: #fff;
}
.appointment-section-count.later {
 background: #6b7280;
 color: #fff;
}
.appointment-section-toggle {
 color: #9ca3af;
 font-size: 12px;
 transition: transform 0.2s ease;
}
.appointment-section.collapsed .appointment-section-toggle {
 transform: rotate(-90deg);
}
.appointment-section.collapsed .appointment-list {
 display: none;
}

.appointment-list {
 padding: 0;
}
.appointment-item {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 14px 20px;
 border-bottom: 1px solid var(--bs-border-color);
 transition: background 0.15s ease;
}
.appointment-item:last-child {
 border-bottom: none;
}
.appointment-item:hover {
 background: var(--bs-body-bg);
}

.appointment-avatar {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: #e5e7eb;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 14px;
 font-weight: 600;
 color: #6b7280;
 flex-shrink: 0;
}
.appointment-info {
 flex: 1;
 min-width: 0;
}
.appointment-time-row {
 display: flex;
 align-items: center;
 gap: 6px;
 margin-bottom: 4px;
}
.appointment-time {
 font-size: 13px;
 font-weight: 500;
 color: #6b7280;
}
.appointment-late {
 font-size: 12px;
 font-weight: 500;
 color: #ef4444;
}
.appointment-late::before {
 content: "•";
 margin-right: 6px;
}
.appointment-customer-row {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 4px;
}
.appointment-customer-name {
 font-size: 14px;
 font-weight: 600;
 color: var(--bs-text);
}
.appointment-new-badge {
 display: inline-flex;
 align-items: center;
 gap: 2px;
 padding: 2px 6px;
 background: #d1fae5;
 border-radius: 4px;
 font-size: 10px;
 font-weight: 600;
 color: #059669;
 text-transform: uppercase;
}
.appointment-new-badge i {
 font-size: 8px;
}
.appointment-service-row {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 color: #6b7280;
}
.appointment-service {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.appointment-duration::before {
 content: "•";
 margin-right: 6px;
}
.appointment-tech-btn {
 padding: 6px 12px;
 background: #374151;
 border: none;
 border-radius: 6px;
 font-size: 12px;
 font-weight: 500;
 color: white;
 cursor: pointer;
 transition: all 0.15s ease;
 white-space: nowrap;
 flex-shrink: 0;
 align-self: center;
}
.appointment-tech-btn:hover {
 background: #1f2937;
}
.appointment-tech-btn.assigned {
 background: #10b981;
}
.appointment-tech-btn.assigned:hover {
 background: #059669;
}

.appointment-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 40px 20px;
 color: #9ca3af;
}
.appointment-empty i {
 font-size: 40px;
 margin-bottom: 12px;
 opacity: 0.5;
}
.appointment-empty span {
 font-size: 14px;
}