/* =========================================================
Nguyano Escrow Manager UI — DESIGN TOKENS & UTILITIES
========================================================= */

/* ---------------------------------------------------------
CSS CUSTOM PROPERTIES (DESIGN TOKENS)
--------------------------------------------------------- */
:root {

	/* =====================
	 COLOURS — Background
	 ===================== */
	--ngesc-bg:          #ffffff;
	--ngesc-bg-light:    #f8fafc;
	--ngesc-bg-gray:     #F5F5F5;
	--ngesc-bg-dark:     #f3f4f6;
	--ngesc-panel:       #ffffff;
	--ngesc-hover:       #eef2ff;

	/* =====================
	 COLOURS — Brand
	 ===================== */
	--ngesc-primary:       #3746ce;
	--ngesc-primary-dark:  #1e40af;
	--ngesc-primary-light: #3b82f6;
	--ngesc-secondary:     #374151;
	--ngesc-dark:          #0c152b;

	/* =====================
	 COLOURS — Text
	 ===================== */
	--ngesc-text:         #111827;
	--ngesc-text-light:   #ffffff;
	--ngesc-text-secondary: #374151;
	--ngesc-muted:        #6b7280;
	--ngesc-text-subtle:  #9ca3af;

	/* =====================
	 COLOURS — Functional
	 ===================== */
	--ngesc-success: #16a34a;
	--ngesc-danger:  #dc2626;
	--ngesc-warning: #d97706;
	--ngesc-info:    #0284c7;

	/* =====================
	 COLOURS — Border
	 ===================== */
	--ngesc-border:        #e5e7eb;
	--ngesc-border-dark:   #d1d5db;
	--ngesc-border-strong: #9ca3af;

	/* =====================
	 TYPOGRAPHY — Families
	 ===================== */
	--ngesc-font-sans: inherit, jost, -apple-system, BlinkMacSystemFont,
					  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ngesc-font-mono: ui-monospace, SFMono-Regular, Menlo,
					  Monaco, Consolas, monospace;

	/* =====================
	 TYPOGRAPHY — Sizes
	 ===================== */
	--ngesc-text-xs:  11px;
	--ngesc-text-sm:  12px;
	--ngesc-text-md:  14px;
	--ngesc-text-lg:  18px;
	--ngesc-text-xl:  22px;
	--ngesc-text-2xl: 26px;

	/* =====================
	 TYPOGRAPHY — Line Heights
	 ===================== */
	--ngesc-leading-tight:   1.2;
	--ngesc-leading-normal:  1.45;
	--ngesc-leading-relaxed: 1.65;

	/* =====================
	 TYPOGRAPHY — Weights
	 ===================== */
	--ngesc-weight-regular:  400;
	--ngesc-weight-medium:   500;
	--ngesc-weight-semibold: 600;
	--ngesc-weight-bold:     700;

	/* =====================
	 BORDER RADIUS
	 ===================== */
	--ngesc-radius:      10px;
	--ngesc-radius-xs:   5px;
	--ngesc-radius-sm:   10px;
	--ngesc-radius-md:   18px;
	--ngesc-radius-lg:   25px;
	--ngesc-radius-xl:   30px;
	--ngesc-radius-pill: 999px;

	/* =====================
	 BORDER WIDTH
	 ===================== */
	--ngesc-border-1: 1px;
	--ngesc-border-2: 2px;

	/* =====================
	 SHADOWS
	 ===================== */
	--ngesc-shadow:    0 10px 30px rgba(0, 0, 0, 0.06);
	--ngesc-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);

	/* =====================
	 MOTION
	 ===================== */
	--ngesc-transition: all 0.25s ease;
}


/* ---------------------------------------------------------
2. BASE TYPOGRAPHY
--------------------------------------------------------- */

.ngesc-ui {
	font-family: var(--ngesc-font-sans);
	font-size: var(--ngesc-text-md);
	line-height: var(--ngesc-leading-normal);
	color: var(--ngesc-text-primary);
}

/* ---------------------------------------------------------
3. TYPOGRAPHY UTILITIES
--------------------------------------------------------- */

/* Headings */
.ngesc-h1 {
	font-size: var(--ngesc-text-2xl);
	font-weight: var(--ngesc-weight-bold);
	line-height: var(--ngesc-leading-tight);
}

.ngesc-h2 {
	font-size: var(--ngesc-text-xl);
	font-weight: var(--ngesc-weight-semibold);
}

.ngesc-h3 {
	font-size: var(--ngesc-text-lg);
	font-weight: var(--ngesc-weight-semibold);
}

