/* =============================================
   Algorithm.Company — Cyber Premium Admin Kit
   Phase 1: reusable styling kit (additive)
   ============================================= */

:root{
  --ap-glass-bg: rgba(255,255,255,0.06);
  --ap-glass-border: rgba(255,255,255,0.14);
  --ap-glow: 0 0 25px rgba(0, 200, 255, 0.15);
  --ap-radius: 18px;
}

/* Page shell */
.ap-page{ margin-top: 20px; }

/* Glass surfaces */
.ap-hero,.ap-card,.ap-panel{
  border-radius: var(--ap-radius);
  background: var(--ap-glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--ap-glass-border);
  box-shadow: var(--ap-glow);
}
.ap-hero{ padding: 24px; }
.ap-card,.ap-panel{ padding: 20px; }

/* Table wrappers + sticky utilities */
.ap-table-card{ padding:0; overflow:hidden; }
.ap-scroll{ overflow-x:auto; }
.ap-table-minw-900{ min-width:900px; }

.ap-sticky-head{
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(15,15,25,0.95);
}
.ap-sticky-right{
  position: sticky;
  right: 0;
  z-index: 2;
  background: rgba(15,15,25,0.95);
}

/* Inputs */
.ap-input{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  color: #fff;
}
.ap-input:focus{
  outline:none;
  border-color:#00c8ff;
  box-shadow: 0 0 0 3px rgba(0,200,255,0.2);
}

/* Buttons */
.ap-btn{
  border-radius: 999px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #00c8ff, #8a2be2);
  border:none;
  color:#fff;
  box-shadow: 0 0 18px rgba(0,200,255,0.35);
  transition: transform .15s ease, box-shadow .2s ease;
}
.ap-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(0,200,255,0.55);
}

/* Chips */
.ap-chip{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(0,200,255,0.15);
  color:#00c8ff;
  font-size:12px;
}

/* Admin Bookings dense table (reusable) */
.admin-bookings-table td,
.admin-bookings-table th {
    padding-top: .55rem;
    padding-bottom: .55rem;
    vertical-align: middle;
    font-size: .925rem;
}

.admin-bookings-table .small {
    font-size: .825rem;
}

.admin-bookings-table .col-created {
    width: 160px;
    white-space: nowrap;
}

.admin-bookings-table .col-status {
    width: 120px;
    white-space: nowrap;
}

.admin-bookings-table .col-actions {
    width: 160px;
    white-space: nowrap;
}

.admin-bookings-table .font-monospace {
    letter-spacing: .02em;
}

.admin-bookings-table .badge {
    flex-shrink: 0;
}

.admin-bookings-table .minw-0 {
    min-width: 0;
}

.admin-bookings-table tr.booking-row {
    cursor: pointer;
}

    .admin-bookings-table tr.booking-row:hover {
        background-color: rgba(0,0,0,.03);
    }

/* Small button tweak */
.copy-ref {
    line-height: 1;
}

#bookingRefText,
#utcPreviewText {
    letter-spacing: .02em;
}

/* FullCalendar premium shell */
.ap-calendar {
    padding: 10px;
}

    /* Remove FC’s “paper” look and let glass show through */
    .ap-calendar,
    .ap-calendar .fc,
    .ap-calendar .fc-scrollgrid,
    .ap-calendar .fc-theme-standard td,
    .ap-calendar .fc-theme-standard th {
        background: transparent !important;
    }

        /* Grid borders – softer */
        .ap-calendar .fc-theme-standard .fc-scrollgrid,
        .ap-calendar .fc-theme-standard td,
        .ap-calendar .fc-theme-standard th {
            border-color: rgba(255,255,255,0.12) !important;
        }

        /* Toolbar title */
        .ap-calendar .fc .fc-toolbar-title {
            font-size: 1.15rem;
            letter-spacing: .01em;
        }

        /* Buttons - keep bootstrap but soften */
        .ap-calendar .fc .fc-button {
            border-radius: 12px;
        }

        /* Selection highlight */
        .ap-calendar .fc .fc-highlight {
            opacity: .22;
        }

/* Events */
.evt-booked {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

.evt-blocked {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    font-style: italic;
}

.evt-available {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #000 !important;
}

/* optional: table in glass card */
.ad-glass.table-wrap, .ad-glass .table {
    color: inherit;
}

.ad-glass thead th {
    border-bottom-color: rgba(255,255,255,.18);
}

.ad-glass tbody td {
    border-top-color: rgba(255,255,255,.10);
}

/* =========================
   Admin Itineraries (Cyber Premium)
   ========================= */

.ap-itn-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 12px 28px;
}

.ap-itn-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 8px 0 14px;
}

.ap-itn-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .2px;
    color: rgba(245,245,245,.96);
}

