/* ---------------------------------------------------------------
   Paradise Music — modern, warm, music-school visual system
---------------------------------------------------------------- */

:root {
    /* Brand */
    --pm-primary: #6d28d9;        /* warm violet — sheet-music ink */
    --pm-primary-dark: #5b21b6;
    --pm-primary-soft: #ede9fe;
    --pm-accent: #f59e0b;         /* warm amber — stage light */
    --pm-accent-soft: #fef3c7;

    /* Neutrals */
    --pm-bg: #fbf7f4;             /* warm off-white */
    --pm-surface: #ffffff;
    --pm-text: #1f1d2b;
    --pm-text-muted: #6b6979;
    --pm-border: #ece8e3;
    --pm-border-strong: #d9d4cc;

    /* Status (each pairs with an icon, never colour alone) */
    --status-pending: #b45309;     /* amber-700 */
    --status-pending-bg: #fef3c7;
    --status-approved: #15803d;    /* green-700 */
    --status-approved-bg: #dcfce7;
    --status-rejected: #b91c1c;    /* red-700 */
    --status-rejected-bg: #fee2e2;
    --status-cancelled: #4b5563;   /* slate-600 */
    --status-cancelled-bg: #f1f5f9;
    --status-completed: #6d28d9;   /* violet-700 */
    --status-completed-bg: #ede9fe;
    --status-free: #1d4ed8;        /* blue-700 */
    --status-free-bg: #dbeafe;

    /* Shape & shadow */
    --pm-radius-sm: 8px;
    --pm-radius: 14px;
    --pm-radius-lg: 22px;
    --pm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
    --pm-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
    --pm-shadow-lg: 0 24px 48px rgba(91, 33, 182, 0.10), 0 6px 16px rgba(15, 23, 42, 0.05);

    --pm-font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--pm-bg);
    color: var(--pm-text);
    font-family: var(--pm-font);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* warm gradient wash so the page never feels flat */
    background-image:
        radial-gradient(900px 360px at 12% -120px, rgba(245, 158, 11, 0.12), transparent 60%),
        radial-gradient(800px 320px at 90% -160px, rgba(109, 40, 217, 0.10), transparent 60%);
    background-attachment: fixed;
}

main { padding-bottom: 4rem; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pm-font);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--pm-text);
}

a { color: var(--pm-primary-dark); text-decoration: none; }
a:hover { color: var(--pm-primary); text-decoration: underline; }

.text-muted { color: var(--pm-text-muted) !important; }

/* ---------- Buttons ---------- */

