/* ==========================================================================
   PRISMA SMM — Components
   Custom component system. Overrides Bootstrap's technical base so both the
   rewritten client views and the CSS-styled admin pages share one design.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Icons (SVG sprite, replaced by JS)
   ------------------------------------------------------------------------- */
.pr-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Icons in buttons / links */
.btn .pr-icon,
a.btn .pr-icon,
button .pr-icon {
  width: 16px;
  height: 16px;
}
.btn-sm .pr-icon {
  width: 14px;
  height: 14px;
}
.btn-lg .pr-icon {
  width: 18px;
  height: 18px;
}

/* Icons in dropdown / context menus */
.dropdown-menu .dropdown-item .pr-icon,
.dropdown-icon,
.pr-context-menu .dropdown-item .pr-icon {
  width: 15px;
  height: 15px;
  color: var(--prisma-secondary) !important;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn,
button.btn,
a.btn {
  --btn-bg: transparent;
  --btn-color: var(--prisma-text);
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--prisma-space-2);
  padding: 9px 18px;
  font-family: var(--prisma-font);
  font-size: var(--prisma-font-size-md);
  font-weight: var(--prisma-font-weight-medium);
  line-height: 1.2;
  color: var(--btn-color);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--prisma-radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  transition: background var(--prisma-duration-fast) ease,
              color var(--prisma-duration-fast) ease,
              border-color var(--prisma-duration-fast) ease,
              box-shadow var(--prisma-duration-fast) ease,
              transform var(--prisma-duration-fast) ease;
}
.btn:hover, button.btn:hover, a.btn:hover {
  text-decoration: none;
}
/* No global hover lift: translateY on every button made rows/toolbars jump.
 * Accent buttons may still glow (see shadows below). */
.btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; }
/* Unified confirm buttons — no jump, same feel everywhere */
.btn-pay, .pr-btn-confirm,
.actionForm .btn-primary[type="submit"],
#new_order .btn-primary, #mass_order .btn-primary,
.modal .btn-primary {
  overflow: hidden;
  transform: none;
}
.modal .btn:hover, .modal button.btn:hover, .modal a.btn:hover,
.btn-pay:hover, .pr-btn-confirm:hover,
.actionForm .btn-primary[type="submit"]:hover {
  transform: none !important;
}
.modal .btn:active,
.btn-pay:active, .pr-btn-confirm:active { transform: none !important; }

/* Primary confirm variant */
.pr-btn-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--prisma-space-2);
  border-radius: var(--prisma-radius-pill);
  font-weight: var(--prisma-font-weight-semibold);
  box-shadow: var(--prisma-glow-primary), 0 4px 16px rgba(124,58,237,0.28);
}
.pr-btn-confirm:hover { box-shadow: var(--prisma-glow-primary), 0 4px 16px rgba(124,58,237,0.32); }

/* Variants defined only in core.css used to be nuked by the generic .btn
 * reset above (later stylesheet wins at equal specificity): restore them. */