.ap-itn-sub {
    color: rgba(245,245,245,.72);
    font-size: 13px;
    margin-top: 6px;
}

.ap-itn-card {
    background: rgba(14, 18, 38, .72);
    border: 1px solid rgba(120, 160, 255, .18);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    border-radius: 18px;
    overflow: hidden;
}

.ap-itn-card-hd {
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(25,230,255,.14), rgba(255,138,31,.12));
    border-bottom: 1px solid rgba(120,160,255,.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

    .ap-itn-card-hd h2, .ap-itn-card-hd h3 {
        margin: 0;
        font-size: 14px;
        letter-spacing: .2px;
        font-weight: 900;
        color: rgba(245,245,245,.96);
    }

.ap-itn-card-bd {
    padding: 14px;
}

.ap-itn-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.ap-itn-col-12 {
    grid-column: span 12;
}

.ap-itn-col-8 {
    grid-column: span 8;
}

.ap-itn-col-6 {
    grid-column: span 6;
}

.ap-itn-col-4 {
    grid-column: span 4;
}

.ap-itn-col-3 {
    grid-column: span 3;
}

@media (max-width: 980px) {
    .ap-itn-col-8, .ap-itn-col-6, .ap-itn-col-4, .ap-itn-col-3 {
        grid-column: span 12;
    }
}

.ap-itn-kv {
    padding: 12px 12px 10px;
    border-radius: 16px;
    background: rgba(10, 12, 28, .62);
    border: 1px solid rgba(120,160,255,.16);
}

.ap-itn-k {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .22px;
    font-weight: 800;
    color: rgba(245,245,245,.62);
}

.ap-itn-v {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 800;
    color: rgba(245,245,245,.94);
    overflow-wrap: anywhere;
}

.ap-itn-table {
    width: 100%;
    border-collapse: collapse;
}

    .ap-itn-table th {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .22px;
        color: rgba(245,245,245,.68);
        background: rgba(10, 12, 28, .62);
        border-bottom: 1px solid rgba(120,160,255,.18);
        padding: 10px 10px;
        text-align: left;
    }

    .ap-itn-table td {
        color: rgba(245,245,245,.88);
        border-bottom: 1px solid rgba(120,160,255,.12);
        padding: 10px 10px;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

.ap-itn-row:hover td {
    background: rgba(25,230,255,.06);
}

.ap-itn-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.ap-itn-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(10,12,28,.62);
    border: 1px solid rgba(120,160,255,.18);
    color: rgba(245,245,245,.88);
    font-size: 12px;
    font-weight: 800;
}

select, .form-select, option {
    color: rgba(245,245,245,.92);
}

select, .form-select {
    background-color: rgba(15,18,38,.75);
    border: 1px solid rgba(255,255,255,.14);
}

option {
    background-color: #0f1226; /* ensures dropdown list has dark background */
    color: rgba(245,245,245,.92);
}

select, .form-select {
    color-scheme: dark; /* helps native controls render correctly in dark UI */
}

/* ===============================
   Edit Artist — Title Bar (Cyber Premium)
   =============================== */

.ea-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin: 10px 0 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 12px 32px rgba(0,0,0,.30);
    position: relative;
    overflow: hidden;
}

    /* Glass surface + subtle tint */
    .ea-title.ea-glass {
        background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.06) );
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    /* Neon accent line */
    .ea-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, rgba(13,202,240,.95), rgba(255,0,153,.85), rgba(255,193,7,.90) );
        opacity: .95;
    }

    /* Soft glow wash */
    .ea-title::after {
        content: "";
        position: absolute;
        inset: -30px;
        background: radial-gradient(circle at 18% 30%, rgba(13,202,240,.18), transparent 55% ), radial-gradient(circle at 88% 25%, rgba(255,0,153,.14), transparent 55% );
        pointer-events: none;
    }

    /* Title text */
    .ea-title .featured-artists-header {
        position: relative;
        z-index: 1;
        font-weight: 800;
        letter-spacing: .6px;
        line-height: 1.1;
        color: rgba(255,255,255,.92);
        text-shadow: 0 2px 14px rgba(0,0,0,.35), 0 0 22px rgba(13,202,240,.16);
    }

        /* Optional “tech underline” */
        .ea-title .featured-artists-header::after {
            content: "";
            display: block;
            margin-top: 8px;
            height: 2px;
            width: 110px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(13,202,240,.90), rgba(255,193,7,.85) );
            opacity: .9;
        }

/* Badge pill */
.ea-badge {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .9px;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 999px;
    color: rgba(255,255,255,.92);
    background: linear-gradient(135deg, rgba(255,0,153,.55), rgba(255,193,7,.45) );
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 18px rgba(255,0,153,.12);
}

/* Responsive: stack nicely on small screens */
@media (max-width: 576px) {
    .ea-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .ea-badge {
        align-self: flex-end;
    }
}