/* ==========================================================================
   DJ Event Planner — UI primitives

   Tokens live in tokens.css. This file is the only place new UI chrome
   should be added. Pages consume these classes; they do not invent siblings.

   Prefix: .ep-*
   ========================================================================== */

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

.ep-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--ep-space-2);
   min-height: var(--ep-control-height-md);
   padding: 0 var(--ep-space-4);
   border: 1px solid transparent;
   border-radius: var(--ep-radius-md);
   font-family: var(--ep-font-family);
   font-size: var(--ep-font-size-sm);
   font-weight: var(--ep-fw-semi);
   line-height: 1.2;
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
   transition:
      background-color var(--ep-duration-fast) var(--ep-ease),
      border-color var(--ep-duration-fast) var(--ep-ease),
      color var(--ep-duration-fast) var(--ep-ease),
      opacity var(--ep-duration-fast) var(--ep-ease);
}

.ep-btn:focus-visible {
   outline: none;
   box-shadow: var(--ep-focus-ring);
}

.ep-btn:disabled,
.ep-btn.is-disabled {
   opacity: var(--ep-disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
}

.ep-btn--sm {
   min-height: var(--ep-control-height-sm);
   padding: 0 var(--ep-space-3);
   font-size: var(--ep-font-size-xs);
}

.ep-btn--lg {
   min-height: var(--ep-control-height-lg);
   padding: 0 var(--ep-space-6);
   font-size: var(--ep-font-size-md);
}

.ep-btn--icon {
   width: var(--ep-control-height-md);
   min-width: var(--ep-control-height-md);
   padding: 0;
}

.ep-btn--icon.ep-btn--sm {
   width: var(--ep-control-height-sm);
   min-width: var(--ep-control-height-sm);
}

.ep-btn--primary,
.btn-ep-primary {
   background: var(--ep-brand-gradient);
   border: none;
   color: #ffffff;
}

.ep-btn--primary:hover,
.btn-ep-primary:hover {
   opacity: 0.92;
   color: #ffffff;
}

.ep-btn--brand {
   background: var(--ep-brand-gradient);
   border: none;
   color: #ffffff;
}

.ep-btn--brand:hover {
   opacity: 0.92;
   color: #ffffff;
}

/* Legacy CRM / Expovent CTAs → same primary language */
.crm-btn-primary,
.unfield__input-btn,
.fill__btn,
.btn.btn-primary:not(.dropdown-toggle):not(.nav-link) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--ep-space-2);
   min-height: var(--ep-control-height-md);
   padding: 0 var(--ep-space-4);
   border: 1px solid transparent;
   border-radius: var(--ep-radius-md);
   background: var(--ep-brand-gradient);
   color: #ffffff !important;
   font-family: var(--ep-font-family);
   font-size: var(--ep-font-size-sm);
   font-weight: var(--ep-fw-semi);
   line-height: 1.2;
   text-decoration: none;
   cursor: pointer;
   transition: opacity var(--ep-duration-fast) var(--ep-ease);
}

.crm-btn-primary:hover,
.unfield__input-btn:hover,
.fill__btn:hover,
.btn.btn-primary:not(.dropdown-toggle):not(.nav-link):hover {
   opacity: 0.92;
   color: #ffffff !important;
}

.crm-btn-secondary,
.btn.btn-outline-primary:not(.nav-link) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--ep-space-2);
   min-height: var(--ep-control-height-md);
   padding: 0 var(--ep-space-4);
   border-radius: var(--ep-radius-md);
   font-size: var(--ep-font-size-sm);
   font-weight: var(--ep-fw-medium);
}

.crm-btn-secondary {
   background: var(--ep-bg-elevated);
   border: 1px solid var(--ep-border-color);
   color: var(--ep-text-primary);
}

.btn.btn-outline-primary:not(.nav-link) {
   background: transparent;
   border: 1px solid var(--ep-brand-primary);
   color: var(--ep-brand-primary);
}