.btn {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.45rem 1.1rem;
    transition: transform 0.06s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-paradise {
    background: linear-gradient(180deg, var(--pm-primary) 0%, var(--pm-primary-dark) 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 16px rgba(109, 40, 217, 0.25);
}
.btn-paradise:hover { background: var(--pm-primary-dark); color: #fff; box-shadow: 0 8px 22px rgba(109, 40, 217, 0.30); }

.btn-outline-secondary { border-color: var(--pm-border-strong); color: var(--pm-text); }
.btn-outline-secondary:hover { background: var(--pm-primary-soft); border-color: var(--pm-primary); color: var(--pm-primary-dark); }

.btn-success { background: var(--status-approved); border-color: var(--status-approved); }
.btn-success:hover { background: #166534; border-color: #166534; }

.btn-outline-danger { border-color: var(--status-rejected); color: var(--status-rejected); }
.btn-outline-danger:hover { background: var(--status-rejected); color: #fff; }

.btn-link {
    color: var(--pm-primary-dark);
    text-decoration: none;
    border-radius: 999px;
}
.btn-link:hover { color: var(--pm-primary); text-decoration: underline; }

.btn-sm { padding: 0.3rem 0.85rem; font-size: 0.8rem; }
.btn-xs {
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.1;
    border-radius: 999px;
    font-weight: 600;
}
.btn-xs i.bi { font-size: 0.85rem; }
.event-actions { line-height: 1; }
.event-actions .btn-xs { box-shadow: none; }

/* ---------- Forms ---------- */

.form-control, .form-select {
    border-radius: var(--pm-radius);
    border: 1px solid var(--pm-border-strong);
    background: var(--pm-surface);
    padding: 0.55rem 0.85rem;
    font-family: var(--pm-font);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--pm-primary);
    box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.15);
}
.form-control-sm, .form-select-sm { border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.85rem; }
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--pm-text); margin-bottom: 0.3rem; }
.form-check-input:checked { background-color: var(--pm-primary); border-color: var(--pm-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.15); }

/* ---------- Cards ---------- */

.card {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: var(--pm-surface);
    box-shadow: var(--pm-shadow-sm);
    transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.card:hover { box-shadow: var(--pm-shadow); }
.card-body { padding: 1.1rem 1.25rem; }
.card-header {
    background: var(--pm-surface);
    border-bottom: 1px solid var(--pm-border);
    border-radius: var(--pm-radius) var(--pm-radius) 0 0 !important;
    padding: 0.85rem 1.25rem;
    font-weight: 600;
}

/* ---------- Navbar ---------- */

.navbar.bg-paradise {
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.85) 100%) !important;
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--pm-border);
    box-shadow: 0 1px 0 rgba(15,23,42,0.02);
    padding: 0.6rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.navbar.bg-paradise .navbar-brand,
.navbar.bg-paradise .nav-link {
    color: var(--pm-text) !important;
    font-weight: 600;
}
.navbar.bg-paradise .navbar-brand { font-weight: 800; letter-spacing: -0.02em; }
.navbar.bg-paradise .nav-link {
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    margin: 0 0.1rem;
    font-size: 0.92rem;
}
.navbar.bg-paradise .nav-link:hover {
    color: var(--pm-primary-dark) !important;
    background: var(--pm-primary-soft);
}
.navbar.bg-paradise .navbar-toggler { border: 0; }
.navbar.bg-paradise .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231f1d2b' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Avatars ---------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    font-weight: 700;
    flex: 0 0 auto;
    font-family: var(--pm-font);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
}
.avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; }
.avatar-md { width: 38px; height: 38px; font-size: 0.85rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.4rem; }

/* Initials avatar uses a pleasant palette assigned per-name */
.avatar-initials {
    color: #fff;
    background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%);
}
.avatar-initials.tone-1 { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }
.avatar-initials.tone-2 { background: linear-gradient(135deg, #34d399 0%, #047857 100%); }
.avatar-initials.tone-3 { background: linear-gradient(135deg, #f472b6 0%, #be185d 100%); }
.avatar-initials.tone-4 { background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%); }
.avatar-initials.tone-5 { background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%); }
.avatar-initials.tone-6 { background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%); }

img.avatar { object-fit: cover; }

/* ---------- Status badges ---------- */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid currentColor;
    background: var(--pm-surface);
    white-space: nowrap;
}
.status-badge .status-icon { font-size: 0.95em; line-height: 1; display: inline-flex; }
.status-badge .status-icon i.bi { line-height: 1; }
.status-badge .status-label { white-space: nowrap; }
.status-pending  { color: var(--status-pending);   background: var(--status-pending-bg); border-color: rgba(180, 83, 9, 0.25); }
.status-approved { color: var(--status-approved);  background: var(--status-approved-bg); border-color: rgba(21, 128, 61, 0.25); }
.status-rejected { color: var(--status-rejected);  background: var(--status-rejected-bg); border-color: rgba(185, 28, 28, 0.25); }
.status-cancelled{ color: var(--status-cancelled); background: var(--status-cancelled-bg); border-color: rgba(75, 85, 99, 0.25); }
.status-completed{ color: var(--status-completed); background: var(--status-completed-bg); border-color: rgba(109, 40, 217, 0.25); }
.status-free     { color: var(--status-free);      background: var(--status-free-bg); border-color: rgba(29, 78, 216, 0.25); }

