/* =============================================================
   ELITE_DIGSPACE — Shared UI Kit (1.6.0)
   Fancy popups, toasts, uniform buttons, filter pills, chips.
   Palette: blue #0000eb · black #0b1020 · light blue #e8ecff
            gray #6b7280 · light gray #ebebeb
   Loaded on EVERY portal page (client + admin).
   ============================================================= */

:root {
  --ds-blue:        #0000eb;
  --ds-blue-dark:   #0000b8;
  --ds-blue-soft:   #e8ecff;
  --ds-blue-soft-2: #f4f6ff;
  --ds-blue-line:   #c9d2ff;
  --ds-black:       #0b1020;
  --ds-ink:         #1c2333;
  --ds-gray:        #6b7280;
  --ds-gray-soft:   #ebebeb;
  --ds-line:        #e2e6f0;
  --ds-danger:      #d92b1f;
  --ds-danger-soft: #fdeceb;
  --ds-success:     #0f7a4d;
  --ds-success-soft:#e6f6ee;
  --ds-warn:        #96631a;
  --ds-warn-soft:   #fdf3e0;
  --ds-radius:      10px;
  --ds-radius-lg:   16px;
  --ds-shadow:      0 6px 24px rgba(11, 16, 32, .10);
  --ds-shadow-lg:   0 24px 60px rgba(11, 16, 32, .28);
  --ds-ease:        .18s cubic-bezier(.4, 0, .2, 1);
}

/* =============================================================
   1. UNIFORM BUTTON SYSTEM
   Every button/pill in the portal resolves to this scale so
   padding, height, radius and font are identical everywhere.
   ============================================================= */

.quick-btn,
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  padding: .55rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--ds-radius);
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ds-ease), border-color var(--ds-ease),
              color var(--ds-ease), box-shadow var(--ds-ease), transform var(--ds-ease);
}

.quick-btn:hover,
.ds-btn:hover { text-decoration: none; transform: translateY(-1px); }
.quick-btn:active,
.ds-btn:active { transform: translateY(0); }
.quick-btn:focus-visible,
.ds-btn:focus-visible { outline: 3px solid rgba(0, 0, 235, .28); outline-offset: 2px; }
.quick-btn:disabled,
.ds-btn:disabled,
.quick-btn.is-loading,
.ds-btn.is-loading { opacity: .6; cursor: not-allowed; transform: none; }

/* -- Primary (blue) -- */
.quick-btn-blue, .quick-btn-primary, .ds-btn-primary,
.quick-btn-purple, .quick-btn-teal {
  background: var(--ds-blue);
  border-color: var(--ds-blue);
  color: #fff;
}
.quick-btn-blue:hover, .quick-btn-primary:hover, .ds-btn-primary:hover,
.quick-btn-purple:hover, .quick-btn-teal:hover {
  background: var(--ds-blue-dark);
  border-color: var(--ds-blue-dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 235, .26);
}

/* -- Light blue (secondary emphasis) -- */
.quick-btn-lightblue, .ds-btn-soft, .quick-btn-orange {
  background: var(--ds-blue-soft);
  border-color: var(--ds-blue-line);
  color: var(--ds-blue);
}
.quick-btn-lightblue:hover, .ds-btn-soft:hover, .quick-btn-orange:hover {
  background: #dbe2ff;
  border-color: #adbaff;
  color: var(--ds-blue-dark);
}

/* -- Black -- */
.quick-btn-black, .quick-btn-dark, .ds-btn-black {
  background: var(--ds-black);
  border-color: var(--ds-black);
  color: #fff;
}
.quick-btn-black:hover, .quick-btn-dark:hover, .ds-btn-black:hover {
  background: #1c2436; border-color: #1c2436; color: #fff;
}

/* -- Gray (neutral / cancel) -- */
.quick-btn-gray, .ds-btn-gray {
  background: #fff;
  border-color: var(--ds-line);
  color: var(--ds-ink);
}
.quick-btn-gray:hover, .ds-btn-gray:hover {
  background: var(--ds-gray-soft); border-color: #cfd5e2; color: var(--ds-black);
}