.btn.btn-outline-primary:not(.nav-link):hover {
   background: var(--ep-brand-primary);
   color: #ffffff;
}

.ep-btn--secondary,
.btn-ep-secondary {
   background: var(--ep-bg-elevated);
   border-color: var(--ep-border-color);
   color: var(--ep-text-primary);
}

.ep-btn--secondary:hover,
.btn-ep-secondary:hover {
   background: var(--ep-bg-hover);
   color: var(--ep-text-primary);
}

.ep-btn--outline,
.btn-ep-outline {
   background: transparent;
   border-color: var(--ep-brand-primary);
   color: var(--ep-brand-primary);
}

.ep-btn--outline:hover,
.btn-ep-outline:hover {
   background: var(--ep-brand-primary);
   color: #ffffff;
}

.ep-btn--ghost {
   background: transparent;
   color: var(--ep-text-secondary);
}

.ep-btn--ghost:hover {
   background: var(--ep-bg-hover);
   color: var(--ep-text-primary);
}

.ep-btn--destructive {
   background: var(--ep-color-danger);
   color: #ffffff;
}

.ep-btn--destructive:hover {
   opacity: 0.92;
   color: #ffffff;
}

.ep-btn.is-loading {
   position: relative;
   color: transparent !important;
   pointer-events: none;
}

.ep-btn.is-loading::after {
   content: "";
   position: absolute;
   width: 1em;
   height: 1em;
   border: 2px solid currentColor;
   border-right-color: transparent;
   border-radius: var(--ep-radius-full);
   animation: ep-spin 0.6s linear infinite;
   color: inherit;
}

.ep-btn--primary.is-loading::after,
.ep-btn--destructive.is-loading::after {
   border-color: rgba(255, 255, 255, 0.35);
   border-right-color: #ffffff;
}

@keyframes ep-spin {
   to { transform: rotate(360deg); }
}

.ep-link {
   color: var(--ep-text-link);
   font-weight: var(--ep-fw-medium);
   text-decoration: none;
}

.ep-link:hover {
   color: var(--ep-brand-primary);
   text-decoration: underline;
}

/* ---------- Fields ---------- */

.ep-field {
   display: flex;
   flex-direction: column;
   gap: var(--ep-space-1);
   min-width: 0;
}

.ep-field__label {
   font-size: var(--ep-font-size-sm);
   font-weight: var(--ep-fw-medium);
   color: var(--ep-text-secondary);
}

.ep-field__required {
   color: var(--ep-color-danger);
   margin-inline-start: 2px;
}

.ep-field__hint,
.ep-field__error {
   font-size: var(--ep-font-size-xs);
   line-height: 1.4;
}

.ep-field__hint {
   color: var(--ep-text-muted);
}

.ep-field__error {
   color: var(--ep-color-danger);
}

.ep-input,
.ep-select,
.ep-textarea {
   width: 100%;
   min-height: var(--ep-control-height-md);
   padding: 0 var(--ep-space-3);
   background: var(--ep-bg-input);
   border: 1px solid var(--ep-border-color);
   border-radius: var(--ep-radius-md);
   color: var(--ep-text-primary);
   font-family: var(--ep-font-family);
   font-size: var(--ep-font-size-sm);
   transition: border-color var(--ep-duration-fast) var(--ep-ease), box-shadow var(--ep-duration-fast) var(--ep-ease);
}

.ep-textarea {
   min-height: 96px;
   padding: var(--ep-space-3);
   resize: vertical;
}

.ep-input::placeholder,
.ep-textarea::placeholder {
   color: var(--ep-text-muted);
}

.ep-input:hover,
.ep-select:hover,
.ep-textarea:hover {
   border-color: var(--ep-text-muted);
}

.ep-input:focus,
.ep-select:focus,
.ep-textarea:focus,
.form-control:focus,
.form-select:focus {
   outline: none;
   border-color: var(--ep-border-focus);
   box-shadow: var(--ep-focus-ring);
   background-color: var(--ep-bg-input);
   color: var(--ep-text-primary);
}

