/* =============================================================================
   GSMOne Unify — one appearance for components that were written 20 times
   -----------------------------------------------------------------------------
   132 of the 229 views carry their own <style> block, so each page drew its own
   modal, its own backdrop, its own spinner. Rewriting all that markup is a long
   job; this layer makes the result look like one product in the meantime.

   It only ever sets APPEARANCE -- colour, radius, shadow, focus ring, animation
   timing. It never touches geometry (width, height, padding, position, display,
   flex), because that is what would break a layout the page depends on.

   !important is deliberate and limited to these properties. A page's own block
   sits later in the document than this stylesheet, so at equal specificity the
   page would win; these few declarations are product constants, not defaults.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Modal and drawer backdrops
   24 different dims were in use, from rgba(0,0,0,.75) to rgba(15,23,42,.42) --
   and .rp-modal-overlay alone was defined four times with four values. One dim.
   Loading overlays are excluded: theirs is a light scrim over a single card,
   not a page dim.
   --------------------------------------------------------------------------- */
.admin-modal-overlay,
.cco-overlay,
.cod-backdrop,
.cod-overlay,
.cur-modal-backdrop,
.det-overlay,
.detail-overlay,
.fb-overlay,
.gs-ci-backdrop,
.gs-ci-overlay,
.gs-drawer-backdrop,
.hb-media-browser-overlay,
.hb-modal-backdrop,
.imei-modal-overlay,
.inv-backdrop,
.media-browser-overlay,
.modal-overlay,
.mp-overlay,
.obr-overlay,
.pg-drawer-backdrop,
.pg-modal-backdrop,
.pm-iframe-overlay,
.popup-overlay,
.qrate-overlay,
.rp-confirm-overlay,
.rp-modal-overlay,
.txn-overlay,
.ud-overlay,
.ug-confirm-overlay,
.ug-overlay,
.um-confirm-overlay,
.um-overlay {
  background: var(--ds-modal-backdrop, rgba(17, 24, 39, .45)) !important;
  backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------------------------
   2. Modal and drawer panels
   Radius and shadow only. Every panel keeps its own width and padding.
   --------------------------------------------------------------------------- */
.admin-modal-panel,
.cur-modal,
.hb-modal,
.imei-modal,
.inv-modal,
.mp-modal,
.pg-modal,
.popup-container,
.rp-modal,
.svc-modal,
.ug-modal,
.um-modal {
  border-radius: var(--ds-modal-radius, 12px) !important;
  box-shadow: var(--ds-modal-shadow, 0 24px 48px rgba(17, 24, 39, .14)) !important;
}

.gs-drawer,
.pg-drawer {
  box-shadow: var(--ds-shadow-xl, 0 24px 48px rgba(17, 24, 39, .14)) !important;
}

/* Legacy loader names are kept as aliases only. They now share the same
   surface, spacing and motion as the design-system loader. */
.g-loading-overlay,
.api-loading-overlay,
[data-loading-overlay] {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(17, 24, 39, .45) !important;
  backdrop-filter: blur(2px);
  z-index: 10050 !important;
}
.g-loading-overlay.g-loading-hidden,
.api-loading-overlay:not(.active),
[data-loading-overlay][hidden] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.g-loading-box,
.api-loading-overlay > * {
  background: var(--ds-surface-card, #fff) !important;
  color: var(--ds-text-primary, #111827) !important;
  border: 1px solid var(--ds-border-subtle, #e5e7eb) !important;
  border-radius: var(--ds-radius-xl, 12px) !important;
  box-shadow: var(--ds-shadow-xl, 0 24px 48px rgba(17,24,39,.14)) !important;
}
.dark-mode .g-loading-box,
.dark-mode .api-loading-overlay > * {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

/* ---------------------------------------------------------------------------
   3. Spinners
   Sizes and colours stay: a spinner on a coloured button is white on purpose,
   and the payment bar's is teal on purpose. Only the rhythm is shared, so two
   spinners on one screen no longer turn at different speeds.
   --------------------------------------------------------------------------- */
.cp-margin-spinner,
.gs-loading,
.ie-loading,
.imei-loading,
.loading-spinner,
.pay-spinner,
.payment-spinner,
.pg-loading,
.spinner,
.spinner-ring,
.svc-dd-loading,
.svc-editor-spinner,
.svc-tab-loading,
.tb-search-loading {
  animation-duration: .7s !important;
  animation-timing-function: linear !important;
}

/* ---------------------------------------------------------------------------
   4. Keyboard focus
   A visible, identical focus ring everywhere. Several pages removed the outline
   entirely without putting anything back, which left keyboard users with no
   indication of where they were.
   --------------------------------------------------------------------------- */
.ds-btn:focus-visible,
.popup-btn:focus-visible,
.ug-btn:focus-visible,
.gs-btn:focus-visible,
.hb-btn:focus-visible,
.um-btn:focus-visible,
.rp-btn:focus-visible,
.sv-btn:focus-visible,
.action-btn:focus-visible,
.icon-btn:focus-visible,
.bulk-btn:focus-visible {
  outline: 2px solid var(--ds-border-focus, #0086aa) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .cp-margin-spinner, .gs-loading, .ie-loading, .imei-loading, .loading-spinner,
  .pay-spinner, .payment-spinner, .pg-loading, .spinner, .spinner-ring,
  .svc-dd-loading, .svc-editor-spinner, .svc-tab-loading, .tb-search-loading {
    animation-duration: .01ms !important;
  }
  .admin-modal-overlay, .ug-overlay, .um-overlay, .rp-modal-overlay,
  .hb-modal-backdrop, .gs-drawer-backdrop { backdrop-filter: none; }
}