/* -- Danger (kept minimal, used for destructive only) -- */
.quick-btn-red, .ds-btn-danger {
  background: #fff;
  border-color: #f2c4c0;
  color: var(--ds-danger);
}
.quick-btn-red:hover, .ds-btn-danger:hover {
  background: var(--ds-danger); border-color: var(--ds-danger); color: #fff;
}

/* -- Sizes -- */
.btn-xs, .ds-btn-xs { min-height: 30px; padding: .32rem .7rem; font-size: .71rem; gap: .3rem; }
.btn-sm-custom, .ds-btn-sm { min-height: 34px; padding: .42rem .85rem; font-size: .75rem; }
.ds-btn-lg { min-height: 46px; padding: .75rem 1.5rem; font-size: .88rem; }
.ds-btn-block, .quick-btn.w-100 { width: 100%; }

/* -- Button groups: consistent gaps everywhere -- */
.ds-btn-row, .member-inline-actions, .deactivated-actions {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.ds-btn-row form, .member-inline-actions form, .deactivated-actions form { margin: 0; display: inline-flex; }

/* -- Text link button -- */
.btn-link-custom {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 0; border: 0; background: none;
  color: var(--ds-blue); font-family: 'Roboto', sans-serif;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: color var(--ds-ease);
}
.btn-link-custom:hover { color: var(--ds-blue-dark); text-decoration: underline; }

/* =============================================================
   2. FILTER PILLS
   ============================================================= */

.ds-filter-bar, .member-filter-bar {
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding: .4rem; margin-bottom: 1rem;
  background: var(--ds-blue-soft-2);
  border: 1px solid var(--ds-line);
  border-radius: 12px;
}
.ds-filter-bar a, .ds-filter-bar button,
.member-filter-bar a, .member-filter-bar button {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 34px; padding: .4rem .9rem;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ds-gray);
  font-family: 'Montserrat', sans-serif; font-size: .76rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: var(--ds-ease);
}
.ds-filter-bar a:hover, .member-filter-bar a:hover {
  background: #fff; border-color: var(--ds-line); color: var(--ds-ink);
}
.ds-filter-bar a.active, .member-filter-bar a.active,
.ds-filter-bar a.active:hover, .member-filter-bar a.active:hover {
  background: var(--ds-blue); border-color: var(--ds-blue); color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 235, .25);
}
.ds-filter-bar .ds-filter-count, .member-filter-bar .ds-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: rgba(11, 16, 32, .08);
  font-size: .66rem; font-weight: 800;
}
.ds-filter-bar a.active .ds-filter-count,
.member-filter-bar a.active .ds-filter-count { background: rgba(255, 255, 255, .25); color: #fff; }

/* =============================================================
   3. STATUS CHIPS — complete set (fixes missing states)
   ============================================================= */

.status-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap;
}
.status-approved, .status-done, .status-completed, .status-signed, .status-active,
.status-paid, .status-resolved { background: var(--ds-success-soft); color: var(--ds-success); }
.status-pending, .status-waiting, .status-waiting_client, .status-open, .status-draft,
.status-sent, .status-in_progress { background: var(--ds-warn-soft); color: var(--ds-warn); }
.status-docs_needed, .status-review, .status-partial_signed {
  background: var(--ds-blue-soft); color: var(--ds-blue); }
.status-rejected, .status-danger, .status-failed, .status-cancelled, .status-expired,
.status-overdue { background: var(--ds-danger-soft); color: var(--ds-danger); }
.status-inactive, .status-closed, .status-archived, .status-none {
  background: var(--ds-gray-soft); color: var(--ds-gray); }

/* =============================================================
   4. FANCY MODAL / POPUP SYSTEM
   Replaces every native alert(), confirm() and prompt().
   ============================================================= */

.ds-pop-backdrop {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(8, 12, 26, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--ds-ease);
}
.ds-pop-backdrop.ds-pop-open { opacity: 1; }