.ep-input:disabled,
.ep-select:disabled,
.ep-textarea:disabled,
.ep-input[readonly] {
   opacity: var(--ep-disabled-opacity);
   cursor: not-allowed;
}

.ep-field.is-invalid .ep-input,
.ep-field.is-invalid .ep-select,
.ep-field.is-invalid .ep-textarea,
.ep-input.is-invalid,
.form-control.is-invalid {
   border-color: var(--ep-color-danger);
}

.ep-input-group {
   display: flex;
   align-items: stretch;
}

.ep-input-group .ep-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

.ep-input-group__addon {
   display: inline-flex;
   align-items: center;
   padding: 0 var(--ep-space-3);
   background: var(--ep-bg-elevated);
   border: 1px solid var(--ep-border-color);
   border-left: 0;
   border-radius: 0 var(--ep-radius-md) var(--ep-radius-md) 0;
   color: var(--ep-text-secondary);
   font-size: var(--ep-font-size-sm);
}

.ep-search {
   position: relative;
}

.ep-search .ep-input {
   padding-inline-start: var(--ep-space-8);
}

.ep-search__icon {
   position: absolute;
   left: var(--ep-space-3);
   top: 50%;
   transform: translateY(-50%);
   color: var(--ep-text-muted);
   pointer-events: none;
}

/* ---------- Choice controls ---------- */

.ep-check,
.ep-radio {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ep-space-2);
   font-size: var(--ep-font-size-sm);
   color: var(--ep-text-primary);
   cursor: pointer;
}

.ep-check input,
.ep-radio input {
   margin-top: 3px;
   accent-color: var(--ep-brand-primary);
}

.ep-toggle {
   display: inline-flex;
   align-items: center;
   gap: var(--ep-space-2);
   cursor: pointer;
}

.ep-toggle .form-check-input,
.form-check.form-switch .form-check-input {
   width: 2.25rem;
   height: 1.2rem;
   cursor: pointer;
   background-color: var(--ep-bg-elevated);
   border-color: var(--ep-border-color);
}

.ep-toggle .form-check-input:checked,
.form-check.form-switch .form-check-input:checked {
   background-color: var(--ep-brand-primary);
   border-color: var(--ep-brand-primary);
}

.ep-toggle .form-check-input:focus {
   box-shadow: var(--ep-focus-ring);
}

.ep-toggle__label {
   font-size: var(--ep-font-size-sm);
   color: var(--ep-text-primary);
}

/* ---------- Tabs ---------- */

.ep-tabs {
   display: flex;
   gap: var(--ep-space-1);
   border-bottom: 1px solid var(--ep-border-color);
   overflow-x: auto;
}

.ep-tabs__tab {
   appearance: none;
   background: none;
   border: 0;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   padding: var(--ep-space-3) var(--ep-space-4);
   color: var(--ep-text-secondary);
   font-size: var(--ep-font-size-sm);
   font-weight: var(--ep-fw-medium);
   white-space: nowrap;
   cursor: pointer;
}

.ep-tabs__tab:hover {
   color: var(--ep-text-primary);
}

.ep-tabs__tab.is-active,
.ep-tabs__tab[aria-selected="true"] {
   color: var(--ep-text-heading);
   border-bottom-color: var(--ep-brand-primary);
}

.ep-tabs__tab:focus-visible {
   outline: none;
   box-shadow: var(--ep-focus-ring);
}

/* Keep Bootstrap nav-tabs on event-details looking like the same system */
.nav-tabs .nav-link {
   color: var(--ep-text-secondary);
}

.nav-tabs .nav-link.active {
   color: var(--ep-text-heading);
   background: var(--ep-bg-card);
   border-color: var(--ep-border-color) var(--ep-border-color) var(--ep-bg-card);
}

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

.ep-card,
.body__card-wrapper {
   background: var(--ep-bg-card);
   border: 1px solid var(--ep-border-light);
   border-radius: var(--ep-radius-lg);
   box-shadow: var(--ep-shadow-card);
}

