/**
 * Polo Exchange — Enterprise UI design system (frontend only).
 * Stripe / Linear / Vercel-inspired tokens and components.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --eui-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --eui-radius-sm: 8px;
  --eui-radius: 12px;
  --eui-radius-lg: 16px;
  --eui-radius-xl: 20px;
  --eui-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --eui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --eui-duration: 0.28s;
  --eui-duration-slow: 0.45s;
  --eui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --eui-shadow-sm: 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  --eui-shadow-md: 0 12px 32px -12px rgba(15, 23, 42, 0.12);
  --eui-shadow-lg: 0 20px 48px -16px rgba(15, 23, 42, 0.16);
  --eui-border: rgba(226, 232, 240, 0.95);
  --eui-surface: #ffffff;
  --eui-surface-raised: #ffffff;
  --eui-surface-muted: #f8fafc;
  --eui-text: #0f172a;
  --eui-text-secondary: #64748b;
  --eui-text-tertiary: #94a3b8;
  --eui-accent: #4f46e5;
  --eui-accent-hover: #4338ca;
  --eui-success: #059669;
  --eui-warning: #d97706;
  --eui-danger: #dc2626;
  --eui-focus: 0 0 0 3px rgba(79, 70, 229, 0.28);
}

body.theme-dark,
body.dark {
  --eui-border: rgba(51, 65, 85, 0.88);
  --eui-surface: rgba(15, 23, 42, 0.72);
  --eui-surface-raised: rgba(30, 41, 59, 0.85);
  --eui-surface-muted: rgba(15, 23, 42, 0.55);
  --eui-text: #f8fafc;
  --eui-text-secondary: #94a3b8;
  --eui-text-tertiary: #64748b;
  --eui-shadow-sm: 0 4px 16px -4px rgba(0, 0, 0, 0.35);
  --eui-shadow-md: 0 12px 36px -12px rgba(0, 0, 0, 0.45);
  --eui-focus: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

/* ── Typography & shell ───────────────────────────────────── */
.app-main,
.app-main input,
.app-main button,
.app-main select,
.app-main textarea,
.app-main table,
.app-main th,
.app-main td,
.app-main h1,
.app-main h2,
.app-main h3,
.app-main h4,
.app-main p,
.app-main label,
.app-main a,
.app-main li,
.app-main span {
  font-family: var(--eui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-page {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  animation: eui-page-in 0.55s var(--eui-ease) both;
}

/* Shell pages: edge-to-edge content (no side gutters). */
.app-main.app-main--full-bleed {
  padding-left: 0;
  padding-right: 0;
}

.app-main.app-main--full-bleed > .app-page,
.app-main.app-main--full-bleed > section.app-page {
  padding-left: 0;
  padding-right: 0;
}

@keyframes eui-page-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Premium cards ────────────────────────────────────────── */
.app-main .card {
  background: var(--eui-surface-raised);
  border: 1px solid var(--eui-border);
  border-radius: var(--eui-radius-lg);
  box-shadow: var(--eui-shadow-xs), var(--eui-shadow-sm);
  backdrop-filter: blur(12px);
  transition:
    transform var(--eui-duration) var(--eui-ease),
    box-shadow var(--eui-duration) var(--eui-ease),
    border-color var(--eui-duration) ease;
}

.app-main .card::before {
  opacity: 0.5;
  animation: none !important;
}

.app-main .card::after {
  height: 2px;
  background: linear-gradient(90deg, var(--eui-accent), #6366f1, #818cf8);
  opacity: 0.75;
}

.app-main .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--eui-shadow-xs), var(--eui-shadow-md);
  border-color: color-mix(in srgb, var(--eui-accent) 22%, var(--eui-border));
}

.app-main .card h3 {
  font-weight: 700;
  letter-spacing: -0.025em;
  -webkit-text-fill-color: var(--eui-text);
  color: var(--eui-text);
  background: none;
}

body.theme-dark .app-main .card h3,
.dark .app-main .card h3 {
  -webkit-text-fill-color: var(--eui-text);
}

.app-main .cards-grid {
  gap: 1.25rem;
}

/* ── Tables (enterprise) ──────────────────────────────────── */
.app-main .table-wrap {
  border-radius: var(--eui-radius);
  border: 1px solid var(--eui-border);
  background: var(--eui-surface);
  box-shadow: var(--eui-shadow-xs);
  transition: box-shadow var(--eui-duration) ease;
}

.app-main .tx-reports-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (max-width: 1199px) {
  .app-main .buy-sell-layout .card.full-width .table-wrap .data-table,
  .app-main .tx-reports-table-wrap .data-table {
    min-width: max(100%, 42rem);
    width: max-content;
  }

  .app-main .tx-reports-table-wrap .data-table {
    min-width: 68rem;
  }
}

/* ── Dashboard chart shells ───────────────────────────────── */
.dash-root .dash-panel__chart,
.dash-root .dash-rates-chart-wrap,
.dash-root .dash-profit-chart-wrap {
  font-family: var(--eui-font);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.dash-root svg text {
  font-family: var(--eui-font);
}

.app-main .tx-reports-table-wrap .data-table {
  display: table !important;
  visibility: visible !important;
}

.app-main .table-wrap:hover {
  box-shadow: var(--eui-shadow-sm);
}

.app-main .data-table {
  border: none;
  border-radius: 0;
  background: transparent;
}

.app-main .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eui-text-secondary);
  background: var(--eui-surface-muted);
  border-bottom: 1px solid var(--eui-border);
  padding: 0.75rem 1rem;
  backdrop-filter: blur(8px);
}

