/* ============================================
   SHARED MODAL THEME TOKENS
   Maps modal variables to calendar theme tokens
   ============================================ */

:root {
  /* Backdrop */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.55);
  --modal-backdrop-blur: 6px;

  /* Surface */
  --modal-surface-bg: var(--color-surface-modal);
  --modal-border-color: var(--color-border-glass);
  --modal-shadow: var(--shadow-modal);
  --modal-radius: var(--radius-md);
  --modal-max-width: 420px;
  --modal-padding: 24px;

  /* Typography */
  --modal-text-color: var(--color-text-primary);
  --modal-title-size: 1.3rem;
  --modal-body-size: 1rem;

  /* Buttons */
  --modal-button-radius: var(--radius-button);
  --modal-button-size: 0.95rem;

  --modal-button-bg: var(--color-accent-primary);
  --modal-button-bg-hover: var(--color-accent-primary-hover);
  --modal-button-text: var(--color-text-inverse);

  /* Confirm buttons */
  --modal-danger-bg: #c62828;
  --modal-danger-bg-hover: #a61f1f;
  --modal-danger-text: #fff;

  --modal-secondary-bg: rgba(255, 255, 255, 0.15);
  --modal-secondary-bg-hover: rgba(255, 255, 255, 0.25);
  --modal-secondary-text: var(--color-text-primary);

  /* Success / Error */
  --modal-success-text: #4caf50;
  --modal-error-text: #ff6b6b;
}

/* ============================================================
   THEMED CONFIRM / CANCEL BUTTONS (Admin + Public)
   ============================================================ */

/* Button row layout */
.modal-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Base button look */
.modal-btn-confirm,
.modal-btn-cancel {
    font: inherit;
    padding: 6px 16px;
    border-radius: var(--radius-pill-full);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Cancel = subtle secondary */
.modal-btn-cancel {
    background-color: var(--modal-secondary-bg, rgba(255,255,255,0.08));
    color: var(--modal-secondary-text, #ddd);
    border-color: var(--modal-secondary-border, rgba(255,255,255,0.18));
}

.modal-btn-cancel:hover {
    background-color: var(--modal-secondary-bg-hover, rgba(255,255,255,0.16));
}

/* Confirm = EXACTLY like your action buttons */
.modal-btn-confirm {
    background-color: var(--color-accent-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-accent-primary);
}

.modal-btn-confirm:hover {
    background-color: var(--color-accent-primary-hover, var(--color-accent-primary));
    filter: brightness(0.9);
}