/* ============================================================
   ViaGym Calendar — Premium Frontend
   ============================================================ */

#vgc-app.vgc-app {
    --vgc-blue: #2563EB;
    --vgc-blue-dk: #1a3f7a;
    --vgc-blue-deep: #0f2548;
    --vgc-blue-lt: #3B82F6;
    --vgc-blue-glow: #60A5FA;
    --vgc-bg: #f0f4f8;
    --vgc-card: #ffffff;
    --vgc-hover: #f8fafc;
    --vgc-border: #e2e8f0;
    --vgc-text: #1e293b;
    --vgc-text2: #475569;
    --vgc-text3: #94a3b8;
    --vgc-r: 16px;
    --vgc-r-sm: 10px;
    --vgc-ease: cubic-bezier(0.4,0,0.2,1);
    --vgc-bounce: cubic-bezier(0.34,1.56,0.64,1);
}

/* Reset */
#vgc-app.vgc-app, #vgc-app.vgc-app *, #vgc-app.vgc-app *::before, #vgc-app.vgc-app *::after {
    box-sizing: border-box !important; margin: 0; padding: 0; border: 0; font: inherit; line-height: 1.5; text-decoration: none;
}
#vgc-app.vgc-app {
    font-family: -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif !important;
    font-size: 15px !important; color: var(--vgc-text) !important; background: var(--vgc-bg) !important;
    border-radius: var(--vgc-r) !important; overflow: hidden !important; position: relative !important;
    max-width: 1400px !important; width: 100% !important; margin: 0 auto !important;
    -webkit-font-smoothing: antialiased !important;
}
#vgc-app.vgc-app button { cursor: pointer; font-family: inherit !important; background: none; }

/* ---- Entrance ---- */
#vgc-app .vgc-entrance {
    position: absolute; inset: 0; z-index: 100;
    background: linear-gradient(135deg, var(--vgc-blue-deep) 0%, var(--vgc-blue-dk) 40%, var(--vgc-blue) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    animation: vgcEntFade 0.6s ease 1.8s forwards;
}
@keyframes vgcEntFade { to { opacity:0; pointer-events:none; visibility:hidden; } }
#vgc-app .vgc-entrance-ring-wrap { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
#vgc-app .vgc-entrance-ring { position: absolute; inset: 0; border: 3px solid rgba(255,255,255,0.15); border-top-color: #fff; border-radius: 50%; animation: vgcSpin 1s linear infinite; }
#vgc-app .vgc-entrance-ring--2 { inset: 8px; border-width: 2px; border-top-color: var(--vgc-blue-glow); animation-direction: reverse; animation-duration: 1.5s; }
@keyframes vgcSpin { to { transform: rotate(360deg); } }
#vgc-app .vgc-entrance-icon { font-size: 24px; z-index: 2; animation: vgcPulse 1s ease-in-out infinite alternate; }
@keyframes vgcPulse { from { opacity:0.5; transform:scale(0.9); } to { opacity:1; transform:scale(1.1); } }
#vgc-app .vgc-entrance-text { font-size: 26px !important; font-weight: 700 !important; color: #fff !important; animation: vgcUp 0.5s ease 0.3s both; }
#vgc-app .vgc-entrance-sub { font-size: 14px !important; color: rgba(255,255,255,0.45) !important; animation: vgcUp 0.5s ease 0.5s both; }
@keyframes vgcUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* ---- Hero ---- */
#vgc-app .vgc-hero {
    position: relative; overflow: hidden; padding: 44px 40px 32px !important;
    background: linear-gradient(135deg, var(--vgc-blue-deep) 0%, var(--vgc-blue-dk) 50%, var(--vgc-blue) 100%);
}
#vgc-app .vgc-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#vgc-app .vgc-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; }
#vgc-app .vgc-hero-orb--1 { width: 280px; height: 280px; background: var(--vgc-blue-glow); top: -80px; right: -40px; animation: vgcFloat 8s ease-in-out infinite alternate; }
#vgc-app .vgc-hero-orb--2 { width: 180px; height: 180px; background: #818cf8; bottom: -50px; left: 10%; animation: vgcFloat 10s ease-in-out infinite alternate-reverse; }
#vgc-app .vgc-hero-orb--3 { width: 140px; height: 140px; background: #38bdf8; top: 20%; left: 45%; animation: vgcFloat 12s ease-in-out infinite alternate; }
@keyframes vgcFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(25px,-18px) scale(1.1); } }