.app-main .data-table td {
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  color: var(--eui-text);
  border-bottom: 1px solid color-mix(in srgb, var(--eui-border) 70%, transparent);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.app-main .data-table tbody tr {
  transition: background-color 0.15s ease;
}

.app-main .data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--eui-accent) 6%, var(--eui-surface));
}

body.theme-dark .app-main .data-table tbody tr:hover td,
.dark .app-main .data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--eui-accent) 12%, transparent);
}

.app-main .data-table tbody tr.eui-row-flash td {
  animation: eui-row-flash 0.6s ease;
}

@keyframes eui-row-flash {
  0% {
    background: color-mix(in srgb, var(--eui-accent) 18%, transparent);
  }
  100% {
    background: transparent;
  }
}

/* ── Forms ────────────────────────────────────────────────── */
.app-main .mini-form label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--eui-text-secondary);
  margin-bottom: 0.4rem;
}

.app-main .mini-form input:not([type='hidden']),
.app-main .mini-form select,
.app-main .mini-form textarea {
  border-radius: var(--eui-radius-sm);
  border: 1px solid var(--eui-border);
  background: var(--eui-surface);
  color: var(--eui-text);
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  transition:
    border-color var(--eui-duration) ease,
    box-shadow var(--eui-duration) ease,
    background-color var(--eui-duration) ease;
}

.app-main .mini-form input:focus,
.app-main .mini-form select:focus,
.app-main .mini-form textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--eui-accent) 55%, var(--eui-border));
  box-shadow: var(--eui-focus);
}

.app-main .mini-form input:user-invalid:not(:focus):not(:placeholder-shown),
.app-main .mini-form select:user-invalid:not(:focus) {
  border-color: color-mix(in srgb, var(--eui-danger) 65%, var(--eui-border));
  animation: eui-shake 0.4s ease;
}

.app-main .mini-form input:user-valid:not(:focus):not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--eui-success) 45%, var(--eui-border));
}

@keyframes eui-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.app-main .mini-form > div {
  transition: opacity 0.25s ease, transform 0.25s var(--eui-ease);
}

.app-main .mini-form > div:focus-within {
  transform: translateY(-1px);
}