/* ---------- Stat cards (dashboards) ---------- */

.pm-stat-card {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--pm-shadow-sm);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.pm-stat-card::after {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(109,40,217,0.10) 0%, transparent 70%);
    pointer-events: none;
}
.pm-stat-card .icon {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pm-primary-soft);
    color: var(--pm-primary-dark);
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}
.pm-stat-card .stat-number {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
}
.pm-stat-card .stat-label {
    font-size: 0.78rem;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.35rem;
    font-weight: 600;
}
.pm-stat-card .stat-link {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.pm-stat-card.tone-amber .icon { background: var(--pm-accent-soft); color: #b45309; }
.pm-stat-card.tone-green .icon { background: var(--status-approved-bg); color: var(--status-approved); }
.pm-stat-card.tone-blue  .icon { background: var(--status-free-bg); color: var(--status-free); }
.pm-stat-card.tone-rose  .icon { background: #fce7f3; color: #be185d; }

/* ---------- Booking card / timeline ---------- */

.pm-booking-card {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: var(--pm-surface);
    padding: 0.95rem 1.1rem;
    box-shadow: var(--pm-shadow-sm);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.pm-booking-card:hover { box-shadow: var(--pm-shadow); transform: translateY(-1px); }
.pm-booking-card .meta {
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--pm-text-muted);
}
.pm-booking-card .meta strong { color: var(--pm-text); font-weight: 600; }
.pm-booking-card .when {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pm-text);
}
.pm-booking-card .body { flex: 1 1 auto; min-width: 0; }
.pm-booking-card .actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pm-booking-card .stub {
    width: 6px; align-self: stretch;
    border-radius: 8px;
    background: var(--pm-border-strong);
    flex: 0 0 auto;
}
.pm-booking-card.status-pending   .stub { background: var(--status-pending); }
.pm-booking-card.status-approved  .stub { background: var(--status-approved); }
.pm-booking-card.status-rejected  .stub { background: var(--status-rejected); }
.pm-booking-card.status-cancelled .stub { background: var(--status-cancelled); }
.pm-booking-card.status-completed .stub { background: var(--status-completed); }

/* Timeline list */
.pm-timeline { display: flex; flex-direction: column; gap: 0.65rem; }
.pm-timeline .day-divider {
    display: flex; align-items: center; gap: 0.6rem;
    color: var(--pm-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 0.5rem;
}
.pm-timeline .day-divider::before,
.pm-timeline .day-divider::after { content: ""; flex: 1; height: 1px; background: var(--pm-border); }

/* ---------- Empty states ---------- */

.pm-empty {
    border: 1px dashed var(--pm-border-strong);
    border-radius: var(--pm-radius);
    background: rgba(255,255,255,0.6);
    padding: 1.6rem 1.2rem;
    text-align: center;
    color: var(--pm-text-muted);
}
.pm-empty .icon {
    width: 52px; height: 52px;
    margin: 0 auto 0.6rem;
    border-radius: 16px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.pm-empty h3 { color: var(--pm-text); font-size: 1rem; font-weight: 700; margin: 0 0 0.25rem; }
.pm-empty p  { margin: 0; font-size: 0.9rem; }

/* ---------- Tables ---------- */

.table {
    --bs-table-bg: var(--pm-surface);
    border-radius: var(--pm-radius);
    overflow: hidden;
}
.table > :not(caption) > * > * {
    padding: 0.85rem 0.9rem;
    border-bottom-color: var(--pm-border);
}
.table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--pm-text-muted);
    background: #f8f5f1;
    border-bottom-color: var(--pm-border);
}

/* ---------- Member directory cards ---------- */

.pm-member-card {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: var(--pm-surface);
    padding: 1.1rem;
    height: 100%;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
    box-shadow: var(--pm-shadow-sm);
}
.pm-member-card:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow); }
.pm-member-card .role-pill {
    display: inline-block;
    background: var(--pm-primary-soft);
    color: var(--pm-primary-dark);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-right: 0.25rem;
}

