/* =============================================================================
   ReviewCore — Application theme
   Clean, professional, minimal SaaS UI.
   ============================================================================= */

:root {
  --rc-primary: #4f46e5;
  --rc-primary-dark: #4338ca;
  --rc-sidebar-bg: #1e1b4b;
  --rc-sidebar-width: 260px;
  --rc-topbar-height: 60px;
  --rc-body-bg: #f4f5fb;
  --rc-danger: #dc3545;
  --rc-ease: cubic-bezier(.22, .61, .36, 1);
}

body {
  background: var(--rc-body-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1f2937;
}

/* ---------- Soft motion (replaces animate.css) ---------- */
@keyframes rcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rcFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rcFadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rc-fade-in {
  animation: rcFadeIn .5s var(--rc-ease) both;
}
.rc-fade-up {
  animation: rcFadeUp .55s var(--rc-ease) both;
}
.rc-fade-down {
  animation: rcFadeDown .45s var(--rc-ease) both;
}

/* Gentle content entrance */
.app-content > * {
  animation: rcFadeUp .4s var(--rc-ease) both;
}

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

/* ---------- Smooth transitions on interactive surfaces ---------- */
a, button, .btn { transition: color .18s var(--rc-ease), background-color .18s var(--rc-ease), border-color .18s var(--rc-ease), box-shadow .18s var(--rc-ease), transform .18s var(--rc-ease); }
.btn:active { transform: translateY(1px); }

.stat-card, .panel-card {
  transition: box-shadow .22s var(--rc-ease), transform .22s var(--rc-ease), border-color .22s var(--rc-ease);
}
.stat-card:hover, .panel-card:hover {
  border-color: #e2e5f0;
  box-shadow: 0 8px 26px rgba(31, 41, 55, .07);
}
.stat-card:hover { transform: translateY(-2px); }

/* ---------- Auth / public pages ---------- */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 36px;
}
.auth-brand {
  text-align: center;
  margin-bottom: 24px;
}
.auth-brand .logo {
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--rc-primary);
}
.auth-brand .tagline {
  color: #6b7280;
  font-size: .9rem;
}