.btn-light {
  --btn-bg: #ffffff;
  --btn-color: #23282e;
  --btn-border: transparent;
}
.btn-light:hover { background: var(--prisma-surface-hover, #f1f3f7); color: #23282e; }
.btn-outline-light {
  --btn-bg: transparent;
  --btn-color: #fff;
  --btn-border: rgba(255,255,255,0.55);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Ripple (moved from landing.css — initRipple() runs app-wide) */
.btn.has-ripple { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.35);
  animation: pr-ripple 0.6s linear;
  pointer-events: none;
}
@keyframes pr-ripple { to { transform: scale(4); opacity: 0; } }

/* Drag-sort handle (category & services tables). services-table.css only
 * loads on segment 'services', but the category page uses the handle too. */
.drag-handle {
  color: var(--prisma-text-muted, #8b93a7) !important;
  font-size: 0.85rem;
  opacity: 0.45;
  cursor: grab;
  transition: opacity 0.12s ease, color 0.12s ease;
}
tr:hover .drag-handle {
  color: var(--prisma-text-secondary, #aab2c5) !important;
  opacity: 1;
}

.btn-primary {
  --btn-bg: var(--prisma-gradient-primary);
  --btn-color: #fff;
  background: var(--prisma-gradient-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.28);
}
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background: var(--prisma-gradient-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--prisma-glow-primary), 0 4px 20px rgba(124, 58, 237, 0.4);
}
/* Glow-only hover feedback (no translate: rows/toolbars must not jump) */
.btn-primary:hover,
.btn-primary:focus {
  box-shadow: var(--prisma-glow-primary), 0 4px 20px rgba(124, 58, 237, 0.4);
}
.btn-secondary {
  --btn-bg: var(--prisma-surface-elevated);
  --btn-color: var(--prisma-text);
  --btn-border: var(--prisma-border);
}
.btn-secondary:hover {
  background: var(--prisma-surface-hover);
  border-color: var(--prisma-border-hover);
}
.btn-outline-primary {
  --btn-color: var(--prisma-primary);
  --btn-border: var(--prisma-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--prisma-primary-soft);
  color: var(--prisma-primary-hover);
  box-shadow: var(--prisma-glow-primary);
}
.btn-outline-secondary {
  --btn-color: var(--prisma-text-secondary);
  --btn-border: var(--prisma-border-strong);
}
.btn-outline-secondary:hover {
  background: var(--prisma-surface-hover);
  color: var(--prisma-text);
  border-color: var(--prisma-border-hover);
}
.btn-outline-info {
  --btn-color: var(--prisma-info);
  --btn-border: var(--prisma-info);
  background: transparent;
}
.btn-outline-info:hover {
  background: var(--prisma-info-soft);
  color: var(--prisma-info);
}
.btn-outline-danger {
  --btn-color: var(--prisma-danger);
  --btn-border: var(--prisma-danger);
}
.btn-outline-danger:hover {
  background: var(--prisma-danger-soft);
  color: var(--prisma-danger);
}
.btn-success {
  --btn-bg: var(--prisma-gradient-success);
  --btn-color: #fff;
  border-color: transparent;
}
.btn-info {
  --btn-bg: var(--prisma-info-strong);
  --btn-color: #fff;
  background-color: var(--prisma-info-strong) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-info:hover {
  background-color: var(--prisma-info-strong-hover) !important;
  border-color: var(--prisma-info-strong-hover) !important;
  color: #fff !important;
}
.btn-info:focus,
.btn-info:active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle {
  background-color: var(--prisma-info-strong-hover) !important;
  border-color: var(--prisma-info-strong-hover) !important;
  color: #fff !important;
}
.btn-warning {
  --btn-bg: rgba(245, 158, 11, 0.16);
  --btn-color: var(--prisma-warning);
  border-color: transparent;
}
.btn-danger {
  --btn-bg: var(--prisma-gradient-danger);
  --btn-color: #fff;
  border-color: transparent;
}
.btn-gray, .btn-secondary-alt {
  --btn-bg: var(--prisma-surface-elevated);
  --btn-color: var(--prisma-text-secondary);
  --btn-border: var(--prisma-border);
}
.btn-gray:hover { color: var(--prisma-text); }
.btn-dark {
  --btn-bg: var(--prisma-surface-elevated);
  --btn-color: var(--prisma-text-secondary);
  --btn-border: var(--prisma-border-strong);
}
.btn-dark:hover { color: var(--prisma-text); border-color: var(--prisma-border-hover); }

.btn-sm { padding: 6px 12px; font-size: var(--prisma-font-size-sm); border-radius: var(--prisma-radius-sm); }
.btn-lg { padding: 13px 26px; font-size: var(--prisma-font-size-lg); border-radius: var(--prisma-radius-lg); }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--prisma-radius-pill); }
.btn-round { border-radius: var(--prisma-radius-pill); }
.btn-icon {
  width: 38px; height: 38px; padding: 0;
  justify-content: center;
  border-radius: var(--prisma-radius-md);
}
.btn-icon.btn-sm { width: 30px; height: 30px; }

/* Ghost / plain */
.btn-ghost {
  background: transparent;
  color: var(--prisma-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--prisma-surface-hover); color: var(--prisma-text); }

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--prisma-surface);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-xl);
  box-shadow: var(--prisma-shadow-sm), var(--prisma-shadow-inset);
  transition: border-color var(--prisma-duration-fast) ease,
              box-shadow var(--prisma-duration) ease,
              transform var(--prisma-duration) ease;
}
.card:hover {
  border-color: var(--prisma-border-hover);
}
.card-hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--prisma-shadow-md);
  border-color: var(--prisma-border-hover);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prisma-space-3);
  padding: var(--prisma-space-4) var(--prisma-space-5);
  border-bottom: 1px solid var(--prisma-border);
  background: transparent;
  border-radius: var(--prisma-radius-xl) var(--prisma-radius-xl) 0 0;
}
.card-header:first-child { border-radius: var(--prisma-radius-xl) var(--prisma-radius-xl) 0 0; }
.card-header:last-child { border-radius: 0; }
.card-title {
  margin: 0;
  font-size: var(--prisma-font-size-lg);
  font-weight: var(--prisma-font-weight-semibold);
}
.card-body { padding: var(--prisma-space-5); flex: 1 1 auto; }
.card-footer {
  padding: var(--prisma-space-4) var(--prisma-space-5);
  border-top: 1px solid var(--prisma-border);
  border-radius: 0 0 var(--prisma-radius-xl) var(--prisma-radius-xl);
}
.card-options { display: flex; align-items: center; gap: var(--prisma-space-2); color: var(--prisma-text-muted); }
.card-options a { color: var(--prisma-text-muted); }
.card-options a:hover { color: var(--prisma-text); }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--prisma-space-4); }
.form-group label,
.form-label {
  display: inline-block;
  margin-bottom: var(--prisma-space-2);
  font-size: var(--prisma-font-size-sm);
  font-weight: var(--prisma-font-weight-medium);
  color: var(--prisma-text-secondary);
}

.form-control,
select.form-control,
textarea.form-control {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--prisma-font);
  font-size: var(--prisma-font-size-md);
  font-weight: var(--prisma-font-weight-normal);
  color: var(--prisma-text);
  background-color: var(--prisma-surface-sunken);
  background-clip: padding-box;
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-md);
  transition: border-color var(--prisma-duration-fast) ease,
              box-shadow var(--prisma-duration-fast) ease,
              background-color var(--prisma-duration-fast) ease;
  height: auto;
  line-height: 1.4;
}
.form-control::placeholder { color: var(--prisma-text-muted); opacity: 0.75; }
.form-control:focus {
  background-color: var(--prisma-surface-sunken);
  border-color: var(--prisma-primary);
  box-shadow: 0 0 0 3px var(--prisma-primary-soft);
  color: var(--prisma-text);
}
.form-control:disabled, .form-control[readonly] {
  background: var(--prisma-surface);
  color: var(--prisma-text-muted);
  opacity: 1;
}
.form-control.square { border-radius: var(--prisma-radius-md); }
.form-hint, .form-text { display: block; margin-top: var(--prisma-space-2); font-size: var(--prisma-font-size-xs); color: var(--prisma-text-muted); }