/* ── Alerts / flash ───────────────────────────────────────── */
.app-main .alert {
  border-radius: var(--eui-radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  animation: eui-alert-in 0.45s var(--eui-ease) both;
}

@keyframes eui-alert-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.app-main .alert.success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.app-main .alert.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

body.theme-dark .app-main .alert.success,
.dark .app-main .alert.success {
  background: rgba(6, 78, 59, 0.35);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

body.theme-dark .app-main .alert.error,
.dark .app-main .alert.error {
  background: rgba(127, 29, 29, 0.35);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}

/* ── Buttons (card actions, not table links) ──────────────── */
.app-main .card .mini-form button[type='submit'],
.app-main .tx-reports-btn--primary,
.app-main .eui-btn--primary {
  border-radius: var(--eui-radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px -2px rgba(79, 70, 229, 0.45);
  transition:
    transform 0.15s var(--eui-ease),
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.app-main .card .mini-form button[type='submit']:hover,
.app-main .tx-reports-btn--primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.app-main .card .mini-form button[type='submit']:active,
.app-main .tx-reports-btn--primary:active {
  transform: scale(0.98);
}

/* ── KPI / stat blocks ────────────────────────────────────── */
.eui-kpi,
.tx-reports-kpi,
.dash-stat-card,
.dash-hero {
  font-family: var(--eui-font);
}

.tx-reports-kpi,
.app-main .tx-reports-kpis .tx-reports-kpi {
  border-radius: var(--eui-radius);
  border: 1px solid var(--eui-border);
  background: var(--eui-surface-raised);
  box-shadow: var(--eui-shadow-xs);
  transition:
    transform var(--eui-duration) var(--eui-ease),
    box-shadow var(--eui-duration) ease;
}

.tx-reports-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--eui-shadow-sm);
}

.tx-reports-kpi__value,
.dash-stat-card__value,
.dash-hero__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.eui-counter.is-counting {
  opacity: 0.85;
}

/* ── Sidebar navigation ───────────────────────────────────── */
.sidebar-nav-link {
  transition:
    background-color var(--eui-duration) ease,
    color var(--eui-duration) ease,
    padding-left var(--eui-duration) var(--eui-ease),
    box-shadow var(--eui-duration) ease;
}

.sidebar-nav-link.is-active {
  box-shadow: inset 3px 0 0 0 rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.14) !important;
}

.sidebar-nav-link:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.08);
}

html.sidebar-collapsed .sidebar-nav-link.is-active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* ── Topbar ───────────────────────────────────────────────── */
.app-topbar-page-title {
  font-family: var(--eui-font);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.app-topbar-breadcrumb {
  font-family: var(--eui-font);
}

.app-topbar-bc-label {
  font-weight: 500;
  transition: color 0.2s ease;
}

/* ── Modals ───────────────────────────────────────────────── */
.safe-modal.is-open .safe-modal__backdrop {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: eui-modal-backdrop 0.3s ease both;
}

.safe-modal.is-open .safe-modal__dialog {
  animation: eui-modal-dialog 0.38s var(--eui-ease) both;
}

@keyframes eui-modal-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes eui-modal-dialog {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Dashboard panels ─────────────────────────────────────── */
.dash-root {
  font-family: var(--eui-font);
}

.dash-panel {
  border-radius: var(--eui-radius-lg);
  box-shadow: var(--eui-shadow-xs), var(--eui-shadow-sm);
}

/* ── Transaction reports ──────────────────────────────────── */
.tx-reports-root {
  font-family: var(--eui-font);
}

.tx-reports-hero {
  border-radius: var(--eui-radius-lg);
}

.tx-reports-filters-card {
  border-radius: var(--eui-radius-lg);
}

/* ── Settings ─────────────────────────────────────────────── */
.settings-grid .card,
.settings-hero-card {
  border-radius: var(--eui-radius-lg);
}

.settings-pill {
  transition: transform 0.2s var(--eui-ease), box-shadow 0.2s ease;
}

.settings-pill:hover {
  transform: translateY(-1px);
}

/* ── Buy/sell toggle ──────────────────────────────────────── */
.bs-type-toggle__btn {
  transition:
    background-color var(--eui-duration) ease,
    color var(--eui-duration) ease,
    box-shadow var(--eui-duration) ease,
    transform 0.15s var(--eui-ease);
}

.bs-type-toggle__btn:active {
  transform: scale(0.97);
}

/* ── Skeleton & loading ───────────────────────────────────── */
.eui-skeleton {
  background: linear-gradient(
    90deg,
    var(--eui-surface-muted) 0%,
    color-mix(in srgb, var(--eui-border) 40%, var(--eui-surface-muted)) 50%,
    var(--eui-surface-muted) 100%
  );
  background-size: 200% 100%;
  animation: eui-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--eui-radius-sm);
}

@keyframes eui-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.app-main.eui-is-loading .cards-grid > .card,
.app-main.eui-is-loading .dash-panel,
.app-main.eui-is-loading .tx-reports-kpis {
  opacity: 0.6;
  pointer-events: none;
}

.app-main.eui-loaded .cards-grid > .card,
.app-main.eui-loaded .dash-panel {
  animation: eui-content-in 0.5s var(--eui-ease) both;
}

@keyframes eui-content-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Empty state (injected) ───────────────────────────────── */
.eui-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--eui-text-secondary);
  font-size: 0.875rem;
  animation: eui-page-in 0.45s var(--eui-ease) both;
}