.ds-pop-card {
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  overflow: hidden;
  transform: translateY(18px) scale(.97);
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.1);
}
.ds-pop-backdrop.ds-pop-open .ds-pop-card { transform: translateY(0) scale(1); }
.ds-pop-card.ds-pop-wide { max-width: 640px; }

.ds-pop-head {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.15rem 1.35rem;
  background: var(--ds-blue); color: #fff;
}
.ds-pop-head .ds-pop-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .18);
  font-size: 1rem;
}
.ds-pop-head h4 {
  margin: 0; font-family: 'Montserrat', sans-serif;
  font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.3;
}
.ds-pop-head .ds-pop-sub {
  margin: .15rem 0 0; font-size: .74rem; font-weight: 500;
  color: rgba(255, 255, 255, .82);
}
.ds-pop-close {
  margin-left: auto; width: 30px; height: 30px; flex: 0 0 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: .95rem;
  transition: var(--ds-ease);
}
.ds-pop-close:hover { background: rgba(255, 255, 255, .3); }

/* Head variants */
.ds-pop-danger  .ds-pop-head { background: var(--ds-danger); }
.ds-pop-success .ds-pop-head { background: var(--ds-success); }
.ds-pop-dark    .ds-pop-head { background: var(--ds-black); }

.ds-pop-body {
  padding: 1.35rem;
  overflow-y: auto;
  font-family: 'Roboto', sans-serif;
  font-size: .88rem; line-height: 1.6; color: var(--ds-ink);
}
.ds-pop-body p { margin: 0 0 .7rem; }
.ds-pop-body p:last-child { margin-bottom: 0; }
.ds-pop-hint { color: var(--ds-gray); font-size: .8rem; margin: 0 0 .85rem; }

.ds-pop-body .form-label, .ds-pop-label {
  display: block; margin-bottom: .35rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ds-gray);
}
.ds-pop-body input.form-control,
.ds-pop-body textarea.form-control,
.ds-pop-body select.form-control {
  width: 100%; padding: .7rem .9rem;
  border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius);
  font-family: 'Roboto', sans-serif; font-size: .9rem; color: var(--ds-ink);
  background: #fff; transition: var(--ds-ease);
}
.ds-pop-body input.form-control:focus,
.ds-pop-body textarea.form-control:focus,
.ds-pop-body select.form-control:focus {
  outline: none; border-color: var(--ds-blue);
  box-shadow: 0 0 0 4px rgba(0, 0, 235, .12);
}
.ds-pop-error {
  display: none; margin-top: .6rem; padding: .55rem .75rem;
  border-radius: 8px; background: var(--ds-danger-soft);
  color: var(--ds-danger); font-size: .78rem; font-weight: 600;
}
.ds-pop-error.is-visible { display: block; }

.ds-pop-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .55rem;
  padding: 1rem 1.35rem; flex-wrap: wrap;
  background: #fafbff; border-top: 1px solid var(--ds-line);
}
.ds-pop-foot .quick-btn { min-width: 110px; }

/* OTP / verification code input */
.ds-code-input {
  width: 100%; padding: .85rem 1rem;
  border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.55rem; font-weight: 800; letter-spacing: .5em;
  text-align: center; text-indent: .5em; color: var(--ds-black);
  transition: var(--ds-ease);
}
.ds-code-input:focus {
  outline: none; border-color: var(--ds-blue);
  box-shadow: 0 0 0 4px rgba(0, 0, 235, .12);
}
.ds-code-note {
  margin-top: .8rem; padding: .7rem .85rem;
  background: var(--ds-blue-soft-2); border: 1px solid var(--ds-blue-line);
  border-radius: 10px; color: var(--ds-ink); font-size: .78rem; line-height: 1.5;
}
.ds-code-note strong { color: var(--ds-blue); }
.ds-resend-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: .7rem; flex-wrap: wrap;
}
.ds-resend-row button {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ds-blue); font-size: .78rem; font-weight: 700;
}
.ds-resend-row button:disabled { color: var(--ds-gray); cursor: not-allowed; }