.input-icon { position: relative; }
.input-icon .input-icon-addon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--prisma-text-muted);
  display: inline-flex;
  align-items: center;
  z-index: 2;
}
.input-icon .input-icon-addon i { font-size: 16px; }
.input-icon > .form-control { padding-left: 42px; }

.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .input-group-append, .input-group .input-group-prepend { display: flex; }
.input-group .btn { border-radius: var(--prisma-radius-md); }
.input-group-append .btn, .input-group-prepend .btn { border-radius: 0 var(--prisma-radius-md) var(--prisma-radius-md) 0; }
.input-group-prepend .btn { border-radius: var(--prisma-radius-md) 0 0 var(--prisma-radius-md); }

/* Native select with custom chevron */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366708E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 38px;
  cursor: pointer;
}

/* Checkbox / radio (custom) */
.custom-control { position: relative; display: inline-flex; align-items: center; padding-left: 0; min-height: 22px; cursor: pointer; }
.custom-control-input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.custom-control-label {
  position: relative;
  padding-left: 30px;
  font-size: var(--prisma-font-size-sm);
  color: var(--prisma-text-secondary);
  cursor: pointer;
  margin-bottom: 0;
}
.custom-control-label::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  background: var(--prisma-surface-sunken);
  border: 1px solid var(--prisma-border-strong);
  border-radius: 6px;
  transition: all var(--prisma-duration-fast) ease;
}
.custom-checkbox .custom-control-label::after {
  content: "";
  position: absolute;
  left: 6px; top: calc(50% - 6px);
  width: 7px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--prisma-duration-fast) ease;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--prisma-gradient-primary);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4);
}
.custom-control-input:checked ~ .custom-control-label::after { transform: rotate(45deg) scale(1); }
.custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--prisma-primary-soft); }

.custom-controls-stacked { display: flex; align-items: center; }

/* Switch */
.custom-switch { display: inline-flex; align-items: center; gap: var(--prisma-space-2); cursor: pointer; }
.custom-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.custom-switch-indicator {
  position: relative;
  width: 40px; height: 22px;
  background: var(--prisma-surface-elevated);
  border: 1px solid var(--prisma-border-strong);
  border-radius: var(--prisma-radius-pill);
  transition: background var(--prisma-duration-fast) ease;
  display: inline-block;
}
.custom-switch-indicator::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--prisma-text-secondary);
  border-radius: 50%;
  transition: transform var(--prisma-duration-fast) ease, background var(--prisma-duration-fast) ease;
}
.custom-switch-input:checked ~ .custom-switch-indicator {
  background: var(--prisma-gradient-primary);
  border-color: transparent;
}
.custom-switch-input:checked ~ .custom-switch-indicator::after {
  transform: translateX(18px);
  background: #fff;
}
.custom-switch-description { font-size: var(--prisma-font-size-sm); color: var(--prisma-text-secondary); }

/* -------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--prisma-font-size-xs);
  font-weight: var(--prisma-font-weight-medium);
  line-height: 1;
  border-radius: var(--prisma-radius-pill);
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.badge-primary { background: var(--prisma-primary-soft); color: var(--prisma-primary); }
.badge-secondary { background: var(--prisma-surface-elevated); color: var(--prisma-text-secondary); border: 1px solid var(--prisma-border); }
.badge-info { background: var(--prisma-info-soft); color: var(--prisma-info); }
.badge-success { background: var(--prisma-success-soft); color: var(--prisma-success); }
.badge-warning { background: var(--prisma-warning-soft); color: var(--prisma-warning); }
.badge-danger { background: var(--prisma-danger-soft); color: var(--prisma-danger); }
.badge-light { background: var(--prisma-surface-elevated); color: var(--prisma-text); }

/* Alerts */
.alert {
  display: flex;
  align-items: center;
  gap: var(--prisma-space-3);
  padding: var(--prisma-space-3) var(--prisma-space-4);
  border: 1px solid transparent;
  border-radius: var(--prisma-radius-lg);
  font-size: var(--prisma-font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--prisma-space-4);
}
.alert.alert-icon { padding-left: var(--prisma-space-4); }
.alert-danger { background: var(--prisma-danger-soft); border-color: var(--prisma-danger-soft); color: var(--prisma-danger); }
.alert-success { background: var(--prisma-success-soft); border-color: var(--prisma-success-soft); color: var(--prisma-success); }
.alert-warning { background: var(--prisma-warning-soft); border-color: var(--prisma-warning-soft); color: var(--prisma-warning); }
.alert-info { background: var(--prisma-info-soft); border-color: var(--prisma-info-soft); color: var(--prisma-info); }

/* Status badges for orders */
.pr-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--prisma-radius-pill);
  font-size: var(--prisma-font-size-xs);
  font-weight: var(--prisma-font-weight-medium);
  white-space: nowrap;
}
.pr-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pr-status-completed { background: var(--prisma-success-soft); color: var(--prisma-success); }
.pr-status-processing, .pr-status-pending { background: var(--prisma-warning-soft); color: var(--prisma-warning); }
.pr-status-inprogress { background: var(--prisma-info-soft); color: var(--prisma-info); }
.pr-status-canceled, .pr-status-refunded, .pr-status-error { background: var(--prisma-danger-soft); color: var(--prisma-danger); }
.pr-status-partial { background: var(--prisma-secondary-soft); color: var(--prisma-secondary); }
.pr-status-active { background: var(--prisma-info-soft); color: var(--prisma-info); }
.pr-status-paused { background: var(--prisma-warning-soft); color: var(--prisma-warning); }
.pr-status-expired { background: var(--prisma-secondary-soft); color: var(--prisma-secondary); }
.pr-status-closed, .pr-status-muted { background: var(--prisma-surface-elevated); color: var(--prisma-text-muted); border: 1px solid var(--prisma-border); }
.pr-status-closed::before, .pr-status-muted::before { background: var(--prisma-text-muted); }