#vgc-app .vgc-hero-content { position: relative; z-index: 2; }
#vgc-app .vgc-hero-title { font-size: 30px !important; font-weight: 800 !important; color: #fff !important; margin: 0 0 6px !important; letter-spacing: -0.5px !important; }
#vgc-app .vgc-t-via { color: #fff !important; }
#vgc-app .vgc-t-gym { color: var(--vgc-blue-glow) !important; }
#vgc-app .vgc-t-sep { color: rgba(255,255,255,0.25) !important; margin: 0 8px !important; font-weight: 300 !important; }
#vgc-app .vgc-t-sub { color: rgba(255,255,255,0.8) !important; font-weight: 400 !important; }
#vgc-app .vgc-hero-subtitle { font-size: 14px !important; color: rgba(255,255,255,0.5) !important; margin: 0 0 24px !important; }

/* Search */
#vgc-app .vgc-search-box { max-width: 600px; margin: 0 0 20px !important; }
#vgc-app .vgc-search-inner { position: relative; display: flex; align-items: center; }
#vgc-app .vgc-search-ico { position: absolute; left: 16px; color: rgba(255,255,255,0.35); pointer-events: none; width: 20px !important; height: 20px !important; }
#vgc-app .vgc-search-input {
    width: 100% !important; padding: 13px 50px 13px 48px !important;
    border: 1px solid rgba(255,255,255,0.13) !important; border-radius: 14px !important;
    background: rgba(255,255,255,0.08) !important; color: #fff !important;
    font-size: 14px !important; outline: none !important; transition: all 0.25s !important;
    backdrop-filter: blur(12px); font-family: inherit !important;
}
#vgc-app .vgc-search-input::placeholder { color: rgba(255,255,255,0.3) !important; }
#vgc-app .vgc-search-input:focus { background: rgba(255,255,255,0.13) !important; border-color: rgba(255,255,255,0.28) !important; box-shadow: 0 0 0 4px rgba(96,165,250,0.12) !important; }
#vgc-app .vgc-search-x { position: absolute; right: 14px; color: rgba(255,255,255,0.4) !important; font-size: 16px !important; padding: 4px !important; }
#vgc-app .vgc-search-x:hover { color: #fff !important; }

/* Stats */
#vgc-app .vgc-stats { display: flex; gap: 8px; flex-wrap: wrap; }
#vgc-app .vgc-stat-pill {
    padding: 5px 14px !important; border-radius: 50px; font-size: 12px !important; font-weight: 600 !important;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6) !important; backdrop-filter: blur(8px);
    animation: vgcUp 0.4s ease 0.6s both;
}
#vgc-app .vgc-stat-pill--accent { background: rgba(59,130,246,0.2); color: #93c5fd !important; animation-delay: 0.7s; }

/* ---- Toolbar ---- */
#vgc-app .vgc-toolbar { background: var(--vgc-card); border-bottom: 1px solid var(--vgc-border); position: sticky; top: 0; z-index: 50; }
#vgc-app .vgc-toolbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px !important; gap: 16px; flex-wrap: wrap; }

/* View Toggle */
#vgc-app .vgc-view-toggle {
    display: flex; position: relative; background: var(--vgc-bg); border-radius: 10px; padding: 3px !important;
}
#vgc-app .vgc-view-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 18px !important;
    font-size: 13px !important; font-weight: 600 !important; color: var(--vgc-text3) !important;
    border-radius: 8px; position: relative; z-index: 2; transition: color 0.2s !important; white-space: nowrap;
}
#vgc-app .vgc-view-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
#vgc-app .vgc-view-btn--active { color: var(--vgc-blue) !important; }
#vgc-app .vgc-view-slider {
    position: absolute; top: 3px; height: calc(100% - 6px); background: var(--vgc-card); border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: all 0.3s var(--vgc-bounce) !important; z-index: 1;
}

/* Month Nav */
#vgc-app .vgc-month-nav { display: flex; align-items: center; gap: 6px; }
#vgc-app .vgc-month-btn {
    width: 36px; height: 36px; border-radius: 10px !important; display: flex; align-items: center; justify-content: center;
    color: var(--vgc-text2) !important; transition: all 0.2s !important;
}
#vgc-app .vgc-month-btn svg { width: 18px !important; height: 18px !important; }
#vgc-app .vgc-month-btn:hover { background: var(--vgc-bg) !important; color: var(--vgc-blue) !important; }
#vgc-app .vgc-month-label { font-size: 16px !important; font-weight: 700 !important; color: var(--vgc-text) !important; min-width: 180px; text-align: center; }
#vgc-app .vgc-today-btn {
    padding: 6px 16px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important;
    color: var(--vgc-blue) !important; border: 1.5px solid var(--vgc-blue) !important; transition: all 0.2s !important;
}
#vgc-app .vgc-today-btn:hover { background: var(--vgc-blue) !important; color: #fff !important; }

