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

:root{
    --bg-start:#f8fbff;
    --bg-end:#eef6ff;
    --primary:#1976d2;
    --primary-600:#2196f3;
    --muted:#6b7280;
    --card-bg: rgba(255,255,255,0.95);
}

*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
html,body{height:100%;margin:0;padding:0;background:linear-gradient(135deg,var(--bg-start),var(--bg-end));background-attachment:fixed;color:#0f172a}

.card{background:var(--card-bg);border-radius:14px;border:1px solid rgba(25,118,210,0.08);box-shadow:0 10px 30px rgba(2,6,23,0.06)}

.fade-in-up{opacity:0;transform:translateY(8px);animation:fadeUp .6s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

.glass{backdrop-filter: blur(6px);}

.btn-primary{background:linear-gradient(90deg,var(--primary-600),var(--primary));border:0}

.navbar-brand{font-weight:700;color:var(--primary)}

.muted{color:var(--muted)}

/* Responsive tweaks */
@media (max-width:768px){
    .sidebar{display:none}
    .flex-fill{padding:1.25rem}
}

.card-compact{padding:1rem}

/* Small utilities */
.align-center{display:flex;align-items:center;justify-content:center}

.user-avatar{cursor:pointer;user-select:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#f3f9ff);box-shadow:0 2px 6px rgba(2,6,23,0.06);font-weight:600;color:#000}

/* Extend the top "ribbon" and blue background behind content without changing elements
   Uses a pseudo-element on .flex-fill so it applies across pages that use the layout */
.flex-fill{position:relative}
.flex-fill::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* extend well beyond viewport so tall components are covered */
    bottom: -900px;
    background: linear-gradient(180deg, rgba(33,150,243,0.20) 0%, rgba(25,118,210,0.10) 35%, rgba(255,255,255,0) 90%);
    pointer-events: none;
    z-index: -1;
}

/* Make the ribbon stronger on very large screens but still subtle */
@media (min-width:1200px){
    .flex-fill::before{bottom:-1200px;background: linear-gradient(180deg, rgba(33,150,243,0.24) 0%, rgba(25,118,210,0.12) 35%, rgba(255,255,255,0) 90%)}
}

/* Calendar container tweaks to avoid inner scroll and clipping */
.calendar-wrapper{padding:12px;background:var(--card-bg);border-radius:12px;border:1px solid rgba(33,150,243,0.15);box-shadow:0 12px 30px rgba(33,150,243,0.06);overflow:visible}
.calendar-wrapper .fc{background:transparent}
.calendar-wrapper .fc-scroller{overflow:auto}

/* Force fixed heights on larger screens for consistent layout */
@media (min-width:992px){
    .calendar-wrapper{min-height:700px}
}

@media (min-width:1200px){
    .calendar-wrapper{min-height:820px}
}