/* -------------------------------------------------------------------------
   Alerts
   ------------------------------------------------------------------------- */
.alert {
  position: relative;
  padding: var(--prisma-space-4) var(--prisma-space-4);
  border-radius: var(--prisma-radius-lg);
  border: 1px solid transparent;
  font-size: var(--prisma-font-size-sm);
  line-height: 1.5;
}
.alert-success { background: var(--prisma-success-soft); color: var(--prisma-success); }
.alert-danger { background: var(--prisma-danger-soft); color: var(--prisma-danger); }
.alert-warning { background: var(--prisma-warning-soft); color: var(--prisma-warning); }
.alert-info { background: var(--prisma-info-soft); color: var(--prisma-info); }
.alert-icon { display: flex; align-items: center; gap: var(--prisma-space-3); }
.alert-icon i { font-size: 18px; flex: 0 0 auto; }

/* -------------------------------------------------------------------------
   Modal
   ------------------------------------------------------------------------- */
.modal { z-index: var(--prisma-z-modal); }
.modal-backdrop {
  z-index: calc(var(--prisma-z-modal) - 1);
  background: rgba(3, 6, 16, 0.72);
  backdrop-filter: blur(4px);
}
.modal-content {
  background: var(--prisma-surface);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-xl);
  box-shadow: var(--prisma-shadow-lg);
  color: var(--prisma-text);
  /* no extra animation here: bootstrap .modal.fade already transitions the
   * dialog — stacking both made the open feel sluggish */
  overflow: hidden;
}
.modal-dialog { margin: 1.75rem auto; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--prisma-space-5);
  border-bottom: 1px solid var(--prisma-border);
}
.modal-title { margin: 0; font-size: var(--prisma-font-size-lg); font-weight: var(--prisma-font-weight-semibold); }
.modal-body { padding: var(--prisma-space-5); }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--prisma-space-2);
  padding: var(--prisma-space-4) var(--prisma-space-5);
  border-top: 1px solid var(--prisma-border);
}
/* core.css adds legacy margins between footer buttons — the flex gap above
 * already handles spacing, so neutralize the double gap */
.modal-footer > * { margin: 0; }
.modal .close {
  border: none;
  background: transparent;
  color: var(--prisma-text-muted);
  font-size: 22px;
  line-height: 1;
  padding: 0;
  width: 32px; height: 32px;
  border-radius: var(--prisma-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal .close:hover { background: var(--prisma-surface-hover); color: var(--prisma-text); }

/* -------------------------------------------------------------------------
   Dropdown
   ------------------------------------------------------------------------- */
.dropdown-menu {
  background: var(--prisma-surface-elevated);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-lg);
  box-shadow: var(--prisma-shadow-lg);
  padding: 6px;
  min-width: 200px;
  z-index: var(--prisma-z-overlay);
  animation: pr-scale-in var(--prisma-duration-fast) var(--prisma-ease) both;
}
.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--prisma-space-3);
  padding: 9px 12px;
  font-size: var(--prisma-font-size-md);
  color: var(--prisma-text-secondary);
  border-radius: var(--prisma-radius-md);
  transition: background var(--prisma-duration-fast) ease, color var(--prisma-duration-fast) ease;
}
.dropdown-menu .dropdown-item:hover {
  background: var(--prisma-surface-hover);
  color: var(--prisma-text);
}
.dropdown-menu .dropdown-item.active { background: var(--prisma-primary-soft); color: var(--prisma-primary); }
.dropdown-divider { border-top: 1px solid var(--prisma-border); margin: 6px 0; }
.dropdown-icon { color: var(--prisma-text-muted); width: 16px; text-align: center; }
.dropdown-menu .text-danger, .dropdown-menu .text-danger i { color: var(--prisma-danger); }
.dropdown-menu-arrow::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px; height: 10px;
  background: var(--prisma-surface-elevated);
  border-left: 1px solid var(--prisma-border);
  border-top: 1px solid var(--prisma-border);
  transform: rotate(45deg);
}

/* Floating row context menu (rendered on body, always above tables) */
.pr-context-menu {
  position: fixed;
  z-index: 250;
  min-width: 210px;
  padding: 6px;
  background: var(--prisma-surface-elevated);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-lg);
  box-shadow: var(--prisma-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
}
.pr-context-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  animation: pr-scale-in var(--prisma-duration-fast) var(--prisma-ease) both;
}
.pr-context-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--prisma-space-3);
  padding: 10px 14px;
  border-radius: var(--prisma-radius-md);
  font-size: var(--prisma-font-size-md);
  color: var(--prisma-text);
  white-space: nowrap;
  transition: background var(--prisma-duration-fast) ease, color var(--prisma-duration-fast) ease;
}
.pr-context-menu .dropdown-item:hover {
  background: var(--prisma-surface-hover);
  color: var(--prisma-text);
  text-decoration: none;
}
.pr-context-menu .dropdown-item .pr-icon,
.pr-context-menu .dropdown-icon {
  width: 15px;
  height: 15px;
  color: var(--prisma-secondary) !important;
}
.pr-context-menu .dropdown-divider { margin: 4px 0; }