/* ---------- Hero ---------- */

.pm-hero {
    text-align: center;
    padding: 3.5rem 1rem 2.5rem;
    border-radius: var(--pm-radius-lg);
    background: linear-gradient(135deg, #ffffff 0%, var(--pm-primary-soft) 60%, var(--pm-accent-soft) 100%);
    box-shadow: var(--pm-shadow-lg);
    border: 1px solid var(--pm-border);
}
.pm-hero h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3.6rem);
    font-weight: 800;
    background: linear-gradient(120deg, var(--pm-primary-dark) 0%, var(--pm-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.4rem;
}
.pm-hero .lead { font-size: 1.1rem; color: var(--pm-text-muted); max-width: 540px; margin: 0 auto 1.4rem; }

/* ---------- Calendar ---------- */

.calendar-week table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; }
.calendar-week th, .calendar-week td {
    border-right: 1px solid var(--pm-border);
    border-bottom: 1px solid var(--pm-border);
    padding: 0.45rem 0.5rem;
    vertical-align: top;
    min-width: 130px;
    background: var(--pm-surface);
}
.calendar-week thead th { background: #f8f5f1; font-weight: 600; text-align: center; font-size: 0.85rem; }
.calendar-week tbody tr:first-child th { border-top: 1px solid var(--pm-border); }
.calendar-week td.hour-label {
    text-align: right;
    background: #f8f5f1;
    width: 70px;
    min-width: 70px;
    font-variant-numeric: tabular-nums;
    color: var(--pm-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}
.calendar-week td.free-slot {
    color: var(--status-free);
    font-size: 0.72rem;
    opacity: 0.7;
}

.calendar-event {
    border-radius: 10px;
    padding: 0.4rem 0.55rem;
    margin-bottom: 0.35rem;
    border: 1px solid currentColor;
    background: var(--pm-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    font-size: 0.78rem;
    line-height: 1.35;
    border-left-width: 4px;
}
.calendar-event.status-pending   { color: var(--status-pending); }
.calendar-event.status-approved  { color: var(--status-approved); }
.calendar-event.status-rejected  { color: var(--status-rejected); text-decoration: line-through; }
.calendar-event.status-cancelled { color: var(--status-cancelled); }
.calendar-event.status-completed { color: var(--status-completed); }
.calendar-event .event-line {
    color: var(--pm-text);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    line-height: 1.3;
}
.calendar-event .event-time { font-weight: 700; color: inherit; }

.calendar-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }

/* ---------- Alerts ---------- */

.alert {
    border-radius: var(--pm-radius);
    border: 1px solid transparent;
    padding: 0.75rem 1rem;
    box-shadow: var(--pm-shadow-sm);
}
.alert-info {
    background: var(--pm-primary-soft);
    color: var(--pm-primary-dark);
    border-color: rgba(109, 40, 217, 0.18);
}

/* ---------- Footer ---------- */

footer.border-top {
    border: 0 !important;
    margin-top: 3rem;
    padding-top: 1.5rem;
    text-align: center;
    color: var(--pm-text-muted);
    font-size: 0.85rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    body { font-size: 14.5px; }
    .pm-hero { padding: 2.5rem 1rem 2rem; }
    .pm-stat-card { padding: 0.85rem 0.95rem; }
    .pm-stat-card .stat-number { font-size: 1.65rem; }
    .pm-booking-card { flex-wrap: wrap; }
    .pm-booking-card .actions { width: 100%; justify-content: flex-end; }
}

/* utility helpers we still use */
.fw-bold { font-weight: 700 !important; }
.text-decoration-none { text-decoration: none !important; }