.eui-empty-state__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--eui-surface-muted);
  color: var(--eui-text-tertiary);
  font-size: 1.25rem;
}

.table-wrap:has(.eui-empty-state):not(.tx-reports-table-wrap) .data-table {
  display: none;
}

/* ── Dropdown / select chevron polish ─────────────────────── */
.app-main select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem;
  padding-right: 2.25rem;
}

[dir='rtl'] .app-main select {
  background-position: left 0.6rem center;
  padding-right: 0.75rem;
  padding-left: 2.25rem;
}

body.theme-dark .app-main select,
body.dark .app-main select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

/* Gradient + !important on admin picker must keep chevron layer */
.app-main select.admin-user-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 0.6rem center, 0 0 !important;
  background-size: 1rem, auto !important;
  padding-right: 2.25rem !important;
}

body.theme-dark .app-main select.admin-user-select,
body.dark .app-main select.admin-user-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
}

/* ── Profit / safe / currency page hooks ──────────────────── */
.safe-grid .card,
.profit-table-wrap,
.currency-table-wrap,
.partners-financial-table,
.admin-users-table-wrap,
.audit-log-table {
  border-radius: var(--eui-radius);
}

.audit-log-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ── Invoice print (minimal touch) ────────────────────────── */
.invoice-paper {
  font-family: var(--eui-font);
}

/* ── Page-specific modules ────────────────────────────────── */
.admin-sec-page .card,
.partners-page .card,
.profit-page-grid .card,
.expenses-grid .card,
.buy-sell-layout .card,
.currency-layout .card,
.safe-grid .card {
  border-radius: var(--eui-radius-lg);
}

.app-navbar__link {
  transition:
    background-color var(--eui-duration) ease,
    color var(--eui-duration) ease,
    transform 0.15s var(--eui-ease);
}

.app-navbar__link.is-active {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.9);
}

.app-navbar__link:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.1);
}

.eui-filter-pending {
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tx-reports-filters-card:focus-within {
  box-shadow: var(--eui-shadow-sm);
  border-color: color-mix(in srgb, var(--eui-accent) 25%, var(--eui-border));
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .app-page,
  .app-main .card,
  .app-main .alert,
  .safe-modal.is-open .safe-modal__dialog,
  .eui-empty-state,
  .app-main.eui-loaded .cards-grid > .card {
    animation: none !important;
  }

  .app-main .card:hover,
  .tx-reports-kpi:hover {
    transform: none !important;
  }

  .eui-skeleton {
    animation: none !important;
  }
}