/* -------------------------------------------------------------------------
   Tabs
   ------------------------------------------------------------------------- */
.nav-tabs {
  display: flex;
  gap: var(--prisma-space-2);
  border-bottom: 1px solid var(--prisma-border);
  padding: 0 var(--prisma-space-3);
}
.nav-tabs .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--prisma-space-2);
  padding: 12px 16px;
  color: var(--prisma-text-muted);
  font-size: var(--prisma-font-size-md);
  font-weight: var(--prisma-font-weight-medium);
  border: none;
  background: transparent;
  border-radius: var(--prisma-radius-md) var(--prisma-radius-md) 0 0;
  transition: color var(--prisma-duration-fast) ease;
}
.nav-tabs .nav-link:hover { color: var(--prisma-text); }
.nav-tabs .nav-link.active {
  color: var(--prisma-primary);
  background: transparent;
}
.nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--prisma-gradient-primary);
}
.tab-content > .tab-pane { padding: var(--prisma-space-5) 0 0; }

/* -------------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  font-size: var(--prisma-font-size-sm);
  color: var(--prisma-text-secondary);
  background: var(--prisma-surface);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-md);
  transition: all var(--prisma-duration-fast) ease;
}
.pagination .page-item .page-link:hover {
  background: var(--prisma-surface-hover);
  color: var(--prisma-text);
  border-color: var(--prisma-border-hover);
}
.pagination .page-item.active .page-link {
  background: var(--prisma-gradient-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}
.pagination .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; }
.pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link { border-radius: var(--prisma-radius-md); }

/* -------------------------------------------------------------------------
   Tables (custom PRISMA table)
   ------------------------------------------------------------------------- */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
  width: 100%;
  margin: 0;
  color: var(--prisma-text);
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--prisma-font-size-sm);
}
.table thead th {
  padding: 12px 14px;
  font-size: var(--prisma-font-size-xs);
  font-weight: var(--prisma-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--prisma-text-muted);
  background: var(--prisma-bg-secondary);
  border: none;
  border-bottom: 1px solid var(--prisma-border);
  white-space: nowrap;
}
.table tbody td {
  padding: 13px 14px;
  border: none;
  border-bottom: 1px solid var(--prisma-border);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--prisma-duration-fast) ease; }
.table tbody tr:hover { background: var(--prisma-surface-hover); }
.table tbody tr:last-child td { border-bottom: none; }
.table.table-hover tbody tr:hover { background: var(--prisma-surface-hover); }
.table-bordered { border: 1px solid var(--prisma-border); border-radius: var(--prisma-radius-lg); overflow: hidden; }
.table-vcenter td { vertical-align: middle; }
.table .chk-col { width: 42px; text-align: center; }
.table td.text-center, .table th.text-center { text-align: center; }

/* -------------------------------------------------------------------------
   Progress
   ------------------------------------------------------------------------- */
.progress {
  height: 8px;
  background: var(--prisma-surface-elevated);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-pill);
  overflow: hidden;
}
.progress .progress-bar {
  background: var(--prisma-gradient-primary);
  border-radius: var(--prisma-radius-pill);
  transition: width 0.6s var(--prisma-ease);
}
.progress-bar-success { background: var(--prisma-gradient-success) !important; }
.progress-bar-warning { background: linear-gradient(135deg, #F59E0B, #F97316) !important; }
.progress-bar-danger { background: var(--prisma-gradient-danger) !important; }
.progress-bar-info { background: linear-gradient(135deg, #22D3EE, #3B82F6) !important; }

/* -------------------------------------------------------------------------
   Toast (jquery-toast restyle)
   ------------------------------------------------------------------------- */
.jq-toast-wrap { z-index: var(--prisma-z-toast); }
.jq-toast-single {
  font-family: var(--prisma-font) !important;
  font-size: var(--prisma-font-size-sm) !important;
  border-radius: var(--prisma-radius-lg) !important;
  padding: 16px 20px 16px 16px !important;
  background: var(--prisma-surface-elevated) !important;
  color: var(--prisma-text) !important;
  border: 1px solid var(--prisma-border) !important;
  box-shadow: var(--prisma-shadow-lg) !important;
  animation: pr-slide-in-right 0.3s var(--prisma-ease);
}
.jq-toast-single .jq-toast-heading { font-weight: var(--prisma-font-weight-semibold) !important; }

/* -------------------------------------------------------------------------
   PRISMA Stat Card
   ------------------------------------------------------------------------- */
.pr-stat {
  position: relative;
  overflow: hidden;
  padding: var(--prisma-space-5);
}
.pr-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(320px 160px at 110% -20%, var(--prisma-primary-soft), transparent 70%);
}
.pr-stat .pr-stat-icon {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--prisma-radius-md);
  font-size: 16px;
  margin-bottom: var(--prisma-space-3);
}
.pr-stat .pr-stat-label { font-size: var(--prisma-font-size-xs); font-weight: var(--prisma-font-weight-medium); color: var(--prisma-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pr-stat .pr-stat-value { font-size: 28px; font-weight: var(--prisma-font-weight-bold); letter-spacing: -0.02em; line-height: 1.15; color: var(--prisma-text); }
.pr-stat .pr-stat-value .pr-stat-currency { font-size: 16px; font-weight: var(--prisma-font-weight-semibold); color: var(--prisma-text-secondary); margin-right: 2px; }
.pr-stat .pr-stat-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--prisma-font-size-xs); font-weight: var(--prisma-font-weight-medium); margin-top: var(--prisma-space-2); }
.pr-stat .pr-stat-spark { position: absolute; right: 0; bottom: 0; opacity: 0.9; }
.pr-stat-accent-purple .pr-stat-icon { background: var(--prisma-primary-soft); color: var(--prisma-primary); }
.pr-stat-accent-blue .pr-stat-icon { background: var(--prisma-secondary-soft); color: var(--prisma-secondary); }
.pr-stat-accent-green .pr-stat-icon { background: var(--prisma-success-soft); color: var(--prisma-success); }
.pr-stat-accent-amber .pr-stat-icon { background: var(--prisma-warning-soft); color: var(--prisma-warning); }
.pr-stat-accent-rose .pr-stat-icon { background: var(--prisma-danger-soft); color: var(--prisma-danger); }
.pr-stat-accent-cyan .pr-stat-icon { background: var(--prisma-info-soft); color: var(--prisma-info); }

/* -------------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------------- */
.pr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--prisma-space-12) var(--prisma-space-6);
}
.pr-empty .pr-empty-icon {
  width: 72px; height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--prisma-radius-2xl);
  background: var(--prisma-primary-soft);
  color: var(--prisma-primary);
  font-size: 36px;
  margin-bottom: var(--prisma-space-5);
}
.pr-empty .pr-empty-title { font-size: var(--prisma-font-size-xl); font-weight: var(--prisma-font-weight-semibold); margin-bottom: var(--prisma-space-2); }
.pr-empty .pr-empty-desc { color: var(--prisma-text-muted); max-width: 380px; margin-bottom: var(--prisma-space-5); }

