/* ClinicFlow Frontend Styles - Premium Design System */
:root {
    --clinic-primary: #2271b1;
    --clinic-secondary: #0a4b78;
    --clinic-success: #10b981;
    --clinic-text: #2c3338;
    --clinic-bg: #f6f7f7;
    --clinic-white: #ffffff;
    --clinic-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --clinic-radius: 12px;
}

.clinic-flow-booking-wrapper {
    max-width: 900px;
    margin: 40px auto;
    background: var(--clinic-white);
    border-radius: var(--clinic-radius);
    box-shadow: var(--clinic-shadow);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Progress Bar */
.booking-progress-bar {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    background: #fdfdfd;
    border-bottom: 1px solid #efefef;
}

.progress-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.progress-step label {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.progress-step span {
    width: 32px;
    height: 32px;
    line-height: 30px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: inline-block;
    font-weight: bold;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e2e8f0;
}

.progress-step.active span { background: var(--clinic-primary); color: #fff; box-shadow: 0 0 0 2px var(--clinic-primary); }
.progress-step.active label { color: var(--clinic-primary); }
.progress-step.completed span { background: var(--clinic-success); color: #fff; box-shadow: 0 0 0 2px var(--clinic-success); }
.progress-step.completed label { color: var(--clinic-success); }

/* Steps */
.booking-steps-container { padding: 40px; }
.booking-step { display: none; animation: fadeIn 0.4s ease-out; }
.booking-step.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-header { text-align: center; margin-bottom: 30px; }
.step-header h2 { margin: 0 0 10px; font-size: 24px; color: var(--clinic-text); }
.step-header p { margin: 0; color: #64748b; }

/* Doctor Cards */
.doctor-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.doctor-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--clinic-radius);
    padding: 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.doctor-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: var(--clinic-primary); }
.doctor-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 3px solid #f1f5f9; }
.doctor-info h4 { margin: 0 0 5px; font-size: 18px; }
.doctor-info .specialty { display: block; color: #64748b; font-size: 14px; margin-bottom: 15px; }

/* Service Cards */
.service-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: var(--clinic-radius);
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.service-card:hover { border-color: var(--clinic-primary); background: #f8fafc; }
.service-details h4 { margin: 0 0 5px; }
.service-details p { margin: 0; color: #64748b; font-size: 14px; }
.duration { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--clinic-primary); background: #e0f2fe; padding: 2px 8px; border-radius: 10px; }
.service-price strong { font-size: 20px; color: var(--clinic-text); }

/* Calendar */
.datetime-selection-app { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cal-nav { background: none; border: 1px solid #e2e8f0; border-radius: 4px; padding: 5px 10px; cursor: pointer; }
.calendar-grid { padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; }
.days-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: bold; font-size: 12px; margin-bottom: 10px; color: #94a3b8; }
.days-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendar-day { padding: 10px; text-align: center; border-radius: 4px; font-size: 14px; cursor: pointer; }
.calendar-day.active-day:hover { background: #f1f5f9; }
.calendar-day.selected { background: var(--clinic-primary); color: #fff; font-weight: bold; }
.calendar-day.is-past { color: #cbd5e1; cursor: not-allowed; }
.calendar-day.is-today { font-weight: bold; border: 1px solid var(--clinic-primary); }

/* Time Slots */
.time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
.time-slot { padding: 10px; border: 1px solid #e2e8f0; background: #fff; border-radius: 6px; cursor: pointer; text-align: center; font-weight: 600; }
.time-slot:hover { border-color: var(--clinic-primary); color: var(--clinic-primary); }

/* Patient Form */
.clinic-flow-form .form-row { margin-bottom: 20px; }
.clinic-flow-form label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--clinic-text); }
.clinic-flow-form input { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 16px; }

/* gateway */
.gateway-card {
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: var(--clinic-radius);
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s;
}
.gateway-card:hover { border-color: var(--clinic-primary); background: #f8fafc; }

/* Success */
.booking-success-wrapper { text-align: center; padding: 40px 0; }
.success-icon { width: 80px; height: 80px; background: var(--clinic-success); color: #fff; line-height: 80px; font-size: 40px; border-radius: 50%; display: inline-block; margin-bottom: 20px; }

/* General Buttons */
.button-primary { background: var(--clinic-primary); color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.button-primary:hover { background: var(--clinic-secondary); }
.prev-step { background: #f1f5f9; color: #475569; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; }

@media (max-width: 768px) {
    .datetime-selection-app { grid-template-columns: 1fr; }
    .booking-progress-bar label { display: none; }
    .booking-steps-container { padding: 20px; }
}
/* Clinic Calendar Widget - Public View */
.clinic-flow-public-calendar-wrapper {
    background: #fff;
    border-radius: var(--clinic-radius);
    box-shadow: var(--clinic-shadow);
    padding: 30px;
}

.calendar-controls {
    margin-bottom: 25px;
}

.doctor-filter {
    display: flex;
    align-items: center;
    gap: 15px;
}

.doctor-filter select {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    min-width: 200px;
}

.calendar-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.calendar-grid-wrapper {
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
}

.days-header-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

.days-header-grid span {
    padding: 15px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
}

.days-body-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.day-cell {
    min-height: 100px;
    padding: 10px;
    border-right: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    transition: background 0.2s;
}

.day-cell:nth-child(7n) { border-right: none; }
.day-cell:hover:not(.empty) { background: #f1f5f9; cursor: pointer; }
.day-cell.is-today { background: #eff6ff; }
.day-num { font-weight: 600; font-size: 14px; }

.day-indicators {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-dot.available { background: var(--clinic-success); }
.status-dot.busy { background: #ef4444; }
.status-dot.pending { background: #f59e0b; }

.calendar-legend {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    font-size: 13px;
    color: #64748b;
}

.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-item .dot { width: 10px; height: 10px; border-radius: 50%; }

/* Modal */
.slot-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    position: relative;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

.modal-slots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.modal-time-pill {
    padding: 8px;
    background: #f1f5f9;
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--clinic-primary);
}
/* Doctor Profile Card */
.clinic-flow-doctor-profile-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
    font-family: inherit;
}

.profile-accent-line {
    height: 6px;
    width: 100%;
}

.profile-main-content {
    display: flex;
    padding: 30px;
    gap: 30px;
}

.profile-image-container {
    flex: 0 0 180px;
}

.profile-image-container img {
    width: 180px;
    height: 180px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.profile-info-content {
    flex: 1;
}

.doctor-name {
    margin: 0 0 5px;
    font-size: 28px;
    color: #1e293b;
}

.doctor-specialty {
    font-size: 16px;
    color: var(--clinic-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 20px;
}

.doctor-bio {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
}

.doctor-schedule-preview h4 {
    margin: 0 0 15px;
    font-size: 14px;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 1px;
}

.schedule-grid-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.day-badge {
    padding: 8px 12px;
    border-radius: 10px;
    background: #f1f5f9;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    border: 1px solid #e2e8f0;
}

.day-badge.active {
    background: #f0f9ff;
    border-color: #bae6fd;
}

.day-badge.active .day-time {
    color: var(--clinic-primary);
    font-weight: 600;
}

.day-label {
    font-weight: 700;
    color: #475569;
    margin-bottom: 2px;
}

.day-time {
    color: #94a3b8;
}

.profile-actions {
    margin-top: 30px;
}

.book-now-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.book-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(34, 113, 177, 0.25);
    filter: brightness(1.1);
}

@media (max-width: 640px) {
    .profile-main-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .schedule-grid-pills {
        justify-content: center;
    }
}
/* Patient Dashboard Styles */
.clinic-flow-premium-dashboard {
    background: #fff;
    border-radius: var(--clinic-radius);
    box-shadow: var(--clinic-shadow);
    padding: 30px;
}

.dashboard-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.user-welcome h2 { margin: 0 0 5px; font-size: 24px; color: #1e293b; }
.user-welcome p { margin: 0; color: #64748b; }

.dashboard-tabs-wrapper .tabs-nav {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 2px solid #f1f5f9;
}

.dashboard-tab-btn {
    background: none;
    border: none;
    padding: 15px 5px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    margin-bottom: -2px;
}

.dashboard-tab-btn.active {
    color: var(--clinic-primary);
    border-bottom-color: var(--clinic-primary);
}

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.4s ease-out; }

/* Appointment Strips */
.appointment-strip {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid #edf2f7;
    gap: 20px;
}

.app-date-box {
    background: var(--clinic-primary);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 65px;
}

.app-date-box .month { font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: 0.9; }
.app-date-box .day { font-size: 22px; font-weight: 800; }

.app-main-info { flex: 1; }
.doctor-meta h4 { margin: 0 0 4px; font-size: 18px; color: #1e293b; }
.specialty-label { font-size: 13px; color: var(--clinic-primary); font-weight: 600; }
.time-meta { margin-top: 8px; font-size: 14px; color: #64748b; display: flex; align-items: center; gap: 6px; }

.status-pill {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.status-pill.confirmed { background: #dcfce7; color: #166534; }
.status-pill.pending { background: #fef9c3; color: #854d0e; }
.status-pill.cancelled { background: #fee2e2; color: #991b1b; }

.app-actions-status { display: flex; align-items: center; gap: 15px; }
.action-dots-btn { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 5px; }

/* History Table */
.history-table-container { overflow-x: auto; }
.dashboard-history-table { width: 100%; border-collapse: collapse; }
.dashboard-history-table th { text-align: left; padding: 15px; background: #f8fafc; color: #64748b; font-size: 13px; font-weight: 600; text-transform: uppercase; }
.dashboard-history-table td { padding: 15px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }

.table-doctor-info strong { display: block; color: #1e293b; }
.table-doctor-info span { font-size: 12px; color: #94a3b8; }

/* Login Placeholder */
.clinic-flow-login-placeholder {
    padding: 60px;
    text-align: center;
    background: #fff;
    border-radius: var(--clinic-radius);
    box-shadow: var(--clinic-shadow);
}

.placeholder-icon { color: #e2e8f0; margin-bottom: 20px; }
.clinic-flow-login-placeholder h3 { margin: 0 0 10px; font-size: 24px; color: #1e293b; }
.clinic-flow-login-placeholder p { margin: 0 0 25px; color: #64748b; }

@media (max-width: 640px) {
    .appointment-strip { flex-direction: column; align-items: flex-start; }
    .app-date-box { flex-direction: row; gap: 10px; min-width: auto; width: 100%; justify-content: center; }
}

/* Doctor List Layouts */
.clinic-flow-doctor-list-wrap {
    display: grid;
    gap: 30px;
}

.clinic-flow-doctor-list-wrap.layout-grid.cols-1 { grid-template-columns: 1fr; }
.clinic-flow-doctor-list-wrap.layout-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.clinic-flow-doctor-list-wrap.layout-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.clinic-flow-doctor-list-wrap.layout-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.clinic-flow-doctor-list-wrap.layout-list {
    grid-template-columns: 1fr;
}

/* Doctor List Card */
.doctor-list-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.layout-list .doctor-list-card {
    flex-direction: row;
    align-items: stretch;
}

.doctor-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1);
}

.doctor-card-avatar {
    position: relative;
    overflow: hidden;
}

.layout-grid .doctor-card-avatar {
    height: 200px;
}

.layout-list .doctor-card-avatar {
    width: 200px;
    flex-shrink: 0;
}

.doctor-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.doctor-list-card:hover .doctor-card-avatar img {
    transform: scale(1.05);
}

.doctor-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.doctor-card-header h4 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #1e293b;
}

.specialty-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 15px;
}

.doctor-card-bio {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Mini Schedule Pills */
.doctor-card-schedule {
    margin-bottom: 25px;
}

.schedule-pills-mini {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.schedule-pill {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    border-radius: 6px;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
}

.schedule-pill.active {
    color: #fff;
    border: none;
}

/* Actions */
.doctor-card-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.action-link {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.action-link.primary {
    color: #fff;
}

.action-link.secondary {
    background: #f1f5f9;
    color: #475569;
}

.action-link:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    .clinic-flow-doctor-list-wrap.layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .clinic-flow-doctor-list-wrap.layout-grid {
        grid-template-columns: 1fr;
    }
    .layout-list .doctor-list-card {
        flex-direction: column;
    }
    .layout-list .doctor-card-avatar {
        width: 100%;
        height: 200px;
    }
}
/* Doctor Dashboard Styling */
.clinic-flow-doctor-dashboard-wrapper {
    display: flex;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
    overflow: hidden;
    min-height: 600px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.dashboard-sidebar {
    width: 260px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
}

.doctor-profile-mini {
    text-align: center;
    padding: 0 20px 30px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.doctor-profile-mini img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.doctor-profile-mini h3 { margin: 0; font-size: 18px; color: #1e293b; }
.doctor-profile-mini span { font-size: 13px; color: #64748b; }

.dashboard-nav {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}

.doctor-dashboard-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: none;
    background: none;
    color: #64748b;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    text-align: left;
}

.doctor-dashboard-tab svg { width: 20px; height: 20px; }
.doctor-dashboard-tab:hover { background: #f1f5f9; color: #1e293b; }
.doctor-dashboard-tab.active { background: #fff; color: var(--clinic-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.dashboard-main-content {
    flex: 1;
    padding: 40px;
    background: #fff;
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease-out; }

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.content-header h2 { margin: 0; font-size: 24px; color: #1e293b; }

.filter-group select {
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
}

/* Agenda Table */
.appointments-table-container { overflow-x: auto; }
.clinic-flow-dt { width: 100%; border-collapse: collapse; }
.clinic-flow-dt th { text-align: left; padding: 15px; border-bottom: 2px solid #f1f5f9; color: #64748b; font-size: 13px; text-transform: uppercase; font-weight: 700; }
.clinic-flow-dt td { padding: 18px 15px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }

.action-btn {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover { background: var(--clinic-primary); color: #fff; }
.action-btn svg { width: 18px; height: 18px; }

.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.status-badge.pending { background: #fef9c3; color: #854d0e; }
.status-badge.confirmed { background: #dcfce7; color: #166534; }
.status-badge.completed { background: #eff6ff; color: #1e40af; }
.status-badge.cancelled { background: #fee2e2; color: #991b1b; }

/* Doctor Calendar */
.calendar-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 30px; }
.cal-nav-btn { background: #f1f5f9; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 20px; }
.cal-nav-btn:hover { background: #e2e8f0; }

.doctor-calendar-grid { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.cal-weekdays span { padding: 15px; text-align: center; font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day-item { min-height: 100px; padding: 10px; border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; position: relative; }
.cal-day-item:nth-child(7n) { border-right: none; }
.cal-day-item.has-app { cursor: pointer; transition: background 0.2s; }
.cal-day-item.has-app:hover { background: #f8fafc; }
.cal-day-item.empty { background: #fafafa; }

.day-num { font-weight: 600; color: #1e293b; font-size: 14px; }
.app-count { position: absolute; top: 10px; right: 10px; background: #3b82f6; color: #fff; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.day-dots { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 4px; }
.day-dots .dot { width: 6px; height: 6px; border-radius: 50%; }
.day-dots .dot.pending { background: #f59e0b; }
.day-dots .dot.confirmed { background: #10b981; }
.day-dots .dot.completed { background: #3b82f6; }
.day-dots .dot.cancelled { background: #ef4444; }

/* Modal */
.clinic-flow-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.clinic-flow-modal .modal-content {
    background: #fff;
    width: 500px;
    max-width: 90%;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.modal-header { padding: 20px 30px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-size: 18px; color: #1e293b; }
.modal-body { padding: 30px; }
.modal-footer { padding: 20px 30px; background: #f8fafc; border-top: 1px solid #f1f5f9; }

.app-detail-view .detail-row { margin-bottom: 15px; display: flex; gap: 15px; }
.app-detail-view label { font-weight: 600; color: #64748b; width: 120px; flex-shrink: 0; }
.app-detail-view span { color: #1e293b; }

.status-update-wrapper { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.status-update-wrapper label { font-weight: 600; font-size: 14px; color: #1e293b; }
.status-update-wrapper select { padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0; }

.btn-primary { background: var(--clinic-primary); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-primary:hover { filter: brightness(1.1); }

.modal-app-list { list-style: none; padding: 0; margin: 15px 0 0; }
.modal-app-list li { padding: 12px; border-radius: 8px; background: #f8fafc; margin-bottom: 8px; cursor: pointer; transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; }
.modal-app-list li:hover { background: #f1f5f9; }

@media (max-width: 768px) {
    .clinic-flow-doctor-dashboard-wrapper { flex-direction: column; }
    .dashboard-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e2e8f0; padding: 20px 0; }
    .dashboard-nav { flex-direction: row; overflow-x: auto; padding-bottom: 5px; }
    .doctor-profile-mini { display: none; }
}