/* =====================================================================
   Retail Compliance Monitor — shared theme (used across the entire app)
   Source design: Store Manager Dashboard.html
   Audience may have little formal education: keep it large, plain, and
   show status as colour + icon + word (never colour alone).
   ===================================================================== */

:root {
  --rc-accent: #566372;  --rc-accent-dark: #45505d;
  --rc-red:   #b3261e;   --rc-red-bg:   #fbecea; --rc-red-bd:   #f1c7c2; --rc-red-tx:   #8a1c16;
  --rc-amber: #b06f00;   --rc-amber-bg: #fdf3e2; --rc-amber-bd: #f0d9ab; --rc-amber-tx: #8a5800;
  --rc-green: #1f7a4d;   --rc-green-bg: #eaf4ee; --rc-green-bd: #c4e3d1; --rc-green-tx: #1a6741;
  --rc-ink:   #1b1e22;   --rc-muted:    #8b959d; --rc-line:     #e3e6e9;
}

body {
  background: #f3f4f5;
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  color: var(--rc-ink);
  -webkit-font-smoothing: antialiased;
}

.rc-container { max-width: 1140px; }
.rc-muted { color: var(--rc-muted); }

/* ---- Top header / nav ---- */
.rc-header { background: #fff; }
.rc-brand  { font-size: 16px; letter-spacing: -.01em; color: #2b3138; }
.rc-logo {
  width: 38px; height: 38px; border-radius: 8px; background: #eef1f3;
  border: 1px dashed #c2cbd2; font-family: monospace; font-size: 9px;
  letter-spacing: .04em; color: #8b959d;
  display: flex; align-items: center; justify-content: center;
}
.rc-nav-link { color: #5c636b; font-weight: 500; border-radius: 8px; font-size: 15px; }
.rc-nav-link:hover { background: #eef1f3; color: #2b3138; }
.rc-nav-link.active { background: var(--rc-accent); color: #fff; font-weight: 600; }
.rc-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--rc-accent); font-size: 14px; }

/* ---- Buttons ---- */
.btn { min-height: 42px; }
.btn-rc-accent { background: var(--rc-accent); color: #fff; font-weight: 600; }
.btn-rc-accent:hover, .btn-rc-accent:focus { background: var(--rc-accent-dark); color: #fff; }

/* ---- Status pills (colour + icon + word) ---- */
.rc-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 50rem; padding: .5rem 1rem; font-weight: 700; font-size: 14px; border: 1px solid;
}
.rc-pill-red   { background: var(--rc-red-bg);   color: var(--rc-red-tx);   border-color: var(--rc-red-bd); }
.rc-pill-amber { background: var(--rc-amber-bg); color: var(--rc-amber-tx); border-color: var(--rc-amber-bd); }
.rc-pill-green { background: var(--rc-green-bg); color: var(--rc-green-tx); border-color: var(--rc-green-bd); }
.rc-pill-grey  { background: #eef1f3;            color: #5c636b;            border-color: #dfe4e8; }

/* ---- Row cards ---- */
.rc-rowcard { background: #fff; border: 1px solid var(--rc-line); transition: box-shadow .15s ease; }
.rc-rowcard:hover { box-shadow: 0 2px 12px rgba(27,30,34,.09); }
.rc-rowcard.rc-red   { border-left: 6px solid var(--rc-red); }
.rc-rowcard.rc-amber { border-left: 6px solid var(--rc-amber); }
.rc-rowcard.rc-green { border-left: 6px solid var(--rc-green); }

/* ---- Icon boxes ---- */
.rc-iconbox {
  width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.rc-iconbox-red   { background: var(--rc-red-bg);   color: var(--rc-red); }
.rc-iconbox-amber { background: var(--rc-amber-bg); color: var(--rc-amber); }
.rc-iconbox-green { background: var(--rc-green-bg); color: var(--rc-green); }
.rc-iconbox-grey  { background: #eef1f3;            color: #5c636b; }

/* ---- Drill-grid child icon (node vs store) ---- */
.rc-child-icon {
  width: 38px; height: 38px; border-radius: 9px; font-size: 16px;
  background: #eef1f3; color: #5c636b;
}

/* ---- Escalation badge (shown under the status of a climbing overdue item) ---- */
.rc-esc {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .4rem; font-size: 12px; font-weight: 600; line-height: 1;
  padding: .2rem .5rem; border-radius: 6px;
  background: var(--rc-red-bg); color: var(--rc-red-tx); border: 1px solid var(--rc-red-bd);
}

/* ---- Section headings ---- */
.rc-section-title { font-size: 19px; font-weight: 700; margin: 0; }

/* ---- Cards (input forms) ---- */
.rc-card-header { background: var(--rc-accent); color: #fff; font-weight: 600; }

/* ---- Checkbox list (store tagging) ---- */
.rc-checklist label { margin-left: .4rem; font-size: 16px; }
.rc-checklist input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }
.rc-checklist td { padding: .35rem 1.25rem .35rem 0; }

/* ---- GridView styled as a Bootstrap table ---- */
.rc-grid { width: 100%; margin: 0; }
.rc-grid th {
  background: #f7f9fa; color: #5c636b; font-weight: 600; font-size: 14px;
  border-bottom: 1px solid var(--rc-line); padding: .75rem 1rem; text-align: left;
}
.rc-grid td { padding: .75rem 1rem; border-bottom: 1px solid #eef1f3; font-size: 15px; vertical-align: middle; }
.rc-grid tr:hover td { background: #f9fafb; }
.rc-grid .rc-grid-pager td { background: #fff; border-bottom: none; padding-top: 1rem; }
.rc-grid .rc-grid-pager a, .rc-grid .rc-grid-pager span {
  display: inline-block; padding: .25rem .6rem; margin: 0 .15rem; border-radius: 6px;
  text-decoration: none; color: var(--rc-accent); border: 1px solid var(--rc-line);
}
.rc-grid .rc-grid-pager span { background: var(--rc-accent); color: #fff; border-color: var(--rc-accent); }

/* =====================================================================
   Left sidebar shell (replaces the old top nav). Collapsed by default;
   the toggle expands it to show labels. Mobile-first: the collapsed rail
   is a slim icon strip that works on small screens too.
   ===================================================================== */
.rc-shell { display: flex; align-items: stretch; min-height: 100vh; }
.rc-sidebar {
  flex: 0 0 248px; width: 248px; background: #fff; border-right: 1px solid var(--rc-line);
  position: sticky; top: 0; height: 100vh; overflow-x: hidden; overflow-y: auto;
  display: flex; flex-direction: column; z-index: 30;
  transition: flex-basis .18s ease, width .18s ease;
}
.rc-shell.rc-collapsed .rc-sidebar { flex-basis: 70px; width: 70px; }

.rc-sidebar-head { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 14px 16px; border-bottom: 1px solid var(--rc-line); }
.rc-toggle { min-height: 40px; width: 40px; padding: 0; flex-shrink: 0; border: 1px solid var(--rc-line); background: #fff; color: #5c636b; border-radius: 8px; }
.rc-toggle:hover { background: #eef1f3; color: #2b3138; }

.rc-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; flex-grow: 1; }
.rc-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #5c636b; font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; }
.rc-sidebar-link:hover { background: #eef1f3; color: #2b3138; }
.rc-sidebar-link i { width: 22px; text-align: center; font-size: 18px; flex-shrink: 0; }

.rc-sidebar-user { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--rc-line); }
.rc-sidebar-user-top { display: flex; align-items: center; gap: 10px; }
.rc-user-text { line-height: 1.2; min-width: 0; flex: 1 1 auto; }
.rc-user-name { font-size: 14px; font-weight: 600; color: #2b3138; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-user-role { font-size: 12px; color: var(--rc-muted); white-space: nowrap; }
.rc-logout { margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; min-height: 26px; border: 1px solid var(--rc-line); border-radius: 6px; background: #fff; color: #5c636b; font-weight: 600; font-size: 12px; text-decoration: none; }
.rc-logout:hover { background: #eef1f3; color: #2b3138; }

.rc-main { flex: 1 1 auto; min-width: 0; }
.rc-content { width: 100%; max-width: 1280px; margin: 0 auto; }

/* Mobile-only chrome: hidden on desktop, switched on in the mobile query below. */
.rc-mobile-bar { display: none; }
.rc-backdrop { display: none; }

/* ---- Desktop (>= 768px): collapse to a slim icon rail ---- */
@media (min-width: 768px) {
  .rc-shell.rc-collapsed .rc-nav-text,
  .rc-shell.rc-collapsed .rc-brand-only,
  .rc-shell.rc-collapsed .rc-user-text { display: none; }
  .rc-shell.rc-collapsed .rc-sidebar-head { justify-content: center; padding-left: 0; padding-right: 0; }
  .rc-shell.rc-collapsed .rc-sidebar-link { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  .rc-shell.rc-collapsed .rc-sidebar-user { align-items: center; }
}

/* ---- Mobile (< 768px): the sidebar becomes an off-canvas drawer ---- */
@media (max-width: 767.98px) {
  /* Drawer: fixed, off-screen, slides in. Always full-width labels (never the rail). */
  .rc-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 270px; flex-basis: 270px;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 1045;
    box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  }
  .rc-shell.rc-collapsed .rc-sidebar { width: 270px; flex-basis: 270px; }
  .rc-shell.rc-mobile-open .rc-sidebar { transform: translateX(0); }

  /* Top bar with the hamburger that opens the drawer. */
  .rc-mobile-bar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20;
    background: #fff; border-bottom: 1px solid var(--rc-line); padding: 10px 14px; min-height: 60px;
  }

  /* Dimmed backdrop behind the open drawer; tap to close. */
  .rc-shell.rc-mobile-open .rc-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .42); z-index: 1040;
  }

  .rc-content { padding-left: 12px; padding-right: 12px; }

  /* ------------------------------------------------------------------
     Page-level mobile fixes
     ------------------------------------------------------------------ */

  /* Horizontally scroll GridViews instead of overflowing the page.
     All grids live inside .card-body.p-0 — this one rule covers every page. */
  .card-body.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hero sections (store/dashboard pages): reduce the 48-px column gap
     when the title and score panel wrap onto separate rows. */
  .rc-hero { gap: 16px !important; }

  /* Score panels go full-width when the hero flex row wraps on phones. */
  .rc-score-panel { flex: 0 0 100% !important; min-width: 0 !important; width: 100%; }

  /* Section-title + subtitle: allow the subtitle to wrap below the heading. */
  .rc-section-header { flex-wrap: wrap; }

  /* Small buttons: taller tap target on touch screens. */
  .btn-sm { min-height: 38px; padding-left: .65rem; padding-right: .65rem; }

  /* Signature canvas wrapper: don't overflow a narrow phone. */
  .rc-sig-wrap { overflow: hidden; }
  .rc-sig-wrap canvas { max-width: 100%; display: block; }

  /* Card-header action bars (search + buttons): wrap onto next line on phones. */
  .rc-card-actions { flex-wrap: wrap; width: 100%; }

  /* Card-header search/filter areas pushed to the right on desktop: on phones
     drop the auto-margin and let them fill the full row width instead. */
  .card-header .ms-auto { margin-left: 0 !important; width: 100%; }
  .card-header .ms-auto .form-control { flex: 1 1 auto; min-width: 0; }
}

/* ---- System Admin home: quick-action shortcut cards ---- */
.rc-quick { display: flex; padding: 12px; border: 1px solid var(--rc-line); border-radius: 12px; text-decoration: none; background: #fff; transition: background .12s ease, border-color .12s ease; }
.rc-quick:hover { background: #f7f9fa; border-color: #cdd5db; }
.rc-quick-ico { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #eef1f3; color: var(--rc-accent); font-size: 18px; }
.rc-quick-title { display: block; font-weight: 600; color: #2b3138; font-size: 15px; }
.rc-quick-sub { display: block; color: var(--rc-muted); font-size: 12px; }

/* ---- Section header divider (form builder + submit) ---- */
.rc-section-divider {
  font-size: 15px; font-weight: 700; color: var(--rc-accent);
  padding-bottom: .4rem; margin: 1.5rem 0 .75rem;
  border-bottom: 2px solid var(--rc-accent);
  letter-spacing: .01em;
}

/* ---- Org tree (Organisation.aspx) ---- */
.rc-org-tree-row {
  display: flex; align-items: center; gap: 12px;
  padding: .65rem 1rem; border-bottom: 1px solid #eef1f3; min-height: 54px;
  transition: background .1s ease;
}
.rc-org-tree-row:last-child { border-bottom: none; }
.rc-org-tree-row:hover { background: #f9fafb; }
.rc-org-tree-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}

/* ---- Toast notification system ---- */
.rc-toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .6rem;
  max-width: 380px; pointer-events: none;
}
.rc-toast {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .9rem 1.1rem 1rem; border-radius: 12px; border: 1px solid;
  box-shadow: 0 4px 24px rgba(0,0,0,.12); pointer-events: all;
  font-size: 15px; font-weight: 500; line-height: 1.45; position: relative;
  animation: rcToastIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes rcToastIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rc-toast.rc-toast-out { animation: rcToastOut .2s ease forwards; }
@keyframes rcToastOut  { to { opacity: 0; transform: translateY(8px); } }
.rc-toast-success { background: var(--rc-green-bg); color: var(--rc-green-tx); border-color: var(--rc-green-bd); }
.rc-toast-error   { background: var(--rc-red-bg);   color: var(--rc-red-tx);   border-color: var(--rc-red-bd); }
.rc-toast-warning { background: var(--rc-amber-bg); color: var(--rc-amber-tx); border-color: var(--rc-amber-bd); }
.rc-toast-info    { background: #eef1f3; color: #2b3138; border-color: #dfe4e8; }
.rc-toast-icon  { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.rc-toast-body  { flex: 1 1 auto; }
.rc-toast-close { background: none; border: none; cursor: pointer; opacity: .5; font-size: 14px; padding: 0; margin-left: .4rem; flex-shrink: 0; color: inherit; line-height: 1; }
.rc-toast-close:hover { opacity: 1; }
.rc-toast-bar {
  position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 12px 12px;
  background: currentColor; opacity: .22; animation: rcProgress linear forwards;
}
@keyframes rcProgress { from { width: 100%; } to { width: 0%; } }
@media (max-width: 767.98px) {
  .rc-toast-container { left: 1rem; right: 1rem; max-width: none; bottom: 1rem; }
}