/* === SATRANS Design System (Single Source of Truth) === */
:root{
  /* Brand */
  --sat-primary:#B18D32;               /* golden */
  --sat-primary-foreground:#ffffff;
  --sat-accent:#3fc8eb;                /* cyan */

  /* Text */
  --sat-text:#1a1a1a;
  --sat-muted:#616161;

  /* Surfaces */
  --sat-bg:#f5f5f5;
  --sat-card:#ffffff;

  /* UI */
  --sat-border:#e0e0e0;
  --sat-input:#ffffff;
  --sat-ring:#B18D32;
  --sat-destructive:#d32f2f;

  /* Charts (optional) */
  --sat-chart-1:#2e7d32;
  --sat-chart-2:#66bb6a;
  --sat-chart-3:#ffa726;
  --sat-chart-4:#42a5f5;
  --sat-chart-5:#ab47bc;

  /* Typography */
  --sat-font-sans:"Tajawal","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sat-font-heading:var(--sat-font-sans);
  --sat-font-serif:"Playfair Display",serif;
  --sat-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  /* Radius */
  --sat-radius:0.75rem;

  /* Shadow */
  --sat-shadow:0 12px 28px rgba(17,24,39,.10), 0 2px 6px rgba(17,24,39,.06);
  --sat-shadow-sm:0 6px 16px rgba(17,24,39,.08);

  /* ===== Bridge tokens (Tailwind theme / project vars) ===== */
  --background: var(--sat-bg);
  --foreground: var(--sat-text);

  --primary: var(--sat-primary);
  --primary-foreground: var(--sat-primary-foreground);

  --secondary: var(--sat-accent);
  --secondary-foreground:#ffffff;

  --muted: #e0e0e0;
  --muted-foreground: var(--sat-muted);

  --accent: var(--sat-accent);
  --accent-foreground:#ffffff;

  --destructive: var(--sat-destructive);

  --card: var(--sat-card);
  --card-foreground: var(--sat-text);

  --popover: var(--sat-card);
  --popover-foreground: var(--sat-text);

  --border: var(--sat-border);
  --input: var(--sat-input);
  --ring: var(--sat-ring);

  --sidebar: #fafafa;
  --sidebar-foreground:#424242;
  --sidebar-primary: var(--sat-primary);
  --sidebar-primary-foreground: var(--sat-primary-foreground);
  --sidebar-accent: #e8f5e9;
  --sidebar-accent-foreground: #1b5e20;
  --sidebar-border: var(--sat-border);
  --sidebar-ring: var(--sat-ring);

  --chart-1: var(--sat-chart-1);
  --chart-2: var(--sat-chart-2);
  --chart-3: var(--sat-chart-3);
  --chart-4: var(--sat-chart-4);
  --chart-5: var(--sat-chart-5);

  --font-sans: var(--sat-font-sans);
  --font-heading: var(--sat-font-heading);
  --font-serif: var(--sat-font-serif);
  --font-mono: var(--sat-font-mono);

  --radius: var(--sat-radius);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--sat-font-sans);
  color:var(--foreground);
  background:var(--background);
}

/* ===== Shared helper classes used in legacy pages (kept, but now token-driven) ===== */
.bg-primary{background-color:var(--primary)}
.text-primary{color:var(--primary)}
.bg-secondary{background-color:var(--secondary)}

.hover\:bg-primary-dark:hover{background-color:color-mix(in srgb, var(--primary) 86%, #000)}

.focus\:border-primary:focus{border-color:var(--primary)}
.focus\:shadow-primary:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent)}

/* Small components (optional) */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + .25rem);
  box-shadow:var(--sat-shadow-sm);
}

.btn{
  appearance:none;
  border-radius:12px;
  border:1px solid var(--border);
  padding:.6rem 1rem;
  cursor:pointer;
  line-height:1.2;
  transition:.2s all;
}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn.success{background:#16a34a;border-color:#16a34a;color:#fff}
.btn:hover{filter:brightness(.96);box-shadow:var(--sat-shadow-sm)}

/* Autocomplete (SATRANS look) */
.autocomplete-wrap{position:relative}
.autocomplete-list{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 6px);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--sat-shadow);
  padding:6px 4px;
  z-index:10000;
  direction:rtl;
  max-height:260px;
  overflow:auto;
}
.autocomplete-item{
  list-style:none;
  border-radius:12px;
  padding:.55rem .75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}
.autocomplete-item .title{font-weight:700}
.autocomplete-item .sub{font-size:.86rem;color:var(--muted-foreground)}
.autocomplete-item .code{
  font-size:.86rem;
  background:color-mix(in srgb, var(--card) 70%, var(--muted));
  border:1px solid var(--border);
  border-radius:10px;
  padding:.15rem .45rem;
}
.autocomplete-item:hover,.autocomplete-item.active{background:color-mix(in srgb, var(--primary) 6%, transparent)}

/* RTL helper */
[dir='rtl'] .autocomplete-list{right:0;left:0}

/* === Field icon component === */
.sat-field-icon{ position:relative; }
.sat-field-icon > input,
.sat-field-icon > select,
.sat-field-icon > textarea{
  padding-inline-end:3rem; /* room for end icon */
}
.sat-field-icon.sat-field-icon--start > input,
.sat-field-icon.sat-field-icon--start > select,
.sat-field-icon.sat-field-icon--start > textarea{
  padding-inline-start:3rem; /* room for start icon */
}
.sat-field-icon__icon,
.sat-field-icon__icon-start{
  position:absolute;
  top:50%;
  width:20px;
  height:20px;
  transform:translateY(-50%);
  opacity:.75;
  pointer-events:none;
}
.sat-field-icon__icon{ inset-inline-end:1rem; }
.sat-field-icon__icon-start{ inset-inline-start:1rem; }


/* === Step Transition Loader === */
.sat-step-loader{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:99999;
}
.sat-step-loader.show{
  opacity:1;
  pointer-events:all;
}
.sat-step-loader .box{
  width:min(320px, 86vw);
  background:var(--card, #fff);
  border:1px solid var(--border, #e5e7eb);
  border-radius:18px;
  padding:20px 18px;
  box-shadow:var(--sat-shadow, 0 12px 28px rgba(17,24,39,.10));
  text-align:center;
}
.sat-step-loader img{
  width:140px;
  height:auto;
  display:block;
  margin:0 auto 10px;
}
.sat-step-loader .msg{
  font-weight:800;
  color:var(--foreground, #111827);
  margin-top:6px;
}
.sat-step-loader .sub{
  color:var(--muted-foreground, #6b7280);
  font-size:.9rem;
  margin-top:4px;
}
.sat-step-loader .spinner{
  width:34px;height:34px;
  border-radius:999px;
  border:3px solid rgba(0,0,0,.12);
  border-top-color: var(--primary, #A57C35);
  margin:14px auto 0;
  animation:satspin .8s linear infinite;
}
@keyframes satspin{to{transform:rotate(360deg)}}


/* -------- Brand Loading Spinner -------- */
.sat-loading{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.sat-loader{
  border: 4px solid #e5e7eb;
  border-top-color: var(--primary);
  animation: sat-spin 1s linear infinite;
}
@keyframes sat-spin{ to{ transform: rotate(360deg);} }