/* -------------------------------------------------------------------------
   Skeleton
   ------------------------------------------------------------------------- */
.pr-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--prisma-surface-elevated);
  border-radius: var(--prisma-radius-md);
}
.pr-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--prisma-surface-hover), transparent);
  animation: pr-shimmer 1.4s infinite;
}
.pr-skeleton-line { height: 12px; border-radius: 6px; }
.pr-skeleton-circle { border-radius: 50%; }
@keyframes pr-shimmer { 100% { transform: translateX(100%); } }

/* -------------------------------------------------------------------------
   Prisma Select (custom dropdown component)
   ------------------------------------------------------------------------- */
.pr-select {
  position: relative;
  width: 100%;
}
.pr-select .pr-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prisma-space-3);
  padding: 10px 14px;
  background: var(--prisma-surface-sunken);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-md);
  cursor: pointer;
  transition: all var(--prisma-duration-fast) ease;
  min-height: 44px;
}
.pr-select .pr-select-trigger:hover { border-color: var(--prisma-border-hover); }
.pr-select.is-open .pr-select-trigger {
  border-color: var(--prisma-primary);
  box-shadow: 0 0 0 3px var(--prisma-primary-soft);
}
.pr-select .pr-select-value { color: var(--prisma-text); font-size: var(--prisma-font-size-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-select .pr-select-value.is-placeholder { color: var(--prisma-text-muted); }
.pr-select .pr-select-chevron { color: var(--prisma-text-muted); transition: transform var(--prisma-duration-fast) ease; flex: 0 0 auto; }
.pr-select.is-open .pr-select-chevron { transform: rotate(180deg); }
.pr-select .pr-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--prisma-surface-elevated);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-lg);
  box-shadow: var(--prisma-shadow-lg);
  z-index: var(--prisma-z-sticky);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--prisma-duration-fast) var(--prisma-ease);
}
.pr-select.is-open .pr-select-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pr-select .pr-select-search {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--prisma-surface-sunken);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-sm);
  color: var(--prisma-text);
  font-size: var(--prisma-font-size-sm);
}
.pr-select .pr-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prisma-space-3);
  padding: 9px 12px;
  border-radius: var(--prisma-radius-md);
  cursor: pointer;
  font-size: var(--prisma-font-size-sm);
  color: var(--prisma-text-secondary);
  transition: background var(--prisma-duration-fast) ease, color var(--prisma-duration-fast) ease;
}
.pr-select .pr-select-option:hover { background: var(--prisma-surface-hover); color: var(--prisma-text); }
.pr-select .pr-select-option.is-active { background: var(--prisma-primary-soft); color: var(--prisma-primary); }
.pr-select .pr-select-option .pr-select-option-meta { font-size: var(--prisma-font-size-xs); color: var(--prisma-text-muted); white-space: nowrap; }
.pr-select .pr-select-empty { padding: 12px; text-align: center; color: var(--prisma-text-muted); font-size: var(--prisma-font-size-sm); }

/* -------------------------------------------------------------------------
   Notification bell dropdown
   ------------------------------------------------------------------------- */
.pr-navbar { position: sticky; top: 0; z-index: var(--prisma-z-navbar); }

/* -------------------------------------------------------------------------
   c3 chart restyle
   ------------------------------------------------------------------------- */
.c3-tooltip {
  background: var(--prisma-surface-elevated) !important;
  border: 1px solid var(--prisma-border) !important;
  border-radius: var(--prisma-radius-md) !important;
  box-shadow: var(--prisma-shadow-md) !important;
  color: var(--prisma-text) !important;
  padding: 8px 12px !important;
}
.c3-tooltip td { background: transparent !important; color: var(--prisma-text) !important; }
.c3-grid line { stroke: var(--prisma-border); }
.c3-axis path, .c3-axis line { stroke: var(--prisma-border); }
.c3 text { fill: var(--prisma-text-muted); font-family: var(--prisma-font); font-size: 11px; }
.c3-legend-item text { fill: var(--prisma-text-secondary); }

