/* BeeHive Dashboard Styles (scoped for freelancer_dashboard) */
:root{
  --bg:#fffef2;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --border:#f3e8c8;
  --amber:#f59e0b;
  --amber-600:#d97706;
  --blue:#3b82f6;
  --green:#10b981;
  --red:#ef4444;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Page background */
body.honeycomb-bg{
  background:
    radial-gradient(circle at 10px 10px, rgba(0,0,0,.04) 2px, transparent 3px) 0 0/24px 24px,
    radial-gradient(circle at 22px 22px, rgba(0,0,0,.04) 2px, transparent 3px) 0 0/24px 24px,
    linear-gradient(180deg, rgba(255, 193, 7, .05), rgba(255, 152, 0, .05));
  min-height:100vh;
  color:var(--ink);
}

/* Shell */
.container{max-width:1200px;margin:0 auto;padding:24px;}
.header{position:sticky;top:0;background:linear-gradient(90deg,#ffecb3,#ffd54f);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:24px;box-shadow:var(--shadow);}
.header-content{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.header-left{display:flex;align-items:center;gap:12px;}
.logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.08);}
.bee-icon{font-size:20px;}

.dashboard-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start;}
@media (max-width: 980px){.dashboard-grid{grid-template-columns:1fr;}}

/* Sidebar */
.sidebar{position:sticky;top:84px;}
.profile-card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px;}
.profile-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:12px;}
.profile-avatar{width:90px;height:90px;border-radius:999px;object-fit:cover;border:3px solid #ffe082;box-shadow:0 6px 16px rgba(245, 158, 11, .25);}
.profile-email{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.92rem;}
.profile-section{margin-top:12px;}
.section-label{font-weight:600;color:#374151;margin-bottom:4px;}
.section-text{color:var(--muted);}
.hourly-rate{margin-top:14px;padding:10px 12px;border:1px dashed #fde68a;border-radius:10px;display:flex;align-items:center;justify-content:space-between;}
.rate-value{display:flex;align-items:center;gap:8px;color:#92400e;font-weight:700;}
.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}

/* Main area */
.main-content{display:flex;flex-direction:column;gap:20px;}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width: 980px){.stats-grid{grid-template-columns:1fr;}}
.stat-card{background:var(--card);border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);padding:16px;display:flex;align-items:center;justify-content:space-between;}
.stat-info .stat-label{color:var(--muted);font-size:.9rem;margin:0;}
.stat-info .stat-value{font-weight:800;font-size:1.8rem;margin:2px 0 0;}
.stat-icon{font-size:28px;opacity:.9;}
.stat-amber{background:linear-gradient(180deg,#fff9e6,#fff);}
.stat-green{background:linear-gradient(180deg,#e9fff7,#fff);}
.stat-blue{background:linear-gradient(180deg,#eaf2ff,#fff);}

/* Cards */
.content-card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px;}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}

/* Services */
.services-list{display:grid;grid-template-columns:1fr;gap:12px;}
.service-card{border:1px solid #fde68a;border-radius:14px;padding:14px;background:#fffbeb;}
.service-header{margin-bottom:10px;}
.service-title-area{display:flex;align-items:center;gap:10px;}
.badge{display:inline-block;padding:4px 8px;border-radius:20px;font-size:.78rem;font-weight:700;}
.badge-success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0;}
.service-description{color:#4b5563;margin:8px 0 0;}
.service-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;}
.service-price{font-weight:800;color:#92400e;margin:0;}
.service-actions{display:flex;align-items:center;gap:8px;}

/* Bookings */
.bookings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width: 980px){.bookings-grid{grid-template-columns:1fr;}}
.empty-state{display:grid;place-items:center;border:2px dashed #fcd34d;border-radius:12px;padding:30px;color:#9ca3af;gap:8px;}
.empty-state i{color:#f59e0b;}

/* Reviews */
.reviews-list{display:grid;grid-template-columns:1fr;gap:12px;}
.review-card{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff;}
.review-avatar{width:56px;height:56px;border-radius:999px;object-fit:cover;border:2px solid #fde68a;}
.review-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;}
.review-date{color:var(--muted);font-size:.85rem;}
.review-rating{color:#f59e0b;display:flex;align-items:center;gap:4px;margin:3px 0 6px;}
.rating-text{color:var(--muted);font-size:.85rem;margin-left:6px;}
.review-comment{color:#374151;margin:0 0 6px;}
.review-service{color:var(--muted);font-size:.9rem;margin:0;}

/* Buttons */
button{cursor:pointer;border:none;background:none;}
.btn-primary{background:var(--amber);color:#1f2937;padding:10px 14px;border-radius:10px;font-weight:800;box-shadow:0 6px 14px rgba(245, 158, 11, .35);transition:.2s;}
.btn-primary:hover{background:var(--amber-600);transform:translateY(-1px);} 
.btn-outline{background:#fff;color:#1f2937;border:2px solid #fcd34d;padding:8px 12px;border-radius:10px;font-weight:700;}
.btn-outline:hover{background:#fff7d6;}
.btn-outline-secondary{background:#fff;color:#1f2937;border:2px solid #e5e7eb;padding:8px 12px;border-radius:10px;font-weight:700;}
.btn-outline-secondary:hover{background:#f9fafb;}
.btn-sm{padding:6px 10px;border-radius:9px;font-weight:700;}
.btn-blue{background:var(--blue);color:#fff;}
.btn-amber{background:var(--amber);color:#1f2937;}
.btn-red{background:var(--red);color:#fff;}
.btn-blue:hover,.btn-amber:hover,.btn-red:hover{filter:brightness(.95);} 

/* Utilities */
.grid{display:grid;gap:12px;}
.flex{display:flex;}
.center{display:grid;place-items:center;}
.text-muted{color:var(--muted);}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #1f2937;
}

/* Honeycomb Background */
.honeycomb-bg {
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 86.6px, rgba(252, 211, 77, 0.15) 86.6px, rgba(252, 211, 77, 0.15) 87.6px),
        repeating-linear-gradient(60deg, transparent, transparent 86.6px, rgba(252, 211, 77, 0.15) 86.6px, rgba(252, 211, 77, 0.15) 87.6px),
        repeating-linear-gradient(120deg, transparent, transparent 86.6px, rgba(252, 211, 77, 0.15) 86.6px, rgba(252, 211, 77, 0.15) 87.6px),
        repeating-linear-gradient(180deg, transparent, transparent 86.6px, rgba(252, 211, 77, 0.15) 86.6px, rgba(252, 211, 77, 0.15) 87.6px),
        repeating-linear-gradient(240deg, transparent, transparent 86.6px, rgba(252, 211, 77, 0.15) 86.6px, rgba(252, 211, 77, 0.15) 87.6px),
        repeating-linear-gradient(300deg, transparent, transparent 86.6px, rgba(252, 211, 77, 0.15) 86.6px, rgba(252, 211, 77, 0.15) 87.6px);
    background-color: #FFFBEB;
    min-height: 100vh;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Header */
.header {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

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

.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo {
    width: 2.5rem;
    height: 2.5rem;
    background: #FCD34D;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bee-icon {
    font-size: 1.5rem;
}

h1 {
    font-size: 1.5rem;
    font-weight: 500;
}

h2 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

h3 {
    font-size: 1.125rem;
    font-weight: 500;
}

h4 {
    font-size: 1rem;
    font-weight: 500;
}

/* Buttons */
button {
    cursor: pointer;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: #FCD34D;
    color: #92400E;
}

.btn-primary:hover {
    background: #F59E0B;
}

.btn-outline {
    background: white;
    border: 1px solid #FCD34D;
    color: #92400E;
}

.btn-outline:hover {
    background: #FEF3C7;
}

.btn-outline-secondary {
    background: white;
    border: 1px solid #d1d5db;
    color: #1f2937;
}

.btn-outline-secondary:hover {
    background: #f3f4f6;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid;
}

.btn-blue {
    color: #2563eb;
    border-color: #bfdbfe;
    background: white;
}

.btn-blue:hover {
    background: #eff6ff;
}

.btn-amber {
    color: #d97706;
    border-color: #fde68a;
    background: white;
}

.btn-amber:hover {
    background: #fef3c7;
}

.btn-red {
    color: #dc2626;
    border-color: #fecaca;
    background: white;
}

.btn-red:hover {
    background: #fef2f2;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 300px 1fr;
    }
}

/* Profile Card */
.profile-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.profile-email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.profile-section {
    width: 100%;
    margin-bottom: 1rem;
}

.section-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.section-text {
    font-size: 0.875rem;
    color: #374151;
}

.hourly-rate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FEF3C7;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #FDE68A;
    margin-bottom: 1.5rem;
}

.hourly-rate span {
    font-size: 0.875rem;
    color: #374151;
}

.rate-value {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #92400E;
}

.rate-value i {
    color: #FCD34D;
}

.profile-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-actions button {
    width: 100%;
    justify-content: center;
}

/* Main Content */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-amber {
    background: #FEF3C7;
}

.stat-green {
    background: #D1FAE5;
}

.stat-blue {
    background: #DBEAFE;
}

.stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.875rem;
    font-weight: 500;
}

.stat-icon {
    font-size: 2rem;
}

.stat-amber .stat-icon {
    color: #d97706;
}

.stat-green .stat-icon {
    color: #059669;
}

.stat-blue .stat-icon {
    color: #2563eb;
}

.stat-purple {
    background: #F3E8FF;
}

.stat-purple .stat-icon {
    color: #9333ea;
}

/* Stats Grid 4 Columns */
.stats-grid-4 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .stats-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Content Card */
.content-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Services */
.services-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.service-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: box-shadow 0.2s;
}

.service-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.service-header {
    margin-bottom: 0.75rem;
}

.service-title-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.service-description {
    font-size: 0.875rem;
    color: #6b7280;
}

.service-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-price {
    color: #92400E;
    font-weight: 500;
}

.service-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success {
    background: #10b981;
    color: white;
}

.badge-warning {
    background: #f59e0b;
    color: white;
}

.badge-danger {
    background: #ef4444;
    color: white;
}

.badge-info {
    background: #3b82f6;
    color: white;
}

/* Bookings Grid */
.bookings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .bookings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.empty-state {
    text-align: center;
    padding: 2rem 0;
}

.empty-state i {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Reviews */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.review-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    gap: 0.75rem;
}

.review-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.review-content {
    flex: 1;
}

.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.review-header h4 {
    font-size: 0.875rem;
}

.review-date {
    font-size: 0.75rem;
    color: #6b7280;
}

.review-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.review-rating i {
    font-size: 0.875rem;
}

.star-filled {
    color: #FCD34D;
}

.star-empty {
    color: #d1d5db;
}

.rating-text {
    font-size: 0.75rem;
    color: #6b7280;
    margin-left: 0.25rem;
}

.review-comment {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

.review-service {
    font-size: 0.75rem;
    color: #6b7280;
}

.review-service-name {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* Bookings Table */
.bookings-table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
}

.bookings-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.bookings-table thead {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.bookings-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.bookings-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.875rem;
}

.bookings-table tbody tr:hover {
    background: #f9fafb;
}

.service-cell {
    display: flex;
    flex-direction: column;
}

.service-name {
    font-weight: 500;
    color: #1f2937;
}

.freelancer-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.freelancer-avatar-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.total-cell {
    font-weight: 600;
    color: #92400E;
}

.date-cell {
    color: #6b7280;
}

.time-text {
    font-size: 0.75rem;
    color: #9ca3af;
}

.text-muted {
    color: #9ca3af;
    font-size: 0.875rem;
}

.btn-warning {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

.btn-warning:hover {
    background: #d97706;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s;
}

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
    padding: 0 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #FCD34D;
    box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.1);
}

.form-group textarea {
    resize: vertical;
    font-family: inherit;
}

/* Star Rating */
.star-rating {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.star-rating i {
    font-size: 2rem;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
}

.star-rating i:hover,
.star-rating i.active {
    color: #FCD34D;
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 640px) {
    .service-actions {
        width: 100%;
    }
    
    .service-actions button {
        flex: 1;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .section-header button {
        width: 100%;
    }

    .modal-content {
        width: 95%;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer button {
        width: 100%;
    }
}