/* =====================================================================
   RetailConnect Design System  (rc-design.css)
   Tokens + base + reusable components. Screen layouts live in rc-app.css.
   Palette: lemon-white canvas, green primary, blue secondary,
            purple + orange accents.
   ===================================================================== */

/* ---------- Fonts (bundled, OFL) ---------- */
@font-face { font-family: "RC Poppins"; src: url("../fonts/poppins-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "RC Poppins"; src: url("../fonts/poppins-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "RC Poppins"; src: url("../fonts/poppins-bold.woff") format("woff"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "RC Odia"; src: url("../fonts/noto-sans-oriya-regular.woff") format("woff"); font-weight: 400 500; font-display: swap; unicode-range: U+0B00-0B7F, U+200C-200D, U+25CC, U+0964-0965; }
@font-face { font-family: "RC Odia"; src: url("../fonts/noto-sans-oriya-bold.woff") format("woff"); font-weight: 600 700; font-display: swap; unicode-range: U+0B00-0B7F, U+200C-200D, U+25CC, U+0964-0965; }

/* ---------- Tokens ---------- */
:root {
  /* Brand (theme colour from admin can override --rc-brand) */
  --rc-brand: #16a265;
  --rc-green-700: #0f7446;
  --rc-green-600: #128a55;
  --rc-green-500: #16a265;
  --rc-green-100: #e2f5eb;
  --rc-green-50:  #f1faf5;

  --rc-blue-700: #1a43b8;
  --rc-blue-600: #1d4fd8;
  --rc-blue-500: #2563eb;
  --rc-blue-100: #e5edff;

  --rc-purple-600: #6a3ff0;
  --rc-purple-500: #7c4dff;
  --rc-purple-100: #eee8ff;

  --rc-orange-600: #e0650b;
  --rc-orange-500: #f2771b;
  --rc-orange-100: #ffeedd;

  --rc-lemon-300: #f2ea9e;
  --rc-lemon-200: #f8f3c4;
  --rc-lemon-100: #fdfbe6;

  --rc-red-600: #d93a40;
  --rc-red-100: #fdeaea;

  /* Neutrals */
  --rc-ink:      #142033;
  --rc-ink-2:    #3b4759;
  --rc-muted:    #6b7789;
  --rc-subtle:   #98a2b2;
  --rc-line:     #e5e8ee;
  --rc-line-2:   #eef0f4;
  --rc-bg:       #fbfaf3;
  --rc-surface:  #ffffff;
  --rc-surface-2:#f6f7f2;

  /* Gradients */
  --rc-grad-brand: linear-gradient(135deg, var(--rc-green-500) 0%, #18a58a 45%, var(--rc-blue-500) 100%);
  --rc-grad-dawn:  linear-gradient(165deg, var(--rc-lemon-100) 0%, #eef8ef 48%, #e9f0fd 100%);
  --rc-grad-glow:  radial-gradient(120% 80% at 10% 0%, rgba(248,243,196,.9) 0%, rgba(248,243,196,0) 60%),
                   radial-gradient(90% 70% at 100% 10%, rgba(124,77,255,.12) 0%, rgba(124,77,255,0) 60%),
                   radial-gradient(80% 60% at 0% 100%, rgba(22,162,101,.14) 0%, rgba(22,162,101,0) 60%);

  /* Type */
  --rc-font: "RC Poppins", "RC Odia", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Oriya", "Noto Sans", sans-serif;
  --rc-fs-xs: 12px;
  --rc-fs-sm: 13.5px;
  --rc-fs-md: 15px;
  --rc-fs-lg: 17px;
  --rc-fs-xl: 21px;
  --rc-fs-2xl: 27px;

  /* Shape & depth */
  --rc-r-sm: 10px;
  --rc-r-md: 14px;
  --rc-r-lg: 20px;
  --rc-r-xl: 28px;
  --rc-r-pill: 999px;
  --rc-shadow-1: 0 1px 2px rgba(20,32,51,.05), 0 2px 10px -3px rgba(20,32,51,.08);
  --rc-shadow-2: 0 12px 32px -14px rgba(20,32,51,.26), 0 2px 6px -2px rgba(20,32,51,.06);
  --rc-shadow-brand: 0 10px 24px -10px rgba(22,162,101,.55);
  --rc-ring: 0 0 0 4px rgba(37,99,235,.16);

  /* Motion */
  --rc-ease: cubic-bezier(.2,.8,.2,1);
  --rc-fast: 140ms;
  --rc-med: 240ms;

  /* Safe areas (phones with notches) */
  --rc-safe-top: env(safe-area-inset-top, 0px);
  --rc-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--rc-font);
  font-size: var(--rc-fs-md);
  line-height: 1.5;
  color: var(--rc-ink);
  background: var(--rc-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
:lang(or) body, body:lang(or) { line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--rc-blue-600); text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--rc-ring); }
.rc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
.rc-h1 { font-size: var(--rc-fs-2xl); font-weight: 700; }
.rc-h2 { font-size: var(--rc-fs-xl); font-weight: 700; }
.rc-h3 { font-size: var(--rc-fs-lg); font-weight: 600; }
.rc-text-muted { color: var(--rc-muted); }
.rc-text-sm { font-size: var(--rc-fs-sm); }
.rc-text-xs { font-size: var(--rc-fs-xs); }
.rc-icon { width: 22px; height: 22px; flex: none; }
.rc-icon--sm { width: 18px; height: 18px; }
.rc-icon--lg { width: 26px; height: 26px; }

/* ---------- Buttons ---------- */
.rc-btn {
  --_bg: var(--rc-surface);
  --_fg: var(--rc-ink);
  --_bd: var(--rc-line);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--rc-r-md);
  border: 1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  font-weight: 600; font-size: var(--rc-fs-md); letter-spacing: .005em;
  cursor: pointer; user-select: none;
  transition: transform var(--rc-fast) var(--rc-ease), box-shadow var(--rc-med) var(--rc-ease), background var(--rc-med);
}
.rc-btn:active { transform: scale(.98); }
.rc-btn[disabled] { opacity: .55; pointer-events: none; }
.rc-btn--primary { --_bg: var(--rc-brand); --_fg: #fff; --_bd: transparent; background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); box-shadow: var(--rc-shadow-brand); }
.rc-btn--primary:hover { filter: brightness(1.04); }
.rc-btn--blue { --_bg: var(--rc-blue-500); --_fg: #fff; --_bd: transparent; box-shadow: 0 10px 24px -12px rgba(37,99,235,.6); }
.rc-btn--soft { --_bg: var(--rc-green-100); --_fg: var(--rc-green-700); --_bd: transparent; }
.rc-btn--outline { --_bg: transparent; --_fg: var(--rc-blue-600); --_bd: #c9d7f7; }
.rc-btn--ghost { --_bg: transparent; --_fg: var(--rc-ink-2); --_bd: transparent; }
.rc-btn--danger { --_bg: var(--rc-red-600); --_fg: #fff; --_bd: transparent; }
.rc-btn--block { width: 100%; }
.rc-btn--sm { min-height: 38px; padding: 0 14px; font-size: var(--rc-fs-sm); border-radius: var(--rc-r-sm); }
.rc-btn--icon { width: 44px; min-height: 44px; padding: 0; border-radius: var(--rc-r-pill); }
.rc-btn.is-loading { color: transparent !important; pointer-events: none; }
.rc-btn.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: rc-spin .8s linear infinite;
}

/* ---------- Form fields ---------- */
.rc-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.rc-label { font-size: var(--rc-fs-sm); font-weight: 600; color: var(--rc-ink-2); }
.rc-control {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 14px;
  background: var(--rc-surface);
  border: 1.5px solid var(--rc-line);
  border-radius: var(--rc-r-md);
  transition: border-color var(--rc-fast), box-shadow var(--rc-med);
}
.rc-control:focus-within { border-color: var(--rc-blue-500); box-shadow: var(--rc-ring); }
.rc-control.is-invalid { border-color: var(--rc-red-600); box-shadow: 0 0 0 4px rgba(217,58,64,.12); }
.rc-control__prefix {
  display: inline-flex; align-items: center; gap: 6px; padding-right: 10px; margin-right: 2px;
  border-right: 1px solid var(--rc-line); color: var(--rc-ink-2); font-weight: 600;
}
.rc-control input {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent;
  font-size: 16px; /* 16px stops iPhone zooming into the field */
  padding: 12px 0; letter-spacing: .02em;
}
.rc-control input:focus-visible { box-shadow: none; }
.rc-control input::placeholder { color: var(--rc-subtle); letter-spacing: 0; }
.rc-control__action { border: 0; background: none; color: var(--rc-muted); padding: 6px; cursor: pointer; border-radius: 8px; }
.rc-help { font-size: var(--rc-fs-xs); color: var(--rc-muted); }
.rc-error { font-size: var(--rc-fs-xs); color: var(--rc-red-600); font-weight: 500; min-height: 0; }

/* ---------- Cards & surfaces ---------- */
.rc-card {
  background: var(--rc-surface);
  border-radius: var(--rc-r-lg);
  box-shadow: var(--rc-shadow-1);
  border: 1px solid rgba(20,32,51,.04);
  padding: 16px;
}
.rc-card--glass {
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--rc-shadow-2);
}

/* ---------- Chips ---------- */
.rc-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.rc-chips::-webkit-scrollbar { display: none; }
.rc-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 34px; padding: 0 14px; border-radius: var(--rc-r-pill);
  border: 1px solid var(--rc-line); background: var(--rc-surface);
  font-size: var(--rc-fs-sm); font-weight: 500; color: var(--rc-ink-2); cursor: pointer;
  transition: background var(--rc-fast), color var(--rc-fast), border-color var(--rc-fast);
}
.rc-chip.is-active { background: var(--rc-ink); color: #fff; border-color: var(--rc-ink); }

/* ---------- Badges ---------- */
.rc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rc-r-pill);
  font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--rc-brand); color: #fff;
}
.rc-badge--blue { background: var(--rc-blue-500); }
.rc-badge--orange { background: var(--rc-orange-500); }
.rc-badge--purple { background: var(--rc-purple-500); }
.rc-badge--soft { background: var(--rc-green-100); color: var(--rc-green-700); }
.rc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--rc-r-pill); font-size: 12px; font-weight: 600; }
.rc-pill--green { background: var(--rc-green-100); color: var(--rc-green-700); }
.rc-pill--blue { background: var(--rc-blue-100); color: var(--rc-blue-700); }
.rc-pill--purple { background: var(--rc-purple-100); color: var(--rc-purple-600); }
.rc-pill--orange { background: var(--rc-orange-100); color: var(--rc-orange-600); }
.rc-pill--lemon { background: var(--rc-lemon-200); color: #6b5a00; }

/* ---------- Avatars ---------- */
.rc-avatar {
  --_size: 46px;
  width: var(--_size); height: var(--_size); flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: calc(var(--_size) * .36); color: #fff;
  background: var(--rc-grad-brand);
  position: relative;
}
.rc-avatar--sm { --_size: 36px; }
.rc-avatar--lg { --_size: 64px; }
.rc-avatar--c1 { background: linear-gradient(135deg, #16a265, #0f7446); }
.rc-avatar--c2 { background: linear-gradient(135deg, #2563eb, #1a43b8); }
.rc-avatar--c3 { background: linear-gradient(135deg, #7c4dff, #5a2fd6); }
.rc-avatar--c4 { background: linear-gradient(135deg, #f2771b, #d65a00); }
.rc-avatar--c5 { background: linear-gradient(135deg, #0ea5a4, #0b7f84); }
.rc-avatar--group { border-radius: 16px; }
.rc-avatar__dot {
  position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px;
  border-radius: 50%; background: #22c55e; border: 2px solid #fff;
}

/* ---------- List rows (chats, contacts, files) ---------- */
.rc-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.rc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; min-height: 68px;
  background: var(--rc-surface);
  cursor: pointer; transition: background var(--rc-fast);
  position: relative;
}
.rc-row:active { background: var(--rc-surface-2); }
.rc-row + .rc-row::before { content: ""; position: absolute; top: 0; left: 74px; right: 0; height: 1px; background: var(--rc-line-2); }
.rc-row__body { flex: 1; min-width: 0; }
.rc-row__title { font-weight: 600; font-size: var(--rc-fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-row__sub { color: var(--rc-muted); font-size: var(--rc-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-row__meta { display: grid; justify-items: end; gap: 6px; font-size: var(--rc-fs-xs); color: var(--rc-subtle); }
.rc-row__meta.is-unread { color: var(--rc-brand); font-weight: 600; }

/* ---------- Quick-action tiles ---------- */
.rc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rc-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--rc-r-lg);
  background: var(--rc-surface); box-shadow: var(--rc-shadow-1);
  text-align: left; border: 0; cursor: pointer;
}
.rc-tile__icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.rc-tile__icon--green  { background: var(--rc-green-100);  color: var(--rc-green-600); }
.rc-tile__icon--blue   { background: var(--rc-blue-100);   color: var(--rc-blue-600); }
.rc-tile__icon--purple { background: var(--rc-purple-100); color: var(--rc-purple-600); }
.rc-tile__icon--orange { background: var(--rc-orange-100); color: var(--rc-orange-600); }
.rc-tile > span:last-child { min-width: 0; }
.rc-tile__title { font-weight: 600; font-size: var(--rc-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tile__sub { font-size: var(--rc-fs-xs); color: var(--rc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- App bars ---------- */
.rc-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(10px + var(--rc-safe-top)) 12px 10px;
  background: rgba(251,250,243,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20,32,51,.05);
}
.rc-topbar__title { flex: 1; font-size: var(--rc-fs-lg); font-weight: 700; }
.rc-bottomnav {
  position: sticky; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(6px + var(--rc-safe-bottom));
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--rc-line-2);
}
.rc-navitem {
  display: grid; justify-items: center; gap: 3px; padding: 6px 0;
  border: 0; background: none; color: var(--rc-subtle);
  font-size: 11px; font-weight: 600; cursor: pointer; position: relative;
}
.rc-navitem.is-active { color: var(--rc-brand); }
.rc-navitem.is-active::before {
  content: ""; position: absolute; top: 2px; width: 44px; height: 30px; border-radius: 12px;
  background: var(--rc-green-100); z-index: -1;
}
.rc-navitem .rc-badge { position: absolute; top: 2px; left: calc(50% + 6px); height: 17px; min-width: 17px; font-size: 10px; }

/* ---------- Divider with text ---------- */
.rc-divider { display: flex; align-items: center; gap: 12px; color: var(--rc-subtle); font-size: var(--rc-fs-sm); }
.rc-divider::before, .rc-divider::after { content: ""; flex: 1; height: 1px; background: var(--rc-line); }

/* ---------- Banner ---------- */
.rc-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--rc-r-md);
  background: var(--rc-lemon-100); border: 1px solid var(--rc-lemon-300);
}
.rc-banner--blue { background: var(--rc-blue-100); border-color: #c9d7f7; }
.rc-banner__body { flex: 1; min-width: 0; }
.rc-banner__title { font-weight: 600; font-size: var(--rc-fs-sm); }
.rc-banner__sub { font-size: var(--rc-fs-xs); color: var(--rc-muted); }

/* ---------- Toasts ---------- */
.rc-toasts {
  position: fixed; left: 0; right: 0; bottom: calc(20px + var(--rc-safe-bottom)); z-index: 100;
  display: grid; justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none;
}
.rc-toast {
  display: flex; align-items: center; gap: 10px; max-width: min(420px, 100%); width: max-content;
  padding: 12px 16px; border-radius: var(--rc-r-md);
  background: var(--rc-ink); color: #fff; font-size: var(--rc-fs-sm); font-weight: 500;
  box-shadow: 0 16px 36px -14px rgba(20,32,51,.55);
  animation: rc-toast-in var(--rc-med) var(--rc-ease);
  pointer-events: auto;
}
.rc-toast--success .rc-icon { color: #6ee7a8; }
.rc-toast--error { background: #4a1416; }
.rc-toast--info .rc-icon { color: #93b4ff; }
.rc-toast.is-leaving { animation: rc-toast-out var(--rc-med) var(--rc-ease) forwards; }

/* ---------- Spinner ---------- */
.rc-spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--rc-line); border-top-color: var(--rc-brand); animation: rc-spin .8s linear infinite; }

/* ---------- Animations ---------- */
@keyframes rc-spin { to { transform: rotate(360deg); } }
@keyframes rc-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rc-toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes rc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rc-pop { 0% { opacity: 0; transform: scale(.72) rotate(-6deg); } 60% { opacity: 1; transform: scale(1.06) rotate(1deg); } 100% { transform: none; } }
@keyframes rc-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.rc-rise { animation: rc-rise 420ms var(--rc-ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}