/* ==========================================================================
   Client Portal — shared styles (login, register, dashboard, event details)
   Uses --portal-brand-primary / --portal-brand-secondary (set per DJ in portal_head)
   ========================================================================== */

:root {
   --portal-brand-primary: var(--ep-brand-primary, #F7426F);
   --portal-brand-secondary: var(--ep-brand-secondary, #F87A58);
   --portal-bg-start: #181c24;
   --portal-bg-end: #2c3e50;
   --portal-glass-bg: rgba(24, 28, 36, 0.2);
   --portal-glass-border: rgba(255, 255, 255, 0.12);
}

.portal-page {
   background: var(--portal-bg-start);
   min-height: 100vh;
   color: #fff;
   overflow-x: hidden;
   position: relative;
}

/* ── Layout ─────────────────────────────────────────────── */
.signin-area {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 1;
   padding: 30px 0;
}

.portal-brand-header {
   text-align: center;
   margin-bottom: 1.25rem;
}

.portal-brand-header img {
   max-height: 72px;
   max-width: 200px;
   object-fit: contain;
   margin-bottom: 0.5rem;
}

.portal-brand-header .portal-provider-name {
   font-size: 0.95rem;
   color: rgba(255, 255, 255, 0.75);
   margin: 0;
}

/* ── Glass card ─────────────────────────────────────────── */
.glass-card {
   background: var(--portal-glass-bg);
   border-radius: 24px;
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   border: 1px solid var(--portal-glass-border);
   color: #fff;
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease;
}

.glass-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 200%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
   transform: skewX(-15deg);
   pointer-events: none;
   transition: transform 0.5s ease;
}

.glass-card::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 24px;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
   pointer-events: none;
   z-index: 1;
}

.glass-card:hover {
   box-shadow: 0 15px 35px 0 rgba(31, 38, 135, 0.45), 0 0 15px 0 color-mix(in srgb, var(--portal-brand-primary) 20%, transparent);
   border-color: rgba(255, 255, 255, 0.25);
   background: rgba(24, 28, 36, 0.25);
}

.glass-card:hover::before {
   transform: skewX(-15deg) translateX(10%);
}

.glass-card .card-header {
   background: rgba(24, 28, 36, 0.4);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 24px 24px 0 0;
   position: relative;
   backdrop-filter: blur(12px) saturate(180%);
   -webkit-backdrop-filter: blur(12px) saturate(180%);
   box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.glass-card .card-body {
   color: #fff;
   position: relative;
   z-index: 0;
}

.glass-card .card-body::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.1) 0%, transparent 25%);
   background-size: 12px 12px;
   z-index: -1;
   opacity: 0.3;
}

.portal-page--auth .glass-card {
   animation: portal-float 6s ease-in-out infinite;
}

@keyframes portal-float {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-15px); }
}

@media (max-width: 576px) {
   .portal-page--auth .glass-card {
      margin: 0 15px;
      animation: none;
   }
}

/* ── Typography ─────────────────────────────────────────── */
.signin-title,
.venue-title,
.portal-page-title {
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 0;
   color: #fff;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.portal-accent {
   color: var(--portal-brand-secondary);
}

.portal-accent-strong {
   color: var(--portal-brand-primary);
}

/* ── Forms ────────────────────────────────────────────────── */
.signin-input label {
   color: rgba(255, 255, 255, 0.85);
   font-weight: 500;
   letter-spacing: 0.5px;
   margin-bottom: 8px;
}

.signin-input label span {
   color: var(--portal-brand-primary);
}

