/* ===========================================================
   JW Layout
   - Layout & structure only (no skin/colors)
   =========================================================== */

/* ===========================================================
   SCREEN WRAPPER
   - Consistent page width + vertical rhythm
   =========================================================== */

.jw-screen { 
  width: 100%;
}

.jw-screen-body {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: var(--jw-space-6);
  display: grid;
  gap: var(--jw-space-2); /* controls spacing between summary/tabs/form */
}

/* When a card is inside jw-screen-body, let the body control spacing */
.jw-screen-body .jw-card {
  margin: 0;
}

.jw-tabs-bar {
  padding: 0 var(--jw-space-4);
}



/* HEADER BLOCK */
.jw-header-block {
  padding: 0px;
}

.jw-header-inner {
  margin: 0 auto;
}

.jw-header-align-left { text-align: left; }
.jw-header-align-center { text-align: center; }

.jw-header-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jw-space-2);
}

.jw-header-title {
  margin: 0;
  font-size: var(--jw-fs-5)!important;
  font-weight: 500;
  line-height: var(--jw-lh-tight);
  color: var(--jw-text);
}

.jw-header-sm .jw-header-title { font-size: var(--jw-fs-5); }
.jw-header-lg .jw-header-title { font-size: 26px; }


.jw-header-subtitle {
  margin: 0;
  font-size: var(--jw-fs-2);
  line-height: var(--jw-lh);
  color: var(--jw-text-muted);
}

.jw-header-meta {
  margin-top: var(--jw-space-1);
  font-size: var(--jw-fs-2);
}

.jw-header-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jw-space-2, 8px);
  width: 100%;
  min-width: 0;
}

.jw-header-actions {
  display: inline-flex;
  gap: 6px;
}

.jw-divider { border-top: 1px solid var(--jw-divider); }

/* Icon button (structure only) */
.jw-icon-btn {
  width: var(--jw-hit);
  height: var(--jw-hit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
}

.jw-icon-btn:active { transform: translateY(1px); }
.jw-icon-btn:focus-visible {
  outline: 2px solid var(--jw-focus-ring);
  outline-offset: 2px;
}


/* SECTION HEADER */
.jw-section-header {
  padding: var(--jw-space-2) var(--jw-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jw-space-2);
}

.jw-section-header-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jw-section-title {
  font-size: var(--jw-fs-4);
  font-weight: 500;
  line-height: var(--jw-lh-tight);
  padding-bottom: var(--jw-space-2);
}

.jw-section-header-sm .jw-section-title { font-size: var(--jw-fs-3); }

.jw-section-subtitle { 
	font-size: var(--jw-fs-2); 
	line-height: var(--jw-lh-tight);
}

.jw-section-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* CARD SHELL */
.jw-card {
  margin: var(--jw-space-2) 0px  !important;
  border-radius: var(--jw-radius-2);
}

/* padding variants */
.jw-card-pad-none { padding: 0; }
.jw-card-pad-sm   { padding: var(--jw-space-2) var(--jw-space-3); }
.jw-card-pad-md   { padding: var(--jw-space-3) var(--jw-space-4); }
.jw-card-pad-lg   { padding: var(--jw-space-4) var(--jw-space-4); }

.jw-card-clickable { cursor: pointer; }
.jw-card-clickable:focus-visible {
  outline: 2px solid var(--jw-focus-ring);
  outline-offset: 2px;
}

/* Use logical border direction for RTL support */
.jw-card-tone-primary { border-inline-start: 3px solid; }
.jw-card-tone-danger  { border-inline-start: 3px solid; }


/* SKELETONS (layout only) */
.jw-skel-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.jw-skel-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-size: 200% 100%;
  animation: jw-skel-shimmer 1.3s infinite;
}

/* Skeleton gradient (shared) */
.jw-skel-avatar,
.jw-skel-line {
  background-image: linear-gradient(
    90deg,
    var(--jw-skel-b) 0%,
    var(--jw-skel-a) 50%,
    var(--jw-skel-b) 100%
  );
}


.jw-skel-lines { flex: 1; }

.jw-skel-line {
  height: 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  background-size: 200% 100%;
  animation: jw-skel-shimmer 1.3s infinite;
}

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

/* Skeleton additions (for card/chart variants) */
.jw-skel-card { width: 100%; }
.jw-skel-chart { display: grid; gap: 8px; width: 100%; }
.jw-skel-bar {
  height: 12px;
  border-radius: 6px;
  background-size: 200% 100%;
  animation: jw-skel-shimmer 1.3s infinite;
}

/* ===========================================================
   Reusable spinner (theme aware)
   =========================================================== */
.jw-spinner {
  display: inline-block;
  width: 1.5em;               /* default standard size */
  height: 1.5em;
  border: 3px solid rgba(0,0,0,0.15); /* lighter border for contrast */
  border-top-color: var(--jw-text);   /* theme-based color */
  border-radius: 50%;
  animation: jw-spin 0.8s linear infinite;
  vertical-align: middle;     /* aligns nicely with text/icon */
}

/* Spinner size variants */
.jw-spinner--sm {
  width: 1em;
  height: 1em;
  border-width: 2px;
}

.jw-spinner--md {
  width: 2em;
  height: 2em;
  border-width: 3px;
}

.jw-spinner--lg {
  width: 3em;
  height: 3em;
  border-width: 4px;
}

@keyframes jw-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





/* AUTH OVERLAY (structure only) */
.jw-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
}

.jw-auth-overlay-visible { display: flex; }

.jw-auth-panel {
  position: relative;
  max-width: 420px;
  width: 100%;
  margin: 16px;
  padding: 16px 16px 20px;
  border-radius: 12px;
}

.jw-auth-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.jw-auth-message {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
}

.jw-auth-forms { font-size: 13px; }