.ep-card {
   padding: var(--ep-space-6);
}

.ep-card--flush {
   padding: 0;
}

.ep-card--flush .ep-table-wrap {
   border: 0;
   border-radius: 0;
}

.ep-card__title {
   margin: 0 0 var(--ep-space-4);
   font-size: var(--ep-font-size-lg);
   font-weight: var(--ep-fw-semi);
   color: var(--ep-text-heading);
}

.ep-panel {
   background: var(--ep-bg-elevated);
   border: 1px solid var(--ep-border-light);
   border-radius: var(--ep-radius-md);
   padding: var(--ep-space-4);
}

/* ---------- Badges / status ---------- */

.ep-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 22px;
   padding: 0 var(--ep-space-2);
   border-radius: var(--ep-radius-full);
   font-size: var(--ep-font-size-2xs);
   font-weight: var(--ep-fw-semi);
   letter-spacing: 0.02em;
   text-transform: uppercase;
   line-height: 1;
}

.ep-badge--neutral { background: var(--ep-bg-elevated); color: var(--ep-text-secondary); }
.ep-badge--success,
.badge-ep-success { background: var(--ep-color-success); color: #ffffff; }
.ep-badge--warning,
.badge-ep-warning { background: var(--ep-color-warning); color: #111111; }
.ep-badge--danger,
.badge-ep-danger  { background: var(--ep-color-danger); color: #ffffff; }
.ep-badge--info,
.badge-ep-info    { background: var(--ep-color-info); color: #ffffff; }

.ep-status {
   display: inline-flex;
   align-items: center;
   gap: var(--ep-space-2);
   font-size: var(--ep-font-size-sm);
   color: var(--ep-text-secondary);
}

.ep-status__dot {
   width: 8px;
   height: 8px;
   border-radius: var(--ep-radius-full);
   background: var(--ep-text-muted);
}

.ep-status--success .ep-status__dot { background: var(--ep-color-success); }
.ep-status--warning .ep-status__dot { background: var(--ep-color-warning); }
.ep-status--danger .ep-status__dot { background: var(--ep-color-danger); }
.ep-status--info .ep-status__dot { background: var(--ep-color-info); }

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

.ep-alert {
   display: flex;
   gap: var(--ep-space-3);
   padding: var(--ep-space-4);
   border-radius: var(--ep-radius-md);
   border: 1px solid var(--ep-border-color);
   background: var(--ep-bg-elevated);
   color: var(--ep-text-primary);
}

.ep-alert--success { border-color: var(--ep-color-success); }
.ep-alert--warning { border-color: var(--ep-color-warning); }
.ep-alert--danger  { border-color: var(--ep-color-danger); }
.ep-alert--info    { border-color: var(--ep-color-info); }

.ep-toast-region {
   position: fixed;
   right: var(--ep-space-4);
   bottom: var(--ep-space-4);
   z-index: var(--ep-z-toast);
   display: flex;
   flex-direction: column;
   gap: var(--ep-space-2);
   max-width: min(380px, calc(100vw - 32px));
}

.ep-toast {
   display: flex;
   gap: var(--ep-space-3);
   padding: var(--ep-space-3) var(--ep-space-4);
   background: var(--ep-bg-elevated);
   border: 1px solid var(--ep-border-color);
   border-radius: var(--ep-radius-md);
   box-shadow: var(--ep-shadow-lg);
   color: var(--ep-text-primary);
}

.ep-toast--success { border-left: 3px solid var(--ep-color-success); }
.ep-toast--warning { border-left: 3px solid var(--ep-color-warning); }
.ep-toast--error,
.ep-toast--danger  { border-left: 3px solid var(--ep-color-danger); }
.ep-toast--info    { border-left: 3px solid var(--ep-color-info); }

.ep-toast__title {
   font-weight: var(--ep-fw-semi);
   font-size: var(--ep-font-size-sm);
}

.ep-toast__message {
   font-size: var(--ep-font-size-sm);
   color: var(--ep-text-secondary);
}

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

.ep-table-wrap {
   width: 100%;
   overflow-x: auto;
   border: 1px solid var(--ep-border-light);
   border-radius: var(--ep-radius-md);
}

.ep-table,
.ep-table-wrap .table {
   width: 100%;
   margin: 0;
   color: var(--ep-text-primary);
   border-collapse: collapse;
}

.ep-table th,
.ep-table td {
   padding: var(--ep-space-3) var(--ep-space-4);
   text-align: left;
   border-bottom: 1px solid var(--ep-border-light);
   vertical-align: middle;
}

.ep-table thead th {
   background: var(--ep-table-header-bg);
   color: var(--ep-text-secondary);
   font-size: var(--ep-font-size-xs);
   font-weight: var(--ep-fw-semi);
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

.ep-table tbody tr:hover {
   background: var(--ep-table-row-hover);
}

.ep-table tbody tr.is-selected {
   background: var(--ep-bg-selected);
}

/* ---------- Page header / empty / loading ---------- */

.ep-page-header {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--ep-space-4);
   margin-bottom: var(--ep-space-6);
}

.ep-page-header__title {
   margin: 0;
   font-size: var(--ep-font-size-2xl);
   font-weight: var(--ep-fw-semi);
   color: var(--ep-text-heading);
}

.ep-page-header__subtitle {
   margin: var(--ep-space-1) 0 0;
   color: var(--ep-text-secondary);
   font-size: var(--ep-font-size-sm);
}

.ep-page-header__actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--ep-space-2);
}

.ep-empty {
   text-align: center;
   padding: var(--ep-space-12) var(--ep-space-6);
   color: var(--ep-text-secondary);
}

.ep-empty__icon {
   font-size: 28px;
   color: var(--ep-text-muted);
   margin-bottom: var(--ep-space-3);
}

.ep-empty__title {
   margin: 0 0 var(--ep-space-2);
   color: var(--ep-text-heading);
   font-size: var(--ep-font-size-lg);
}

.ep-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--ep-space-2);
   padding: var(--ep-space-8);
   color: var(--ep-text-secondary);
}