.signin-input input,
.signin-input textarea,
.signin-input select {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: #fff;
   border-radius: 12px;
   padding: 14px 20px;
   height: auto;
   font-size: 1.05rem;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   transition: all 0.3s ease;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.signin-input input:focus,
.signin-input textarea:focus,
.signin-input select:focus {
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
   border-color: color-mix(in srgb, var(--portal-brand-primary) 60%, transparent);
   box-shadow: 0 0 18px color-mix(in srgb, var(--portal-brand-primary) 15%, transparent), inset 0 2px 4px rgba(0, 0, 0, 0.1);
   outline: none;
}

.signin-input input::placeholder {
   color: rgba(255, 255, 255, 0.5);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-portal-primary,
.signin-btn-text {
   background: linear-gradient(135deg, color-mix(in srgb, var(--portal-brand-primary) 85%, transparent), color-mix(in srgb, var(--portal-brand-secondary) 85%, transparent));
   color: #fff;
   font-weight: 600;
   border: none;
   border-radius: 12px;
   height: 54px;
   font-size: 1.1rem;
   letter-spacing: 0.8px;
   box-shadow: 0 6px 18px color-mix(in srgb, var(--portal-brand-primary) 25%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.3);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.btn-portal-primary:hover,
.signin-btn-text:hover {
   background: linear-gradient(135deg, color-mix(in srgb, var(--portal-brand-secondary) 85%, transparent), color-mix(in srgb, var(--portal-brand-primary) 85%, transparent));
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 8px 25px color-mix(in srgb, var(--portal-brand-primary) 40%, transparent);
}

.btn-portal-primary.btn-sm,
.signin-btn-text.btn-sm {
   height: auto;
   padding: 6px 16px;
   font-size: 0.875rem;
}

.btn-portal-outline,
.event-detail-btn,
.back-btn,
.logout-btn {
   border: 1px solid color-mix(in srgb, var(--portal-brand-primary) 60%, transparent);
   color: var(--portal-brand-secondary);
   background: color-mix(in srgb, var(--portal-brand-secondary) 8%, transparent);
   border-radius: 10px;
   padding: 6px 16px;
   font-weight: 500;
   transition: all 0.3s ease;
   text-decoration: none;
   display: inline-block;
}

.btn-portal-outline:hover,
.event-detail-btn:hover,
.back-btn:hover,
.logout-btn:hover {
   background: color-mix(in srgb, var(--portal-brand-primary) 80%, transparent);
   color: #fff;
   text-decoration: none;
   transform: translateY(-2px);
}

/* ── Alerts ───────────────────────────────────────────────── */
.portal-page .alert {
   border-radius: 16px;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   position: relative;
   overflow: hidden;
}

.portal-page .alert-danger {
   background-color: rgba(220, 53, 69, 0.15);
   border: 1px solid rgba(220, 53, 69, 0.25);
}

.portal-page .alert-success {
   background-color: rgba(40, 167, 69, 0.15);
   border: 1px solid rgba(40, 167, 69, 0.25);
}

.portal-page .alert-info {
   background-color: rgba(23, 162, 184, 0.15);
   border: 1px solid rgba(23, 162, 184, 0.25);
}

.portal-page .alert-warning {
   background-color: rgba(255, 193, 7, 0.15);
   border: 1px solid rgba(255, 193, 7, 0.25);
}

.signin-footer-text a {
   color: var(--portal-brand-primary);
   font-weight: 600;
}

.signin-footer-text a:hover {
   color: var(--portal-brand-secondary);
   text-decoration: none;
}

/* ── Decorative elements ──────────────────────────────────── */
.decorative-circle {
   position: absolute;
   border-radius: 50%;
   background: linear-gradient(45deg, color-mix(in srgb, var(--portal-brand-primary) 30%, transparent), color-mix(in srgb, var(--portal-brand-secondary) 30%, transparent));
   z-index: -1;
   filter: blur(50px);
   opacity: 0.5;
}

.circle-1 { width: 250px; height: 250px; top: -100px; left: -100px; }
.circle-2 { width: 300px; height: 300px; bottom: -150px; right: -100px; background: linear-gradient(45deg, rgba(75, 100, 255, 0.3), rgba(111, 66, 247, 0.3)); }

.glass-sparkle {
   position: absolute;
   width: 3px;
   height: 3px;
   background-color: rgba(255, 255, 255, 0.8);
   border-radius: 50%;
   z-index: 2;
   pointer-events: none;
   box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.6);
}

.sparkle-1 { top: 20%; left: 10%; animation: portal-twinkle 4s infinite 0.5s; }
.sparkle-2 { top: 40%; right: 15%; animation: portal-twinkle 5s infinite 1s; }
.sparkle-3 { bottom: 30%; left: 20%; animation: portal-twinkle 6s infinite 1.5s; }
.sparkle-4 { bottom: 15%; right: 10%; animation: portal-twinkle 7s infinite 0.7s; }

@keyframes portal-twinkle {
   0%, 100% { opacity: 0; transform: scale(0.5); }
   50% { opacity: 1; transform: scale(1.2); }
}

/* ── Lists & event cards ────────────────────────────────────── */
.venue-details-list,
.event-details-list {
   background: transparent;
   border: none;
   color: #fff;
}

.venue-details-list li,
.event-details-list li {
   background: rgba(255,255,255,0.06);
   border: 1px solid rgba(255,255,255,0.1);
   color: #fff;
   margin-bottom: 8px;
   border-radius: 12px;
   backdrop-filter: blur(8px);
   transition: all 0.3s ease;
}

.venue-details-list li:hover,
.event-details-list li:hover {
   background: rgba(255,255,255,0.1);
}

.venue-details-list strong,
.event-details-list strong,
.note-by {
   color: var(--portal-brand-secondary);
}

.event-list-card {
   background: rgba(255,255,255,0.06);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: 16px;
   transition: all 0.3s ease;
   backdrop-filter: blur(8px);
   overflow: hidden;
   position: relative;
}

.event-list-card:hover {
   background: rgba(255,255,255,0.1);
   transform: translateY(-3px);
   border-color: rgba(255,255,255,0.15);
}

.event-title {
   color: var(--portal-brand-secondary);
   font-weight: 600;
   font-size: 1.1rem;
}

.event-info-card {
   background: rgba(255,255,255,0.05);
   border: 1px solid rgba(255,255,255,0.08);
   border-radius: 15px;
   padding: 18px;
   height: 100%;
   backdrop-filter: blur(8px);
   transition: all 0.3s ease;
}

.event-info-card:hover {
   background: rgba(255,255,255,0.07);
}

.event-info-card h6.card-title,
.section-title {
   color: var(--portal-brand-secondary);
   margin-bottom: 15px;
   font-weight: 600;
   border-bottom: 1px solid rgba(255,255,255,0.1);
   padding-bottom: 10px;
}

.note-card {
   background: rgba(255,255,255,0.05);
   border-radius: 12px;
   padding: 12px;
   margin-bottom: 10px;
   border: 1px solid rgba(255,255,255,0.08);
}

/* ── Tables ───────────────────────────────────────────────── */
.portal-page .table {
   --bs-table-bg: transparent;
   color: #fff;
   border-color: rgba(255, 255, 255, 0.1);
}

.portal-page .table th {
   background-color: rgba(24, 28, 36, 0.4);
   border-color: rgba(255, 255, 255, 0.1);
   color: var(--portal-brand-secondary);
   font-weight: 600;
}

.portal-page .table td {
   background-color: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.1);
}

.portal-page .table-dark {
   background-color: rgba(255,255,255,0.05);
   color: #fff;
}

/* ── Popups ───────────────────────────────────────────────── */
.custom-popup {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
}

.custom-popup .popup-content {
   max-width: 420px;
   width: 90%;
   padding: 0;
}

.custom-popup .popup-header,
.custom-popup .popup-footer {
   padding: 15px 20px;
   border-color: rgba(255, 255, 255, 0.1);
}

.custom-popup .popup-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-popup .popup-footer {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   justify-content: flex-end;
   gap: 8px;
}

.custom-popup .popup-close {
   background: none;
   border: none;
   color: #fff;
   font-size: 1.5rem;
   line-height: 1;
   cursor: pointer;
}

/* ── Portal status badges (admin venues table) ──────────────── */
.portal-status-badge {
   font-size: 0.75rem;
   font-weight: 600;
   padding: 0.25rem 0.5rem;
   border-radius: 999px;
   white-space: nowrap;
}

.portal-status-active { background: rgba(28, 163, 91, 0.2); color: #1CA35B; }
.portal-status-pending { background: rgba(246, 172, 60, 0.2); color: #F6AC3C; }
.portal-status-expired { background: rgba(255, 62, 95, 0.15); color: #FF3E5F; }
.portal-status-none { background: rgba(176, 176, 176, 0.15); color: #B0B0B0; }

/* ── Admin info card on /venue ──────────────────────────────── */
.client-portal-info-card {
   background: var(--clr-bg-7, rgba(255,255,255,0.04));
   border: 1px solid var(--clr-border-2, rgba(255,255,255,0.1));
   border-radius: 12px;
   padding: 1.25rem 1.5rem;
   margin-bottom: 1.5rem;
}

.client-portal-info-card ol {
   margin-bottom: 0;
   padding-left: 1.25rem;
}

.client-portal-info-card li {
   margin-bottom: 0.35rem;
}

.client-portal-info-card a {
   color: var(--ep-brand-primary, #F7426F);
}

/* ── Event details: playlist & popups ─────────────────────── */
.playlist-section {
   background: rgba(255,255,255,0.05);
   border-radius: 12px;
   padding: 20px;
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255,255,255,0.08);
}

.playlist-category-title {
   font-weight: 600;
   display: flex;
   align-items: center;
   margin-bottom: 12px;
}

.playlist-songs { display: grid; gap: 8px; }

.song-card {
   background: rgba(255,255,255,0.03);
   border-radius: 8px;
   padding: 12px;
   border: 1px solid rgba(255,255,255,0.06);
   transition: all 0.3s ease;
}

.song-card:hover {
   background: rgba(255,255,255,0.08);
   transform: translateY(-1px);
}

.song-title { font-weight: 600; color: #fff; margin-bottom: 4px; }
.song-artist { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.song-genre { color: rgba(255,255,255,0.5); font-size: 0.8rem; }
.playlist-empty { text-align: center; padding: 20px; color: rgba(255,255,255,0.6); font-style: italic; }

.custom-popup .popup-content {
   width: 350px;
   max-width: 90%;
   padding: 0;
}

.custom-popup .popup-title {
   color: var(--portal-brand-secondary);
   margin: 0;
   font-size: 18px;
   font-weight: 600;
}

.timeline-time { min-width: 80px; color: var(--portal-brand-secondary); font-weight: 600; }
.timeline-wrapper { max-height: 300px; overflow-y: auto; }
.timeline-item { display: flex; align-items: flex-start; }
.timeline-content { flex: 1; }