/* -------------------------------------------------------------------------
   Selectize override
   ------------------------------------------------------------------------- */
.selectize-control .selectize-input {
  background: var(--prisma-surface-sunken) !important;
  border: 1px solid var(--prisma-border) !important;
  border-radius: var(--prisma-radius-md) !important;
  box-shadow: none !important;
  color: var(--prisma-text) !important;
  padding: 8px 12px !important;
  font-family: var(--prisma-font) !important;
}
.selectize-dropdown {
  background: var(--prisma-surface-elevated) !important;
  border: 1px solid var(--prisma-border) !important;
  border-radius: var(--prisma-radius-lg) !important;
  box-shadow: var(--prisma-shadow-lg) !important;
  color: var(--prisma-text) !important;
}
.selectize-dropdown .option { color: var(--prisma-text-secondary) !important; }
.selectize-dropdown .option.active { background: var(--prisma-primary-soft) !important; color: var(--prisma-primary) !important; }

/* -------------------------------------------------------------------------
   Bootstrap datepicker override
   ------------------------------------------------------------------------- */
.datepicker {
  background: var(--prisma-surface-elevated) !important;
  border: 1px solid var(--prisma-border) !important;
  border-radius: var(--prisma-radius-lg) !important;
  box-shadow: var(--prisma-shadow-lg) !important;
}
.datepicker table tr td, .datepicker table tr th { color: var(--prisma-text-secondary); }
.datepicker table tr td.day:hover, .datepicker table tr td.focused { background: var(--prisma-surface-hover) !important; }
.datepicker table tr td.active, .datepicker table tr td.active:hover {
  background: var(--prisma-gradient-primary) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------
   Misc legacy overrides so admin pages inherit the system
   ------------------------------------------------------------------------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--prisma-space-4);
  margin-bottom: var(--prisma-space-6);
}
.page-title { margin: 0; font-size: var(--prisma-font-size-2xl); font-weight: var(--prisma-font-weight-bold); letter-spacing: -0.02em; }
.page-options { display: flex; align-items: center; gap: var(--prisma-space-3); flex-wrap: wrap; }

.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--prisma-radius-lg);
  font-size: 17px;
  color: #fff;
}
.stamp-md { width: 46px; height: 46px; font-size: 20px; }
.bg-primary, .bg-primary-gradient { background: var(--prisma-gradient-primary) !important; }
.bg-success-gradient { background: var(--prisma-gradient-success) !important; }
.bg-info-gradient { background: linear-gradient(135deg, #22D3EE, #3B82F6) !important; }
.bg-warning-gradient { background: var(--prisma-gradient-warning) !important; }
.bg-danger-gradient { background: var(--prisma-gradient-danger) !important; }
.bg-inverse-gradient { background: linear-gradient(135deg, #6366F1, #8B5CF6) !important; }

.text-primary { color: var(--prisma-primary) !important; }
.text-info { color: var(--prisma-info) !important; }
.text-success { color: var(--prisma-success) !important; }
.text-warning { color: var(--prisma-warning) !important; }
.text-danger { color: var(--prisma-danger) !important; }
.text-red { color: var(--prisma-danger) !important; }
.text-default { color: var(--prisma-text) !important; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--prisma-primary-soft);
  color: var(--prisma-primary);
  font-weight: var(--prisma-font-weight-semibold);
  flex: 0 0 auto;
}
.avatar-md { width: 44px; height: 44px; font-size: 15px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }

.text-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--prisma-primary-soft);
  color: var(--prisma-primary);
  font-weight: var(--prisma-font-weight-semibold);
  text-transform: uppercase;
}

.item-action { display: inline-flex; align-items: center; }
.item-action .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--prisma-radius-sm);
  color: var(--prisma-text-muted);
  transition: all var(--prisma-duration-fast) ease;
}
.item-action .icon:hover { background: var(--prisma-surface-hover); color: var(--prisma-text); }

.tooltip-inner {
  background: var(--prisma-surface-elevated) !important;
  color: var(--prisma-text) !important;
  border: 1px solid var(--prisma-border) !important;
  border-radius: var(--prisma-radius-md) !important;
  box-shadow: var(--prisma-shadow-md) !important;
  font-size: var(--prisma-font-size-xs) !important;
}
.bs-tooltip-top .arrow::before { border-top-color: var(--prisma-surface-elevated) !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--prisma-surface-elevated) !important; }

.nav-link { color: var(--prisma-text-secondary); }
.nav-link:hover { color: var(--prisma-text); }