.ep-spinner {
   width: 1.1em;
   height: 1.1em;
   border: 2px solid var(--ep-border-color);
   border-top-color: var(--ep-brand-primary);
   border-radius: var(--ep-radius-full);
   animation: ep-spin 0.6s linear infinite;
}

.ep-skeleton {
   display: grid;
   gap: var(--ep-space-3);
}

.ep-skeleton__line {
   height: 12px;
   border-radius: var(--ep-radius-sm);
   background: var(--ep-bg-elevated);
   animation: ep-pulse 1.2s ease-in-out infinite;
}

@keyframes ep-pulse {
   50% { opacity: 0.5; }
}

.ep-progress {
   height: 8px;
   background: var(--ep-bg-elevated);
   border-radius: var(--ep-radius-full);
   overflow: hidden;
}

.ep-progress__bar {
   height: 100%;
   background: var(--ep-brand-gradient);
   border-radius: var(--ep-radius-full);
}

/* ---------- Event workspace overview ---------- */

.ep-event-overview {
   display: grid;
   gap: var(--ep-space-5);
}

.ep-event-overview__score-meta {
   display: flex;
   align-items: center;
   gap: var(--ep-space-3);
   margin-top: var(--ep-space-2);
}

.ep-event-overview__score-value {
   font-size: var(--ep-font-size-2xl);
   font-weight: var(--ep-fw-semi);
   color: var(--ep-text-heading);
}

.ep-event-overview__metrics {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--ep-space-3);
}