/* Spinner */
.ds-spin {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: ds-spin .6s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Page-level AJAX loading veil */
.ds-veil {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; flex-direction: column;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--ds-ease);
}
.ds-veil.is-visible { opacity: 1; }
.ds-veil .ds-spin { width: 34px; height: 34px; border-width: 3px; color: var(--ds-blue); }
.ds-veil span { font-family: 'Montserrat', sans-serif; font-size: .8rem; font-weight: 700; color: var(--ds-gray); }

/* =============================================================
   5. TOASTS
   ============================================================= */

.ds-toast-stack {
  position: fixed; top: 18px; right: 18px; z-index: 100001;
  display: flex; flex-direction: column; gap: .55rem;
  max-width: calc(100vw - 36px); pointer-events: none;
}
.ds-toast {
  display: flex; align-items: flex-start; gap: .65rem;
  min-width: 260px; max-width: 380px;
  padding: .8rem 1rem;
  background: #fff; border-left: 4px solid var(--ds-blue);
  border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
  font-family: 'Roboto', sans-serif; font-size: .83rem; line-height: 1.5;
  color: var(--ds-ink);
  pointer-events: auto;
  opacity: 0; transform: translateX(24px);
  transition: opacity var(--ds-ease), transform var(--ds-ease);
}
.ds-toast.is-visible { opacity: 1; transform: translateX(0); }
.ds-toast i { margin-top: .12rem; font-size: .95rem; color: var(--ds-blue); }
.ds-toast-success { border-left-color: var(--ds-success); }
.ds-toast-success i { color: var(--ds-success); }
.ds-toast-error { border-left-color: var(--ds-danger); }
.ds-toast-error i { color: var(--ds-danger); }
.ds-toast-close {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--ds-gray); font-size: .8rem; padding: 0 0 0 .4rem;
}

/* =============================================================
   6. FLASH MESSAGES — match popup styling
   ============================================================= */

.alert { border-radius: var(--ds-radius); border: 1px solid transparent; font-size: .85rem; }
.alert-success { background: var(--ds-success-soft); border-color: #bfe6d3; color: var(--ds-success); }
.alert-danger  { background: var(--ds-danger-soft);  border-color: #f3c9c6; color: var(--ds-danger); }
.alert-info    { background: var(--ds-blue-soft);    border-color: var(--ds-blue-line); color: var(--ds-blue); }
.alert-warning { background: var(--ds-warn-soft);    border-color: #f0dcb4; color: var(--ds-warn); }

/* =============================================================
   7. TABLE + CARD PADDING NORMALISATION
   ============================================================= */

.woc-card { padding: 1.35rem; border-radius: 14px; }
.woc-card-header { margin-bottom: 1.1rem; }
.woc-table { width: 100%; border-collapse: collapse; }
.woc-table th {
  padding: .75rem .85rem; background: var(--ds-blue-soft-2);
  border-bottom: 1px solid var(--ds-line);
  font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ds-gray);
  text-align: left; white-space: nowrap;
}
.woc-table td {
  padding: .8rem .85rem; border-bottom: 1px solid var(--ds-line);
  font-size: .83rem; color: var(--ds-ink); vertical-align: middle;
}
.woc-table tbody tr:last-child td { border-bottom: 0; }
.woc-table tbody tr:hover { background: #fbfcff; }
.woc-table td small { color: var(--ds-gray); font-size: .74rem; }

/* Keep the action column from collapsing its buttons */
.woc-table td:last-child { white-space: nowrap; }

@media (max-width: 767px) {
  .ds-pop-card { max-width: 100%; }
  .ds-pop-head { padding: 1rem; }
  .ds-pop-body { padding: 1.1rem; }
  .ds-pop-foot { padding: .85rem 1.1rem; }
  .ds-pop-foot .quick-btn { flex: 1 1 auto; }
  .ds-toast-stack { top: auto; bottom: 14px; right: 14px; left: 14px; }
  .ds-toast { max-width: none; }
}