/* ---------- App shell ---------- */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rc-sidebar-width);
  background: var(--rc-sidebar-bg);
  color: #c7d2fe;
  overflow-y: auto;
  z-index: 1040;
  transition: margin-left .25s ease;
}
.app-sidebar .brand {
  height: var(--rc-topbar-height);
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.app-sidebar .nav-section {
  padding: 14px 20px 6px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #818cf8;
}
.app-sidebar .nav-link {
  color: #c7d2fe;
  padding: 9px 20px;
  border-radius: 0;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-sidebar .nav-link i { width: 18px; text-align: center; }
.app-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.app-sidebar .nav-link.active { color: #fff; background: var(--rc-primary); }

.app-main {
  margin-left: var(--rc-sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.app-topbar {
  height: var(--rc-topbar-height);
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.app-topbar .dropdown-toggle::after { display: none; }

.app-content {
  flex: 1;
  padding: 24px;
}

/* Footer */
.app-footer {
  padding: 14px 24px;
  color: #6b7280;
  font-size: .85rem;
  border-top: 1px solid #e5e7eb;
}

/* ---------- Cards / stat boxes ---------- */
.stat-card {
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 12px;
  padding: 20px;
  height: 100%;
}
.stat-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.stat-card .value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.stat-card .label { color: #6b7280; font-size: .85rem; }

.panel-card {
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 12px;
}
.panel-card .panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eef0f6;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-card .panel-body { padding: 20px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb-wrap { margin-bottom: 20px; }
.breadcrumb-wrap .breadcrumb {
  margin: 0;
  background: transparent;
  padding: 0;
  font-size: .9rem;
}

/* ---------- Utility ---------- */
.cursor-pointer { cursor: pointer; }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* Loading overlay */
#rc-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
#rc-loading-overlay.show { display: flex; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .app-sidebar { margin-left: calc(-1 * var(--rc-sidebar-width)); }
  .app-sidebar.open { margin-left: 0; }
  .app-main { margin-left: 0; }
}

/* Public card tracking page */
.public-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  padding: 24px;
  text-align: center;
}
.public-page .box {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  max-width: 480px;
  width: 100%;
}

/* ---------- Parsley validation (Indonesian, red errors) ---------- */
.parsley-errors-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: .82rem;
}
.parsley-errors-list li {
  color: var(--rc-danger);
  display: flex;
  align-items: center;
  gap: 6px;
}
.parsley-errors-list li::before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .8rem;
  flex-shrink: 0;
}
.parsley-errors-list.filled {
  animation: rcFadeDown .3s var(--rc-ease) both;
}

/* Invalid field state */
.parsley-error {
  border-color: var(--rc-danger) !important;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .12) !important;
}
.parsley-error:focus {
  border-color: var(--rc-danger) !important;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .2) !important;
}
.form-control.parsley-error,
.form-select.parsley-error,
.select2-container .select2-selection.parsley-error {
  border-color: var(--rc-danger) !important;
}
.parsley-success {
  border-color: #198754 !important;
}

/* ============================================================================
   ReviewCore visual refresh — Admina-inspired layout with Google Review colors
   UI-only layer: no business logic or component markup contract is changed.
   ============================================================================ */
:root {
  --rc-primary: #4285f4;
  --rc-primary-dark: #1a73e8;
  --rc-primary-soft: #e8f0fe;
  --rc-sidebar-bg: #ffffff;
  --rc-sidebar-width: 248px;
  --rc-topbar-height: 72px;
  --rc-body-bg: #f5f7fb;
  --rc-ink: #1f2937;
  --rc-muted: #6b7280;
  --rc-border: #edf0f5;
  --rc-shadow: 0 8px 28px rgba(31, 41, 55, .055);
  --rc-green: #34a853;
  --rc-yellow: #fbbc05;
  --rc-red: #ea4335;
}

html { background: var(--rc-body-bg); }
body {
  background: var(--rc-body-bg);
  color: var(--rc-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .92rem;
  letter-spacing: .005em;
}

/* Admin shell */
.app-sidebar {
  background: var(--rc-sidebar-bg);
  color: #64748b;
  border-right: 1px solid var(--rc-border);
  box-shadow: 8px 0 30px rgba(31, 41, 55, .025);
  scrollbar-width: thin;
  scrollbar-color: #d8dee9 transparent;
}
.app-sidebar .brand {
  height: var(--rc-topbar-height);
  padding: 0 24px;
  gap: 11px;
  border-bottom: 1px solid var(--rc-border);
  color: #1f2937;
}
.app-sidebar .brand-mark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--rc-primary), #7c4dff);
  box-shadow: 0 6px 14px rgba(66, 133, 244, .24);
  font-size: .9rem;
}
.app-sidebar .brand-copy { display: flex; flex-direction: column; line-height: 1; }
.app-sidebar .brand-copy strong { font-size: 1.05rem; letter-spacing: -.03em; color: #172554; }
.app-sidebar .brand-copy strong span { color: var(--rc-primary); }
.app-sidebar .brand-copy small { margin-top: 5px; color: #9aa4b2; font-size: .52rem; font-weight: 800; letter-spacing: .16em; }
.app-sidebar .nav-section {
  padding: 22px 24px 8px;
  color: #9aa4b2;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.app-sidebar .nav-link {
  position: relative;
  margin: 2px 12px;
  padding: 11px 13px;
  border-radius: 10px;
  color: #667085;
  font-size: .86rem;
  font-weight: 500;
  gap: 12px;
}
.app-sidebar .nav-link i { width: 18px; color: #94a3b8; font-size: .95rem; }
.app-sidebar .nav-link:hover { color: var(--rc-primary-dark); background: #f7faff; }
.app-sidebar .nav-link:hover i { color: var(--rc-primary); }
.app-sidebar .nav-link.active {
  color: var(--rc-primary-dark);
  background: var(--rc-primary-soft);
  font-weight: 700;
}
.app-sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--rc-primary);
}
.app-sidebar .nav-link.active i { color: var(--rc-primary); }
.app-main { margin-left: var(--rc-sidebar-width); }
.app-topbar {
  height: var(--rc-topbar-height);
  padding: 0 28px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--rc-border);
  box-shadow: 0 4px 18px rgba(31, 41, 55, .025);
  backdrop-filter: blur(12px);
}
.topbar-search {
  width: min(370px, 36vw);
  height: 40px;
  gap: 9px;
  padding: 0 12px;
  color: #9aa4b2;
  background: #f7f9fc;
  border: 1px solid #eef1f6;
  border-radius: 10px;
}
.topbar-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #344054; font-size: .82rem; }
.topbar-search kbd { color: #98a2b3; background: #fff; border: 1px solid #e5e7eb; border-radius: 5px; font-size: .65rem; padding: 2px 5px; }
.app-topbar .btn-light { background: #f7f9fc; border-color: #eef1f6; color: #64748b; border-radius: 10px; }
.app-topbar .btn-light:hover { color: var(--rc-primary); background: var(--rc-primary-soft); border-color: #d8e6ff; }
.app-content { padding: 30px; }
.breadcrumb-wrap { margin-bottom: 26px; }
.breadcrumb-wrap h4 { color: #172554; font-weight: 750; letter-spacing: -.02em; }
.breadcrumb-wrap .breadcrumb { color: #98a2b3; font-size: .78rem; }
.breadcrumb-item + .breadcrumb-item::before { color: #c5ccd7; }
.breadcrumb-item.active { color: #667085; }
.breadcrumb-item a { color: var(--rc-primary); text-decoration: none; }
.app-footer { padding: 18px 30px; background: transparent; border-top: 1px solid var(--rc-border); color: #98a2b3; font-size: .76rem; }

/* Dashboard surfaces */
.stat-card, .panel-card {
  border: 1px solid var(--rc-border);
  border-radius: 16px;
  box-shadow: var(--rc-shadow);
}
.stat-card { padding: 21px; }
.stat-card:hover, .panel-card:hover { border-color: #dce6f4; box-shadow: 0 12px 34px rgba(31, 41, 55, .08); }
.stat-card .icon { border-radius: 13px; }
.stat-card .value { color: #172554; font-size: 1.55rem; letter-spacing: -.03em; }
.stat-card .label { color: #8993a4; font-size: .78rem; font-weight: 500; }
.panel-card .panel-header { padding: 17px 20px; border-bottom-color: var(--rc-border); color: #172554; font-size: .9rem; }
.panel-card .panel-body { padding: 21px; }
.panel-card .table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-color: #f0f2f6; padding: .82rem .9rem; }
.table thead th { color: #98a2b3; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.table-light { --bs-table-bg: #f8fafc; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f8fbff; }
.form-control, .form-select { border-color: #e5e9f0; border-radius: 10px; color: #344054; padding: .62rem .78rem; font-size: .86rem; }
.form-control:focus, .form-select:focus { border-color: #8bb8ff; box-shadow: 0 0 0 .2rem rgba(66, 133, 244, .13); }
.form-label { color: #475467; font-size: .79rem; font-weight: 650; }
.btn { border-radius: 9px; font-weight: 650; font-size: .82rem; }
.btn-primary { --bs-btn-bg: var(--rc-primary); --bs-btn-border-color: var(--rc-primary); --bs-btn-hover-bg: var(--rc-primary-dark); --bs-btn-hover-border-color: var(--rc-primary-dark); box-shadow: 0 5px 12px rgba(66, 133, 244, .16); }
.btn-outline-primary { --bs-btn-color: var(--rc-primary-dark); --bs-btn-border-color: #b8d2fb; --bs-btn-hover-bg: var(--rc-primary-soft); --bs-btn-hover-color: var(--rc-primary-dark); --bs-btn-hover-border-color: #9ec2fa; }
.btn-success { --bs-btn-bg: var(--rc-green); --bs-btn-border-color: var(--rc-green); --bs-btn-hover-bg: #218838; --bs-btn-hover-border-color: #218838; }
.badge { border-radius: 999px; padding: .42em .72em; font-weight: 700; letter-spacing: .01em; }
.alert { border: 0; border-radius: 12px; }
.dropdown-menu { border: 1px solid var(--rc-border); border-radius: 12px; box-shadow: 0 14px 34px rgba(31, 41, 55, .12) !important; padding: 8px; }
.dropdown-item { border-radius: 7px; font-size: .82rem; }
.dropdown-item:hover { color: var(--rc-primary-dark); background: var(--rc-primary-soft); }

/* Google color utility accents */
.bg-primary-subtle { background-color: #e8f0fe !important; }
.text-primary { color: var(--rc-primary-dark) !important; }
.bg-success-subtle { background-color: #e6f4ea !important; }
.text-success { color: #188038 !important; }
.bg-warning-subtle { background-color: #fef7e0 !important; }
.text-warning { color: #b06000 !important; }
.bg-danger-subtle { background-color: #fce8e6 !important; }
.text-danger { color: #c5221f !important; }
.bg-info-subtle { background-color: #e8f0fe !important; }
.text-info { color: #1967d2 !important; }

@media (max-width: 991.98px) {
  .app-sidebar { box-shadow: 12px 0 35px rgba(15, 23, 42, .16); }
  .app-content { padding: 22px 18px; }
  .app-topbar { padding: 0 18px; }
}

/* Public card pages keep the same Google color language. */
.public-page { background: linear-gradient(135deg, #4285f4 0%, #6d5dfc 52%, #34a853 140%); }
.public-page .box { border-radius: 20px; box-shadow: 0 20px 55px rgba(23, 37, 84, .2); }

.rc-dashboard-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: 27px 30px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(120deg, #1a73e8 0%, #4285f4 58%, #34a853 145%);
  box-shadow: 0 14px 32px rgba(66, 133, 244, .18);
}
.rc-dashboard-hero::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  right: 10%;
  top: -150px;
  border: 28px solid rgba(255,255,255,.1);
  border-radius: 50%;
}
.rc-dashboard-hero > * { position: relative; z-index: 1; }
.rc-dashboard-kicker { font-size: .62rem; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.72); }
.rc-dashboard-hero h2 { margin: 5px 0 6px; color: #fff; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; }
.rc-dashboard-hero p { margin: 0; color: rgba(255,255,255,.82); font-size: .83rem; }
.rc-dashboard-hero .btn-light { color: #1967d2; border: 0; }
.rc-dashboard-hero .btn-outline-light { border-color: rgba(255,255,255,.55); }
@media (max-width: 767.98px) { .rc-dashboard-hero { align-items: flex-start; flex-direction: column; padding: 23px; } }