/* Dashboard styles - created by AI assistant
   File: public/assets/css/dashboard.css
   Purpose: Styles for the user dashboard page (cards, sidebar, responsive)
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --dash-primary-1: #EA4335; /* Google Red */
    --dash-primary-2: #D23321; /* Google Red darker */
    --dash-accent-green: #34A853; /* Google Green */
    --dash-accent-blue: #4285F4; /* Google Blue */
    --dash-bg: #F8F9FA; /* Google light background */
}

.dashboard-app {
    display: flex;
    min-height: calc(100vh - 0px);
    background: var(--dash-bg);
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--color-text);
}

.dashboard-sidebar {
    width: 260px;
    background: linear-gradient(180deg, #D23321, #EA4335);
    color: white;
    padding: 22px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    box-shadow: 0 6px 24px rgba(95,133,219,0.08);
    transition: transform 0.28s ease;
    z-index: 30;
}
.sidebar-inner { display:flex; flex-direction:column; height:100%; }
.sidebar-brand { font-weight:700; font-size:1.15rem; margin-bottom:18px; }
.sidebar-nav { margin-top:12px; flex:1 1 auto; }
.sidebar-nav ul { list-style:none; padding:0; margin:0; }
.sidebar-nav li { margin-bottom:8px; }
.sidebar-nav a { color:white; display:block; padding:10px 12px; border-radius:8px; font-weight:600; transition: background 0.18s ease, transform 0.12s ease; }
.sidebar-nav a:hover, .sidebar-nav .active a { background: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.sidebar-footer { margin-top:18px; }

.dashboard-main { flex:1; display:flex; flex-direction:column; min-height:100vh; }
.dashboard-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background: rgba(255,255,255,0.7); border-bottom:1px solid var(--color-border); backdrop-filter: blur(8px); }
.sidebar-toggle { background:none; border:none; font-size:1.25rem; padding:8px 12px; cursor:pointer; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.user-info { display:flex; align-items:center; gap:10px; }
.user-avatar { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#fff,#ffe6e6); color:var(--dash-primary-2); font-weight:700; box-shadow: 0 4px 16px rgba(234, 67, 53, 0.08); }
.user-meta .user-name { font-weight:700; }
.user-meta .user-email { font-size:0.85rem; color:var(--color-text-light); }

.container { max-width:1200px; margin:0 auto; padding:24px; }
.dashboard-overview { margin-top:18px; }
.overview-row { display:flex; gap:18px; }
.stat-card { padding:18px; border-radius:12px; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: 0 6px 18px rgba(95,133,219,0.06); text-align:left; }
.stat-title { color:var(--color-text-light); font-weight:600; margin-bottom:8px; font-size:0.95rem; }
.stat-value { font-weight:800; font-size:1.6rem; color:var(--dash-primary-1); }

.dashboard-body { margin-top:20px; }
.grid-two { display:grid; grid-template-columns: 1fr 360px; gap:20px; align-items:start; }

.card { background:white; border-radius:12px; padding:18px; box-shadow: 0 10px 30px rgba(16,24,40,0.04); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(16,24,40,0.06); }
.section-heading { font-size:1.25rem; margin-bottom:12px; font-weight:700; font-family: 'Poppins', sans-serif; }

.booking-card { padding:18px; border-radius:12px; display:block; margin-bottom:14px; overflow:hidden; }
.booking-grid { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.booking-main { flex:1; }
.booking-title { margin:0 0 8px 0; font-size:1.125rem; font-weight:700; }
.booking-meta { color: var(--color-text-light); font-size:0.95rem; display:grid; gap:6px; }
.booking-side { width:130px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

.status-badge { display:inline-block; padding:6px 10px; border-radius:20px; font-weight:700; font-size:0.8rem; color:white; }
.status-pending { background: #FBBC05; color: #5F6000; } /* Google Yellow */
.status-confirmed { background: #34A853; color: #FFFFFF; } /* Google Green */
.status-contacted { background: #4285F4; color: #FFFFFF; } /* Google Blue */
.status-cancelled { background: #EA4335; color: #FFFFFF; } /* Google Red */

.muted { color: var(--color-text-light); }
.form-group { margin-bottom:12px; }
.form-label { display:block; margin-bottom:6px; font-weight:600; }
.dashboard-footer { padding:18px 24px; margin-top:auto; border-top:1px solid var(--color-border); background:#fff; }

.fade-in { opacity:0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity:1; transform: translateY(0); }

@media (max-width: 1024px) {
    .overview-row { flex-direction: column; }
    .grid-two { grid-template-columns: 1fr 320px; }
    .dashboard-sidebar { width:220px; }
}
@media (max-width: 820px) {
    .dashboard-app { flex-direction: column; }
    .dashboard-sidebar { position: fixed; left:-320px; top:0; height:100vh; width:260px; }
    .dashboard-sidebar.open { left: 0; }
    .sidebar-toggle { display:inline-flex; }
    .grid-two { grid-template-columns: 1fr; }
    .booking-side { width:120px; text-align:right; }
    .container { padding:12px; }
}