/*
============================================================
CALYPSO PRESENTER SHARED VISUAL STANDARD

Used by:
  presenter.html
  song-requests.html

This file contains the exact CSS previously duplicated
inline in both pages.
============================================================
*/
.backend-standard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 390px;
      gap: 18px;
      align-items: start;
    }

    .backend-standard-card,
    .booking-card {
      background: #fff;
      border: 1px solid var(--line, #e5e7eb);
      border-radius: 22px;
      padding: 20px;
      box-shadow: 0 10px 24px rgba(17,24,39,.06);
      margin-bottom: 18px;
    }

    .backend-standard-card h2,
    .backend-standard-card h3,
    .booking-card h2,
    .booking-card h3 {
      margin-top: 0;
      font-family: Arial, Helvetica, sans-serif;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .meta,
    .muted {
      color: var(--muted, #555);
      font-weight: 700;
      font-size: 13px;
      line-height: 1.45;
    }

    .counter-wrap {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .counter {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 7px 11px;
      background: #f3f4f6;
      color: #111;
      font-size: 12px;
      font-weight: 900;
    }

    .search-wrap,
    .email-wrap {
      margin-top: 12px;
    }

    .search-wrap input,
    .email-wrap input {
      width: 100%;
      min-height: 42px;
      padding: 12px 13px;
      border: 1px solid var(--line, #e5e7eb);
      border-radius: 12px;
      font: inherit;
      background: #fff;
    }

    .song-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
      max-height: 62vh;
      overflow-y: auto;
      padding-right: 4px;
    }

    .song-item,
    .selected-song {
      border: 1px solid var(--line, #e5e7eb);
      border-radius: 16px;
      padding: 14px;
      background: #fff;
      color: #111827;
      box-shadow: 0 6px 16px rgba(17,24,39,.04);
    }

    .song-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .song-item.selected {
      background: #fff7f7;
      border-color: rgba(255,49,49,.38);
    }

    .song-title,
    .selected-song strong {
      display: block;
      font-size: 15px;
      margin-bottom: 4px;
      font-weight: 900;
      color: #111827;
    }

    .song-artist,
    .selected-song span {
      color: var(--muted, #555);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 700;
    }

    .song-actions button,
    .backend-standard-actions button {
      appearance: none;
      border: 0;
      border-radius: 999px;
      padding: 10px 15px;
      min-height: 38px;
      background: var(--red, #ff3131);
      color: #fff !important;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height: 1;
      font-weight: 900;
      cursor: pointer;
      text-decoration: none !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 18px rgba(255,49,49,.18);
      text-transform: uppercase;
      letter-spacing: .03em;
    }

    .song-actions button.remove {
      background: #111;
      box-shadow: 0 8px 18px rgba(17,17,17,.12);
    }

    .song-actions button:disabled,
    .backend-standard-actions button:disabled {
      opacity: .55;
      cursor: not-allowed;
    }

    .selected-songs {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .empty-state {
      padding: 18px;
      border: 1px dashed var(--line, #e5e7eb);
      border-radius: 16px;
      background: #fff;
      color: var(--muted, #555);
      font-weight: 700;
      line-height: 1.45;
    }

    .message-box {
      margin-top: 12px;
      padding: 12px;
      border-radius: 14px;
      font-weight: 800;
    }

    .message-box.hidden {
      display: none;
    }

    .message-box.success {
      background: #d9f8d9;
      color: #062b06;
      border: 1px solid #73c873;
    }

    .message-box.error {
      background: #fff3a3;
      color: #211b00;
      border: 1px solid #e1c800;
    }

    .backend-standard-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .no-results {
      padding: 18px;
      border: 1px dashed var(--line, #e5e7eb);
      border-radius: 16px;
      color: var(--muted, #555);
      font-weight: 700;
      background: #fff;
    }

    .hidden {
      display: none !important;
    }

    @media (max-width: 1000px) {
      .backend-standard-grid {
        grid-template-columns: 1fr;
      }

      .panel-header {
        flex-direction: column;
        align-items: stretch;
      }

      .counter-wrap {
        justify-content: flex-start;
      }
    }