/* RPA visual system derived from the public 401krpa.com identity and logo. */
:root {
  --rpa-navy: #1b2b3d;
  --rpa-navy-2: #243b53;
  --rpa-blue: #0f75bc;
  --rpa-cyan: #25aae1;
  --rpa-teal: #59b3b1;
  --rpa-lime: #8cc63f;
  --rpa-magenta: #9f1f63;
  --rpa-purple: #87487d;
  --rpa-orange: #f15a2a;
  --rpa-amber: #fcb040;
  --rpa-field: #f4f7fa;
  --rpa-card: #ffffff;
  --rpa-line: #dce5ed;
  --rpa-line-strong: #c6d3df;
  --rpa-ink: #1b2b3d;
  --rpa-soft: #526273;
  --rpa-faint: #7c8b99;

  /* Compatibility aliases used by the cloned applications. */
  --orange: var(--rpa-blue);
  --orange-dark: #0b5689;
  --orange-bright: var(--rpa-cyan);
  --orange-light: #eaf6fc;
  --orange-tint: rgba(15, 117, 188, .09);
  --peach: #ccebf8;
  --mint: var(--rpa-teal);
  --mint-deep: #317f80;
  --mint-light: #bfe9e7;
  --field: var(--rpa-field);
  --card: var(--rpa-card);
  --line: var(--rpa-line);
  --line-strong: var(--rpa-line-strong);
  --ink: var(--rpa-ink);
  --soft: var(--rpa-soft);
  --faint: var(--rpa-faint);
  --green: #34865d;
  --green-light: #ebf8f1;

  --admin-primary: var(--rpa-blue);
  --admin-primary-dark: #0b5689;
  --admin-primary-light: #eaf6fc;
  --sidebar-bg: var(--rpa-navy);
  --sidebar-hover: var(--rpa-navy-2);
  --main-bg: var(--rpa-field);
  --card-bg: var(--rpa-card);
  --text-dark: var(--rpa-ink);
  --text-muted: var(--rpa-soft);
  --border-color: var(--rpa-line);
  --info: var(--rpa-blue);
}

.rpa-portal,
.rpa-annual-admin,
.rpa-dashboard,
.rpa-notify {
  font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--rpa-ink);
  background: var(--rpa-field);
}

.rpa-portal h1, .rpa-portal h2, .rpa-portal h3,
.rpa-annual-admin h1, .rpa-annual-admin h2, .rpa-annual-admin h3,
.rpa-dashboard h1, .rpa-dashboard h2, .rpa-dashboard h3,
.rpa-notify h1, .rpa-notify h2, .rpa-notify h3,
.rpa-portal .page-title,
.rpa-annual-admin .header-title,
.rpa-dashboard .page-title,
.rpa-notify .page-head h1 {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif !important;
}

/* Shared multicolor signature rule from the RPA logo palette. */
.rpa-portal .sig-bar::before,
.rpa-dashboard .sig-bar::before,
.rpa-notify .sig-bar::before {
  background: linear-gradient(90deg,
    var(--rpa-orange), var(--rpa-amber), var(--rpa-lime),
    var(--rpa-cyan), var(--rpa-blue), var(--rpa-purple),
    var(--rpa-magenta));
  background-size: 220% 100%;
}