.ngesc-h4 {
	font-size: var(--ngesc-text-md);
	font-weight: var(--ngesc-weight-semibold);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ngesc-h5 {
	font-size: var(--ngesc-text-sm);
	font-weight: var(--ngesc-weight-semibold);
}

.ngesc-h6 {
	font-size: var(--ngesc-text-xs);
	font-weight: var(--ngesc-weight-semibold);
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Font Sizes */
.ngesc-text-xs { font-size: var(--ngesc-text-xs); }
.ngesc-text-sm { font-size: var(--ngesc-text-sm); }
.ngesc-text-md { font-size: var(--ngesc-text-md); }
.ngesc-text-lg { font-size: var(--ngesc-text-lg); }
.ngesc-text-xl { font-size: var(--ngesc-text-xl); }

/* Line Heights */
.ngesc-leading-tight { line-height: var(--ngesc-leading-tight); }
.ngesc-leading-normal { line-height: var(--ngesc-leading-normal); }
.ngesc-leading-relaxed { line-height: var(--ngesc-leading-relaxed); }

/* Font Weights */
.ngesc-font-regular { font-weight: var(--ngesc-weight-regular); }
.ngesc-font-medium { font-weight: var(--ngesc-weight-medium); }
.ngesc-font-semibold { font-weight: var(--ngesc-weight-semibold); }
.ngesc-font-bold { font-weight: var(--ngesc-weight-bold); }

/* Text Colors */
.ngesc-text-primary { color: var(--ngesc-text-primary); }
.ngesc-text-secondary { color: var(--ngesc-text-secondary); }
.ngesc-text-muted { color: var(--ngesc-text-muted); }
.ngesc-text-subtle { color: var(--ngesc-text-subtle); }
.ngesc-text-success { color: #16a34a; }
.ngesc-text-warning { color: #d97706; }
.ngesc-text-danger { color: #dc2626 !important; }
.ngesc-text-info { color: #2563eb; }
.ngesc-text-dark { color: var(--ngesc-dark); }

/* Text Alignment */
.ngesc-text-left { text-align: left; }
.ngesc-text-center { text-align: center; }
.ngesc-text-right { text-align: right; }

/* Text Transform */
.ngesc-uppercase { text-transform: uppercase; }
.ngesc-lowercase { text-transform: lowercase; }
.ngesc-capitalize { text-transform: capitalize; }

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

/* Special Text */
.ngesc-mono {
	font-family: var(--ngesc-font-mono);
	font-size: var(--ngesc-text-sm);
}

.ngesc-code {
	font-family: var(--ngesc-font-mono);
	font-size: var(--ngesc-text-xs);
	background: #f1f5f9;
	padding: 2px 6px;
	border-radius: 6px;
}

/* ---------------------------------------------------------
4. COLOR UTILITIES
--------------------------------------------------------- */

/* Badge Colors */
.ngesc-badge-danger { background:#fee2e2; color:#991b1b; }
.ngesc-badge-warning { background:#fef3c7; color:#92400e; }
.ngesc-badge-success { background:#dcfce7; color:#166534; }
.ngesc-badge-gray { background:#e5e7eb; color:#374151; }
.ngesc-badge-processing { background: #45B2ED3B; color: #0C4766;}
.ngesc-badge-purple { background: #6f42c1; color: #fff; }

/* Status Colors */
.ngesc-status-pending { background: #fef3c7; color: var(--ngesc-warning);}
.ngesc-status-approved { background: #0ac80a2b; color: var(--ngesc-success); }
.ngesc-status-paid { background: #dcfce7; color: #166534; }
.ngesc-status-rejected{ background: #fee2e2; color: #991b1b; }

/* ---------------------------------------------------------
5. BORDER UTILITIES
--------------------------------------------------------- */

/* Border Base */
.ngesc-border { border: var(--ngesc-border-1) solid var(--ngesc-border); }
.ngesc-border-subtle { border: var(--ngesc-border-1) solid var(--ngesc-border-subtle); }
.ngesc-border-strong { border: var(--ngesc-border-2) solid var(--ngesc-border-strong); }
.ngesc-border-none { border: none !important; }

/* Directional Borders */
.ngesc-border-top { border-top: var(--ngesc-border-1) solid var(--ngesc-border); }
.ngesc-border-right { border-right: var(--ngesc-border-1) solid var(--ngesc-border); }
.ngesc-border-bottom { border-bottom: var(--ngesc-border-1) solid var(--ngesc-border); }
.ngesc-border-left { border-left: var(--ngesc-border-1) solid var(--ngesc-border); }

/* Border Colors */
.ngesc-border-primary { border-color: #2563eb; }
.ngesc-border-success { border-color: #16a34a; }
.ngesc-border-warning { border-color: #d97706; }
.ngesc-border-danger { border-color: #dc2626; }
.ngesc-border-info { border-color: #0284c7; }

/* Border Radius */
.ngesc-rounded-xs { border-radius: var(--ngesc-radius-xs); }
.ngesc-rounded-sm { border-radius: var(--ngesc-radius-sm); }
.ngesc-rounded-md { border-radius: var(--ngesc-radius-md); }
.ngesc-rounded-lg { border-radius: var(--ngesc-radius-lg); }
.ngesc-rounded-xl { border-radius: var(--ngesc-radius-xl); }
.ngesc-rounded-pill { border-radius: var(--ngesc-radius-pill); }
.ngesc-rounded-none { border-radius: 0 !important; }

/* Specific Radius Values */
.ngesc-rounded-1 { border-radius: 5px; }
.ngesc-rounded-2 { border-radius: 10px; }
.ngesc-rounded-3 { border-radius: 15px; }
.ngesc-rounded-4 { border-radius: 20px; }
.ngesc-rounded-5 { border-radius: 25px; }

/* ---------------------------------------------------------
6. DISPLAY & FLEX UTILITIES
--------------------------------------------------------- */

/* Display */
.ngesc-flex { display: flex; }
.ngesc-inline-flex { display: inline-flex; }
.ngesc-block { display: block; }
.ngesc-inline { display: inline; }
.ngesc-hidden { display: none !important; }
.ngesc-hide { display: none; }
.ngesc-hide-mobile { display: none; }

/* Flex Direction */
.ngesc-flex-row { flex-direction: row; }
.ngesc-flex-col { flex-direction: column; }

/* Flex Alignment */
.ngesc-items-start { align-items: flex-start; }
.ngesc-items-center { align-items: center; }
.ngesc-items-end { align-items: flex-end; }
.ngesc-justify-start { justify-content: flex-start; }
.ngesc-justify-center { justify-content: center; }
.ngesc-justify-end { justify-content: flex-end; }
.ngesc-justify-between{ justify-content: space-between; }

/* Flex Wrap */
.ngesc-flex-wrap { flex-wrap: wrap; }
.ngesc-flex-nowrap { flex-wrap: nowrap; }

/* ---------------------------------------------------------
7. SPACING UTILITIES
--------------------------------------------------------- */

/* Margin */
.ngesc-m-0 { margin: 0; }
.ngesc-m-auto { margin: auto; }
.ngesc-m-4 { margin: 24px; }
.ngesc-mt-1 { margin-top: 6px; }
.ngesc-mt-2 { margin-top: 12px; }
.ngesc-mt-3 { margin-top: 24px; }
.ngesc-mt-4 { margin-top: 36px; }
.ngesc-mt-5 { margin-top: 48px; }
.ngesc-mb-1 { margin-bottom: 6px; }
.ngesc-mb-2 { margin-bottom: 12px; }
.ngesc-mb-3 { margin-bottom: 24px; }
.ngesc-mb-4 { margin-bottom: 36px; }
.ngesc-mb-5 { margin-bottom: 48px; }
.ngesc-mr-1 { margin-right: 6px; }
.ngesc-mr-2 { margin-right: 12px; }
.ngesc-mr-3 { margin-right: 24px; }
.ngesc-mr-4 { margin-right: 36px; }
.ngesc-mr-5 { margin-right: 48px; }
.ngesc-ml-1 { margin-left: 6px; }
.ngesc-ml-2 { margin-left: 12px; }
.ngesc-ml-3 { margin-left: 24px; }
.ngesc-ml-4 { margin-left: 36px; }
.ngesc-ml-5 { margin-left: 48px; }
.ngesc-my-4 { margin-top: 36px; margin-bottom: 36px }
.ngesc-my-5 { margin-top: 48px; margin-bottom: 48px }
.ngesc-mx-4 { margin-left: 36px; margin-right: 36px }
.ngesc-mx-4 { margin-left: 36px; margin-right: 36px }
.ngesc-mx-5 { margin-left: 48px; margin-right: 48px }


/* Padding */
.ngesc-p-1 { padding: 4px; }
.ngesc-p-2 { padding: 8px; }
.ngesc-p-3 { padding: 16px; }
.ngesc-p-4 { padding: 24px; }
.ngesc-p-5 { padding: 36px; }
.ngesc-pt-1 { padding-top: 4px; }
.ngesc-pt-2 { padding-top: 8px; }
.ngesc-pt-3 { padding-top: 16px; }
.ngesc-pt-4 { padding-top: 24px; }
.ngesc-pt-5 { padding-top: 36px; }
.ngesc-pb-1 { padding-bottom: 4px; }
.ngesc-pb-2 { padding-bottom: 8px; }
.ngesc-pb-3 { padding-bottom: 16px; }
.ngesc-pb-4 { padding-bottom: 24px; }
.ngesc-pb-5 { padding-bottom: 36px; }
.ngesc-pr-1 { padding-right: 4px; }
.ngesc-pr-2 { padding-right: 8px; }
.ngesc-pr-3 { padding-right: 16px; }
.ngesc-pr-4 { padding-right: 24px; }
.ngesc-pr-5 { padding-right: 36px; }
.ngesc-pl-1 { padding-left: 4px; }
.ngesc-pl-2 { padding-left: 8px; }
.ngesc-pl-3 { padding-left: 16px; }
.ngesc-pl-4 { padding-left: 24px; }
.ngesc-pl-5 { padding-left: 36px; }
.ngesc-px-4 { padding-left: 24px; padding-right: 24px }
.ngesc-px-5 { padding-left: 36px; padding-right: 36px }
.ngesc-py-5 { padding-top: 36px; padding-bottom: 36px }

/* ---------------------------------------------------------
8. WIDTH & HEIGHT UTILITIES
--------------------------------------------------------- */
.ngesc-w-100 { width: 100%; }
.ngesc-max-w-sm { max-width: 320px; }
.ngesc-max-w-md { max-width: 480px; }
.ngesc-max-w-lg { max-width: 640px; }
.ngesc-h-auto {height: auto !important}

/* ---------------------------------------------------------
9. MISC UTILITIES
--------------------------------------------------------- */
.ngesc-box,
.ngesc-box * {
	box-sizing: border-box;
}
.ngesc-chart--small { height: 240px; }
.ngesc-chart--medium { height: 320px; }
.ngesc-chart--large { height: 420px; }

/* ---------------------------------------------------------
10. BACKGROUNDS
--------------------------------------------------------- */
.ngesc-bg-dark { background-color: var(--ngesc-dark) }
.ngesc-bg-light { background-color: var(--ngesc-light) }
.ngesc-bg-primary { background-color: var(--ngesc-primary); }
.ngesc-bg-secondary { background-color: var(--ngesc-secondary); }


/* ---------------------------------------------------------
11. KEYFRAMES
--------------------------------------------------------- */
@keyframes ngesc-success-glow {
	0% {
		box-shadow: 0 0 0 rgba(34, 197, 94, 0);
	}
	30% {
		box-shadow:
			0 0 0 2px rgba(34, 197, 94, 0.4),
			0 0 12px rgba(34, 197, 94, 0.6);
	}
	60% {
		box-shadow:
			0 0 0 2px rgba(34, 197, 94, 0.25),
			0 0 8px rgba(34, 197, 94, 0.4);
	}
	100% {
		box-shadow: 0 0 0 rgba(34, 197, 94, 0);
	}
}

@keyframes ngesc-success-glow-out {
	0% {
		padding: 10px;
		border-radius: 0.5rem;
		box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
	}
	25% {
		padding: 20px;
		border-radius: 2rem;
		box-shadow: 0 0 0 10px rgba(76, 175, 80, 0.3);
	}
	50% {
		padding: 20px;
		border-radius: 2rem;
		box-shadow: 0 0 0 20px rgba(76, 175, 80, 0);
	}
	75% {
		padding: 10px;
		border-radius: 1.5rem;
		box-shadow: 0 0 0 5px rgba(76, 175, 80, 0.2);
	}
	100% {
		padding: 0;
		border-radius: 0;
		box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
	}
}

/* =========================================================
   FORM FIELDS
   ========================================================= */

.ngesc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ngesc-field-label {
  font-weight: 600;
  font-size: 12px;
}

.ngesc-field-description {
  margin: 0;
  color: var(--ngesc-muted, #64748b);
  font-size: 12px;
  line-height: 1.45;
}

.ngesc-textarea {
  resize: vertical;
}

.ngesc-select-wrap {
  position: relative;
}

.ngesc-select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.6;
}

.ngesc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ngesc-toggle-slider {
  width: 36px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  position: relative;
}

.ngesc-help {
  margin-left: 6px;
  cursor: help;
  opacity: 0.6;
}

.ngesc-accept-contract-breakdown {
  text-align: left;
}

.ngesc-accept-contract-breakdown p {
  margin: 0 0 12px;
  color: var(--ngesc-muted, #64748b);
}

.ngesc-confirm-detail-list {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.1fr);
  gap: 8px 14px;
  margin: 0;
}

.ngesc-confirm-detail-list dt {
  color: var(--ngesc-muted, #64748b);
  font-weight: 600;
}

.ngesc-confirm-detail-list dd {
  margin: 0;
  color: var(--ngesc-text, #111827);
  font-weight: 700;
}

@media (max-width: 480px) {
  .ngesc-confirm-detail-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


/* ---------------------------------------------------------
12. SHADOWS
--------------------------------------------------------- */
.ngesc-shadow-none {
  box-shadow: none;
  border: 1px #c2cfd6 solid;
}


/* ---------------------------------------------------------
13. RESPONSIVE UTILITIES
--------------------------------------------------------- */
@media (min-width: 768px) {
	.ngesc-hide-mobile {
		display: block;
	}
}