/* ---- Filters ---- */
#vgc-app .vgc-filters {
    display: flex; gap: 6px; padding: 12px 24px !important; flex-wrap: wrap;
    background: var(--vgc-card); border-bottom: 1px solid var(--vgc-border);
}
#vgc-app .vgc-ftag {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px !important;
    border-radius: 50px; border: 1.5px solid var(--vgc-border) !important;
    font-size: 12px !important; font-weight: 600 !important; color: var(--vgc-text2) !important;
    background: var(--vgc-card) !important; transition: all 0.2s !important; white-space: nowrap;
}
#vgc-app .vgc-ftag:hover { border-color: var(--vgc-blue) !important; color: var(--vgc-blue) !important; }
#vgc-app .vgc-ftag--on { border-color: var(--vgc-blue) !important; background: var(--vgc-blue) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(37,99,235,0.3) !important; }
#vgc-app .vgc-ftag-count { opacity: 0.6; font-size: 11px !important; }

/* ---- Calendar Grid ---- */
#vgc-app .vgc-cal-wrap { padding: 20px 24px 24px !important; }
#vgc-app .vgc-cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 6px !important; }
#vgc-app .vgc-cal-dow { text-align: center; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.8px; color: var(--vgc-text3) !important; padding: 8px 0 !important; }
#vgc-app .vgc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

#vgc-app .vgc-day {
    min-height: 100px; background: var(--vgc-card) !important; border-radius: var(--vgc-r-sm) !important;
    padding: 6px 8px !important; cursor: default; transition: all 0.2s !important;
    border: 1.5px solid transparent !important; position: relative; overflow: hidden;
}
#vgc-app .vgc-day:hover { border-color: var(--vgc-border) !important; }
#vgc-app .vgc-day--other { opacity: 0.35; }
#vgc-app .vgc-day--today { border-color: var(--vgc-blue) !important; background: rgba(37,99,235,0.03) !important; }
#vgc-app .vgc-day-num { font-size: 13px !important; font-weight: 700 !important; color: var(--vgc-text) !important; margin: 0 0 4px !important; }
#vgc-app .vgc-day--today .vgc-day-num {
    background: var(--vgc-blue); color: #fff !important; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px !important;
}
#vgc-app .vgc-day-events { display: flex; flex-direction: column; gap: 2px; }
#vgc-app .vgc-day-ev {
    font-size: 11px !important; font-weight: 500 !important; padding: 2px 6px !important;
    border-radius: 4px; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; transition: opacity 0.15s !important; line-height: 1.3 !important;
}
#vgc-app .vgc-day-ev:hover { opacity: 0.85; }
#vgc-app .vgc-day-more {
    font-size: 10px !important; font-weight: 700 !important; color: var(--vgc-text3) !important;
    padding: 2px 4px !important; cursor: pointer;
}
#vgc-app .vgc-day-more:hover { color: var(--vgc-blue) !important; }

/* ---- List View ---- */
#vgc-app .vgc-list-wrap { padding: 20px 24px 24px !important; }

#vgc-app .vgc-list-group { margin: 0 0 24px !important; }
#vgc-app .vgc-list-date {
    font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--vgc-text3) !important; padding: 8px 0 !important; border-bottom: 1px solid var(--vgc-border); margin: 0 0 8px !important;
}

#vgc-app .vgc-list-item {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px !important;
    background: var(--vgc-card) !important; border-radius: var(--vgc-r-sm) !important;
    margin: 0 0 6px !important; cursor: pointer; transition: all 0.25s var(--vgc-ease) !important;
    border: 1px solid transparent !important;
    opacity: 0; animation: vgcCardIn 0.4s var(--vgc-ease) forwards;
}
@keyframes vgcCardIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

#vgc-app .vgc-list-item:hover { border-color: var(--vgc-border) !important; transform: translateX(4px); box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important; }

#vgc-app .vgc-list-color {
    width: 4px; min-height: 40px; border-radius: 4px; flex-shrink: 0; margin: 2px 0 !important;
}
#vgc-app .vgc-list-info { flex: 1; min-width: 0; }
#vgc-app .vgc-list-title { font-size: 14px !important; font-weight: 600 !important; color: var(--vgc-text) !important; margin: 0 0 3px !important; }
#vgc-app .vgc-list-meta { font-size: 12px !important; color: var(--vgc-text3) !important; display: flex; gap: 12px; flex-wrap: wrap; }
#vgc-app .vgc-list-meta-item { display: inline-flex; align-items: center; gap: 4px; }
#vgc-app .vgc-list-meta svg { width: 13px !important; height: 13px !important; opacity: 0.5; }
#vgc-app .vgc-list-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px !important; }
#vgc-app .vgc-list-tag {
    font-size: 10px !important; font-weight: 700 !important; padding: 2px 8px !important;
    border-radius: 50px; background: var(--vgc-bg); color: var(--vgc-text2) !important; text-transform: uppercase; letter-spacing: 0.3px;
}