/* ---------------- Portal ---------------- */
.rpa-portal .sidebar {
  background: linear-gradient(180deg, #162739 0%, var(--rpa-navy) 62%, #122231 100%);
  border-right: 0;
  box-shadow: 8px 0 28px rgba(17, 37, 56, .12);
}
.rpa-portal .rpa-logo {
  width: 184px;
  max-width: calc(100% - 10px);
  height: auto;
  margin: 0 5px 18px;
  object-fit: contain;
}
.rpa-portal .brand { border-top-color: rgba(255,255,255,.12); }
.rpa-portal .brand-name { color: #fff; letter-spacing: .08em; }
.rpa-portal .brand-sub { color: rgba(255,255,255,.58); }
.rpa-portal .nav a { color: rgba(255,255,255,.72); }
.rpa-portal .nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.rpa-portal .nav a.active {
  color: #fff;
  background: rgba(37,170,225,.17);
  box-shadow: inset 3px 0 0 var(--rpa-cyan);
}
.rpa-portal .topbar { box-shadow: 0 1px 0 var(--rpa-line); }
.rpa-portal .top-note b { color: var(--rpa-blue); }
.rpa-portal .hero-banner {
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(37,170,225,.22), transparent 30%),
    radial-gradient(circle at 96% 92%, rgba(159,31,99,.18), transparent 34%),
    linear-gradient(135deg, #15283a 0%, #203c55 100%);
  border-color: var(--rpa-navy);
  box-shadow: 0 18px 42px rgba(27,43,61,.20);
}
.rpa-portal .hero-banner .hb-tagline { color: #fff; }
.rpa-portal .hero-banner .hb-sub,
.rpa-portal .hero-banner .hb-motto { color: rgba(255,255,255,.78); }
.rpa-portal .hero-banner .hb-kicker {
  color: #fff;
  background: rgba(37,170,225,.18);
  border: 1px solid rgba(37,170,225,.38);
}
.rpa-portal .hero-banner .hb-motto b { color: var(--rpa-cyan); }
.rpa-portal .card,
.rpa-portal .panel,
.rpa-portal .plan-row,
.rpa-portal .al-kpi,
.rpa-portal .kpi {
  border-color: var(--rpa-line-strong);
  box-shadow: 0 10px 28px rgba(27,43,61,.08);
}
.rpa-portal a.card:hover,
.rpa-portal .plan-row:hover,
.rpa-portal .plan-row.open,
.rpa-portal .al-kpi:hover,
.rpa-portal .kpi:hover {
  border-color: var(--rpa-blue);
  box-shadow: 0 14px 34px rgba(15,117,188,.16);
}
.rpa-portal .card-ic,
.rpa-portal .btn.primary { background: linear-gradient(135deg, var(--rpa-blue), #0a5a91); }
.rpa-portal .btn.primary { box-shadow: 0 4px 0 #08456e; }
.rpa-portal footer { background: var(--rpa-navy); border-top-color: var(--rpa-cyan); }
.rpa-portal .foot-logo { max-height: 58px; width: auto; }
.rpa-portal .tagline em { color: var(--rpa-cyan); }

/* ---------------- Annual administration application ---------------- */
.rpa-annual-admin .sidebar {
  background: linear-gradient(180deg, #142538, var(--rpa-navy));
}
.rpa-annual-admin .logo-icon {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
  overflow: hidden;
  padding: 5px;
}
.rpa-annual-admin .logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.rpa-annual-admin .logo-text .app-name { color: #fff; font-size: 1.14rem; }
.rpa-annual-admin .logo-text .app-name span { color: var(--rpa-cyan); }
.rpa-annual-admin .section-title,
.rpa-annual-admin .sidebar-footer-text a,
.rpa-annual-admin .tagline-easy { color: var(--rpa-cyan); }
.rpa-annual-admin .action-card,
.rpa-annual-admin .btn-rpa,
.rpa-annual-admin .btn-rpa-large,
.rpa-annual-admin .btn-start-review,
.rpa-annual-admin .content-card-header,
.rpa-annual-admin .dashboard-section-header,
.rpa-annual-admin .modal-header,
.rpa-annual-admin .upload-card-header {
  background: linear-gradient(135deg, var(--rpa-blue), #0b5689);
}
.rpa-annual-admin .top-header { box-shadow: 0 1px 0 var(--rpa-line); }
.rpa-annual-admin .top-header .header-title h1,
.rpa-annual-admin .header-limit .limit-value,
.rpa-annual-admin .text-highlight { color: var(--rpa-blue); }
.rpa-annual-admin .tab-btn.active { background: var(--rpa-blue); box-shadow: 0 2px 10px rgba(15,117,188,.28); }
.rpa-annual-admin .content-card,
.rpa-annual-admin .dashboard-section,
.rpa-annual-admin .marketing-card,
.rpa-annual-admin .upload-card { box-shadow: 0 10px 30px rgba(27,43,61,.08); }
.rpa-annual-admin .logo-row { align-items: center; }

/* ---------------- Management dashboard ---------------- */
.rpa-dashboard #rpa-dash {
  --orange: var(--rpa-blue);
  --orange-dark: #0b5689;
  --orange-bright: var(--rpa-cyan);
  --peach: #ccebf8;
  --mint: var(--rpa-teal);
  --mint-deep: #317f80;
  --mint-light: #bfe9e7;
  --field: var(--rpa-field);
  --card: var(--rpa-card);
  --orange-light: #eaf6fc;
  --orange-tint: rgba(15,117,188,.08);
  --line: var(--rpa-line);
  --line-strong: var(--rpa-line-strong);
  --ink: var(--rpa-ink);
  --soft: var(--rpa-soft);
  --faint: var(--rpa-faint);
  --green: #34865d;
  --green-light: #ebf8f1;
}
.rpa-dashboard #rpa-dash .dash-bar {
  color: #fff;
  background: linear-gradient(135deg, #15283a, #203c55);
  border-bottom: 0;
}
.rpa-dashboard #rpa-dash .page-title,
.rpa-dashboard #rpa-dash .top-note { color: #fff; }
.rpa-dashboard #rpa-dash .top-note b,
.rpa-dashboard #rpa-dash .page-title span { color: var(--rpa-cyan); }
.rpa-dashboard #rpa-dash .yr,
.rpa-dashboard #rpa-dash .bell-btn { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.08); }
.rpa-dashboard #rpa-dash .panel,
.rpa-dashboard #rpa-dash .card,
.rpa-dashboard #rpa-dash .kpi { border-color: var(--rpa-line-strong); box-shadow: 0 10px 28px rgba(27,43,61,.08); }

/* ---------------- Notification center ---------------- */
.rpa-notify .topbar {
  color: #fff;
  background: linear-gradient(135deg, #15283a, #203c55);
  border-bottom: 0;
}
.rpa-notify .top-note, .rpa-notify .id-wrap .lbl { color: rgba(255,255,255,.68); }
.rpa-notify .top-note b { color: var(--rpa-cyan); }
.rpa-notify #idSelect,
.rpa-notify .bell-btn { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.rpa-notify .panel { border-color: var(--rpa-line-strong); box-shadow: 0 12px 34px rgba(27,43,61,.10); }
.rpa-notify .btn.primary { background: linear-gradient(135deg, var(--rpa-blue), #0b5689); box-shadow: 0 4px 0 #08456e; }
.rpa-notify footer { background: var(--rpa-navy); border-top-color: var(--rpa-cyan); }
.rpa-notify .tagline em { color: var(--rpa-cyan); }

/* Configuration notice */
.rpa-config-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 100000;
  width: min(760px, calc(100vw - 28px));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  color: #49320d;
  background: #fff7df;
  border: 1px solid #f1cf78;
  border-left: 5px solid var(--rpa-amber);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(27,43,61,.20);
  font: 12.5px/1.5 "Open Sans", sans-serif;
}
.rpa-config-banner div { flex: 1; }
.rpa-config-banner code { font-size: 11.5px; }
.rpa-config-banner button {
  border: 0;
  background: transparent;
  color: #79591d;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
}

@media (max-width: 760px) {
  .rpa-portal .rpa-logo { width: 126px; margin: 0; }
  .rpa-config-banner { bottom: 10px; }
}