@media (min-width: 768px) {
   .ep-event-overview__metrics {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}

.ep-event-overview__metric {
   background: var(--ep-bg-elevated);
   border: 1px solid var(--ep-border-light);
   border-radius: var(--ep-radius-md);
   padding: var(--ep-space-3);
}

.ep-event-overview__metric-label {
   font-size: var(--ep-font-size-xs);
   color: var(--ep-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: var(--ep-space-2);
}

.ep-event-overview__metric-value {
   margin-top: var(--ep-space-2);
   font-size: var(--ep-font-size-sm);
   font-weight: var(--ep-fw-medium);
   color: var(--ep-text-primary);
}

.ep-event-overview__heading {
   margin: 0 0 var(--ep-space-3);
   font-size: var(--ep-font-size-md);
   font-weight: var(--ep-fw-semi);
   color: var(--ep-text-heading);
}

.ep-checklist {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: var(--ep-space-2);
}

.ep-checklist__item {
   display: flex;
   align-items: center;
   gap: var(--ep-space-2);
   padding: var(--ep-space-2) var(--ep-space-3);
   background: var(--ep-bg-elevated);
   border: 1px solid var(--ep-border-light);
   border-radius: var(--ep-radius-md);
}

.ep-checklist__mark {
   width: 10px;
   height: 10px;
   border-radius: var(--ep-radius-full);
   background: var(--ep-color-warning);
   flex-shrink: 0;
}

.ep-checklist__item.is-done .ep-checklist__mark {
   background: var(--ep-color-success);
}

.ep-ops-board {
   display: grid;
   gap: var(--ep-space-4);
}

.ep-ops-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.ep-ops-list__item {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--ep-space-2);
   padding: var(--ep-space-3) 0;
   border-bottom: 1px solid var(--ep-border-light);
}

.ep-ops-list__item:last-child {
   border-bottom: 0;
}

/* ---------- Modal / drawer polish ---------- */

.modal-content {
   background-color: var(--ep-modal-bg);
   color: var(--ep-text-primary);
   border: 1px solid var(--ep-border-color);
   border-radius: var(--ep-radius-lg);
}

.modal-header,
.modal-footer {
   border-color: var(--ep-border-light);
}

[bd-theme="bd-theme-dark"] .modal-header .btn-close {
   filter: invert(1) grayscale(100%) brightness(200%);
}

.ep-drawer {
   position: fixed;
   top: 0;
   right: 0;
   width: min(420px, 100vw);
   height: 100vh;
   background: var(--ep-modal-bg);
   border-left: 1px solid var(--ep-border-color);
   box-shadow: var(--ep-shadow-lg);
   z-index: var(--ep-z-modal);
   transform: translateX(100%);
   transition: transform var(--ep-duration-normal) var(--ep-ease);
}

.ep-drawer.is-open {
   transform: translateX(0);
}

.ep-accordion__item {
   border-bottom: 1px solid var(--ep-border-light);
}

.ep-accordion__trigger {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--ep-space-4) 0;
   background: none;
   border: 0;
   color: var(--ep-text-heading);
   font-weight: var(--ep-fw-medium);
   text-align: left;
   cursor: pointer;
}

.ep-pagination {
   display: flex;
   gap: var(--ep-space-1);
}

.ep-pagination a,
.ep-pagination span {
   min-width: var(--ep-control-height-sm);
   height: var(--ep-control-height-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--ep-radius-sm);
   color: var(--ep-text-secondary);
   text-decoration: none;
   font-size: var(--ep-font-size-sm);
}

.ep-pagination .is-active {
   background: var(--ep-bg-selected);
   color: var(--ep-text-heading);
}

/* ---------- Touch / a11y ---------- */

@media (max-width: 767px) {
   .ep-btn,
   .ep-input,
   .ep-select {
      min-height: 44px;
   }

   .ep-page-header {
      flex-direction: column;
   }

   .ep-page-header__actions {
      width: 100%;
   }
}

@media (prefers-reduced-motion: reduce) {
   .ep-btn,
   .ep-input,
   .ep-drawer,
   .ep-skeleton__line,
   .ep-spinner,
   .ep-btn.is-loading::after {
      animation: none !important;
      transition: none !important;
   }
}