/* ---- Empty ---- */
#vgc-app .vgc-empty { text-align: center; padding: 80px 20px !important; color: var(--vgc-text3); }
#vgc-app .vgc-empty svg { width: 64px !important; height: 64px !important; margin: 0 auto 16px !important; display: block; }
#vgc-app .vgc-empty p { font-size: 16px !important; margin: 0 0 16px !important; }
#vgc-app .vgc-btn-outline {
    padding: 8px 24px !important; border: 1.5px solid var(--vgc-border) !important; border-radius: 50px !important;
    font-size: 13px !important; font-weight: 500 !important; color: var(--vgc-text2) !important; transition: all 0.2s !important;
}
#vgc-app .vgc-btn-outline:hover { border-color: var(--vgc-blue) !important; color: var(--vgc-blue) !important; }

/* ---- Drawer (Event Detail) ---- */
#vgc-app .vgc-drawer { position: fixed; inset: 0; z-index: 999999; display: flex; justify-content: flex-end; animation: vgcFI 0.2s ease; }
@keyframes vgcFI { from { opacity: 0; } to { opacity: 1; } }
#vgc-app .vgc-drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); }
#vgc-app .vgc-drawer-card {
    position: relative; width: 420px; max-width: 90vw; background: var(--vgc-card) !important;
    box-shadow: -8px 0 40px rgba(0,0,0,0.15) !important; z-index: 2; overflow-y: auto;
    animation: vgcSlideIn 0.35s var(--vgc-bounce);
}
@keyframes vgcSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
#vgc-app .vgc-drawer-color { height: 6px; }
#vgc-app .vgc-drawer-close {
    position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 10px !important;
    display: flex; align-items: center; justify-content: center; color: var(--vgc-text3) !important; transition: all 0.2s !important;
}
#vgc-app .vgc-drawer-close svg { width: 20px !important; height: 20px !important; }
#vgc-app .vgc-drawer-close:hover { background: var(--vgc-bg) !important; color: var(--vgc-text) !important; }
#vgc-app .vgc-drawer-body { padding: 28px 24px !important; }
#vgc-app .vgc-drawer-title { font-size: 20px !important; font-weight: 700 !important; color: var(--vgc-text) !important; margin: 0 0 16px !important; padding-right: 40px !important; }
#vgc-app .vgc-drawer-row { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px !important; }
#vgc-app .vgc-drawer-row svg { width: 18px !important; height: 18px !important; color: var(--vgc-text3); flex-shrink: 0; margin-top: 2px; }
#vgc-app .vgc-drawer-row-text { font-size: 14px !important; color: var(--vgc-text2) !important; }
#vgc-app .vgc-drawer-row-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vgc-text3) !important; margin: 0 0 2px !important; }
#vgc-app .vgc-drawer-desc { font-size: 14px !important; color: var(--vgc-text2) !important; line-height: 1.7 !important; margin-top: 20px !important; padding-top: 16px !important; border-top: 1px solid var(--vgc-border); }
#vgc-app .vgc-drawer-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px !important; }
#vgc-app .vgc-drawer-tag {
    font-size: 11px !important; font-weight: 700 !important; padding: 4px 12px !important;
    border-radius: 50px; background: var(--vgc-bg); color: var(--vgc-text2) !important;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    #vgc-app .vgc-hero { padding: 32px 20px 24px !important; }
    #vgc-app .vgc-hero-title { font-size: 24px !important; }
    #vgc-app .vgc-t-sep, #vgc-app .vgc-t-sub { display: none !important; }
    #vgc-app .vgc-toolbar-inner { flex-direction: column; align-items: stretch; gap: 10px; }
    #vgc-app .vgc-month-nav { justify-content: center; }
    #vgc-app .vgc-cal-wrap, #vgc-app .vgc-list-wrap { padding: 12px 12px 16px !important; }
    #vgc-app .vgc-day { min-height: 60px; padding: 4px !important; }
    #vgc-app .vgc-day-num { font-size: 11px !important; }
    #vgc-app .vgc-day-ev { font-size: 9px !important; padding: 1px 3px !important; }
    #vgc-app .vgc-drawer-card { width: 100%; max-width: 100vw; }
}