.btn-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Status filter tabs (orders) */
.pr-status-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--prisma-space-2);
  padding: 4px;
  background: var(--prisma-surface-sunken);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-pill);
}
.pr-status-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--prisma-space-2);
  padding: 6px 14px;
  border-radius: var(--prisma-radius-pill);
  color: var(--prisma-text-secondary);
  font-size: var(--prisma-font-size-sm);
  font-weight: var(--prisma-font-weight-medium);
  text-decoration: none;
  transition: all var(--prisma-duration-fast) ease;
  white-space: nowrap;
}
.pr-status-tabs a:hover { color: var(--prisma-text); background: var(--prisma-surface-hover); }
.pr-status-tabs a.active, .pr-status-tabs a.btn-info, .pr-status-tabs a:focus {
  background: var(--prisma-gradient-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

/* Order refill / cancel buttons */
.order-req-wrap { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.order-req-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: var(--prisma-font-size-xs);
  font-weight: var(--prisma-font-weight-medium);
  line-height: 1;
  border-radius: var(--prisma-radius-pill);
  text-decoration: none;
  transition: all var(--prisma-duration-fast) ease;
  border: 1px solid var(--prisma-border);
}
.order-req-refill { color: var(--prisma-info); background: var(--prisma-info-soft); border-color: transparent; }
.order-req-refill:hover { box-shadow: var(--prisma-glow-primary); color: var(--prisma-info); text-decoration: none; }
.order-req-cancel { color: var(--prisma-danger); background: var(--prisma-danger-soft); border-color: transparent; }
.order-req-cancel:hover { color: var(--prisma-danger); text-decoration: none; box-shadow: 0 0 0 3px var(--prisma-danger-soft); }

/* Copy link button */
.copy-link-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 3px 7px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  border-radius: var(--prisma-radius-sm) !important;
  color: var(--prisma-text-muted) !important;
  border-color: var(--prisma-border) !important;
  background: transparent !important;
  transition: all var(--prisma-duration-fast) ease !important;
}
.copy-link-btn:hover {
  color: var(--prisma-primary) !important;
  border-color: var(--prisma-primary) !important;
  background: var(--prisma-primary-soft) !important;
}

/* Table cell titles */
.title h6 { margin: 0; font-size: var(--prisma-font-size-sm); font-weight: var(--prisma-font-weight-semibold); line-height: 1.4; }
.title small, .table .title small { color: var(--prisma-text-muted); }

/* Modal header variants */
.bg-pantone {
  background: var(--prisma-gradient-primary) !important;
  color: #fff;
}
.bg-pantone .close, .modal-header .close { color: #fff; opacity: 0.85; }
.btn-default {
  --btn-bg: var(--prisma-surface-elevated);
  --btn-color: var(--prisma-text);
  --btn-border: var(--prisma-border);
}
.btn-default:hover { background: var(--prisma-surface-hover); border-color: var(--prisma-border-hover); }
.btn-min-width { min-width: 110px; }

/* Content block */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page-main { flex: 1; }

.pr-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1000px 500px at 85% -10%, var(--prisma-primary-soft), transparent 60%),
    radial-gradient(800px 400px at -10% 10%, var(--prisma-secondary-soft), transparent 60%),
    var(--prisma-bg);
  background-attachment: fixed;
}

/* Data list (tickets etc.) */
.pr-list { display: flex; flex-direction: column; gap: 10px; }
.pr-list-item {
  display: flex;
  align-items: center;
  gap: var(--prisma-space-4);
  padding: var(--prisma-space-4);
  background: var(--prisma-surface);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-lg);
  transition: all var(--prisma-duration-fast) ease;
}
.pr-list-item:hover { border-color: var(--prisma-border-hover); background: var(--prisma-surface-hover); }

/* Links truncate */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------------------
   Order wizard — candy step
   ------------------------------------------------------------------------- */
.pr-order-wizard {
  display: flex;
  align-items: center;
  gap: var(--prisma-space-2);
  padding: 8px;
  background: var(--prisma-surface-sunken);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-pill);
  margin-bottom: var(--prisma-space-5);
}
.pr-order-wizard .pr-wizard-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--prisma-radius-pill);
  font-size: var(--prisma-font-size-sm);
  font-weight: var(--prisma-font-weight-medium);
  color: var(--prisma-text-muted);
  transition: all var(--prisma-duration) var(--prisma-ease);
  white-space: nowrap;
}
.pr-order-wizard .pr-wizard-step.is-active {
  background: var(--prisma-gradient-primary);
  color: #fff;
  box-shadow: var(--prisma-glow-primary);
}
.pr-order-wizard .pr-wizard-step.is-done { color: var(--prisma-success); background: var(--prisma-success-soft); }
.pr-order-wizard .pr-wizard-num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.18); color: inherit;
  flex: 0 0 auto;
}
.pr-order-wizard .pr-wizard-step.is-active .pr-wizard-num { background: rgba(255,255,255,0.24); }

.pr-order-resume-sticky {
  position: sticky;
  top: calc(var(--prisma-navbar-height) + 16px);
  z-index: var(--prisma-z-sticky);
}
.pr-order-resume-sticky .pr-card-glass {
  background: color-mix(in srgb, var(--prisma-surface) 72%, transparent);
  backdrop-filter: var(--prisma-blur-md);
  -webkit-backdrop-filter: var(--prisma-blur-md);
  border: 1px solid var(--prisma-glass-border);
  box-shadow: var(--prisma-shadow-glass);
}
.pr-price-pulse { animation: pr-pulse 0.45s var(--prisma-ease-spring); }
@keyframes pr-pulse { 0%{transform:scale(1);} 45%{transform:scale(1.04);} 100%{transform:scale(1);} }
.pr-amount-stepper {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--prisma-border); border-radius: var(--prisma-radius-md);
  overflow: hidden; background: var(--prisma-surface-sunken);
}
.pr-amount-stepper button {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--prisma-surface-elevated); border: none; color: var(--prisma-text-secondary);
  cursor: pointer; transition: all var(--prisma-duration-fast) ease;
}
.pr-amount-stepper button:hover { background: var(--prisma-surface-hover); color: var(--prisma-text); }
.pr-amount-stepper input {
  flex: 1; border: none; background: transparent; text-align: center;
  font-weight: var(--prisma-font-weight-semibold); color: var(--prisma-text);
}
.pr-charge-gradient {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--prisma-gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}