/* =====================================================================
   SMART CONNECT PRO Review Portal - plugin styles
   Namespaced entirely under .scrp-* so nothing here leaks into the host
   theme or WordPress admin chrome. No Bootstrap dependency: grid/flex,
   modal, and toast are all hand-rolled so the shortcodes work inside
   any Elementor page regardless of what the active theme loads.
   ===================================================================== */
:root{
  --scrp-bg-deep:      #070B14;
  --scrp-bg-mid:       #0E1830;
  --scrp-surface:      rgba(255,255,255,0.045);
  --scrp-border:       rgba(255,255,255,0.09);
  --scrp-text:         #E9EDF5;
  --scrp-text-muted:   #8B94AA;
  --scrp-gold:         #C9A24B;
  --scrp-gold-soft:    #E4C57A;
  --scrp-emerald:      #2DD4A7;
  --scrp-coral:        #E2574C;
  --scrp-amber:        #F0B94B;
  --scrp-radius-lg: 20px;
  --scrp-radius-md: 14px;
  --scrp-font-display: 'Sora', sans-serif;
  --scrp-font-body: 'Inter', sans-serif;
}

/* ===================== Shared structural helpers ===================== */
.scrp-row{ display:flex; flex-wrap:wrap; gap:1rem; margin:0; }
.scrp-mb{ margin-bottom:1.5rem; }
.scrp-hidden{ display:none !important; }
.scrp-flex-between{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; margin-bottom:1rem; }

/* ===================== FRONT-END (dark glass theme) ===================== */
.scrp-portal{
  font-family: var(--scrp-font-body);
  color: var(--scrp-text);
  background: radial-gradient(900px 500px at 15% -10%, #16234A 0%, var(--scrp-bg-mid) 45%, var(--scrp-bg-deep) 100%);
  border-radius: 24px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  box-sizing: border-box;
}
.scrp-portal *{ box-sizing: border-box; }
.scrp-portal h1, .scrp-portal h2, .scrp-portal h3, .scrp-portal h4, .scrp-portal h5, .scrp-portal h6{
  font-family: var(--scrp-font-display); color: var(--scrp-text); margin: 0 0 0.5rem;
}

.scrp-glass{
  background: linear-gradient(180deg, var(--scrp-surface), rgba(255,255,255,0.02));
  border: 1px solid var(--scrp-border);
  border-radius: var(--scrp-radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  padding: 1.5rem;
}

/* Search bar */
.scrp-search-bar .scrp-row{ align-items:center; }
.scrp-col-search{ flex: 2 1 260px; }
.scrp-col-filter{ flex: 1 1 160px; }
.scrp-col-count{ flex: 0 0 auto; margin-left:auto; }
.scrp-input-group{
  display:flex; align-items:center; gap:0.6rem; background: rgba(255,255,255,0.04);
  border:1px solid var(--scrp-border); border-radius:10px; padding:0.55rem 0.9rem;
}
.scrp-input-group i{ color: var(--scrp-text-muted); }
.scrp-input-group input{ background:transparent; border:none; outline:none; color: var(--scrp-text); width:100%; font-family:inherit; }
.scrp-portal select, .scrp-portal input[type=text], .scrp-portal input[type=email],
.scrp-portal input[type=tel], .scrp-portal input[type=date], .scrp-portal input[type=time],
.scrp-portal textarea{
  width:100%; background: rgba(255,255,255,0.04); border:1px solid var(--scrp-border);
  color: var(--scrp-text); border-radius:10px; padding:0.6rem 0.85rem; font-family:inherit; font-size:0.95rem;
}
.scrp-portal select:focus, .scrp-portal input:focus, .scrp-portal textarea:focus{
  outline:none; border-color: var(--scrp-gold); box-shadow: 0 0 0 3px rgba(201,162,75,0.18);
}
/* The closed <select> box sits on our dark background, so it needs light
   text -- but the open dropdown list is drawn by the browser/OS with its
   own (usually white) background, and options inherit that same light
   text color, making names unreadable against it. Force dark, high-contrast
   text specifically on <option> elements to fix this. */
.scrp-portal select option{
  color: #1a1a1a;
  background: #ffffff;
}
.scrp-badge{ background: rgba(201,162,75,0.16); color: var(--scrp-gold-soft); padding:0.5rem 0.9rem; border-radius:999px; font-weight:600; font-size:0.85rem; white-space:nowrap; }

/* Rep grid */
.scrp-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:1.25rem; }
.scrp-rep-card{
  position:relative; text-align:center; padding:1.75rem 1.25rem 1.4rem; background: linear-gradient(180deg, var(--scrp-surface), rgba(255,255,255,0.02));
  border:1px solid var(--scrp-border); border-radius: var(--scrp-radius-lg); transition: transform .25s ease, box-shadow .25s ease;
}
.scrp-rep-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 60px -18px rgba(201,162,75,0.25); }
.scrp-rep-card__photo{ width:88px; height:88px; margin:0 auto 0.9rem; border-radius:50%; overflow:hidden; border:3px solid var(--scrp-gold); box-shadow:0 0 0 4px rgba(201,162,75,0.15); }
.scrp-rep-card__photo img{ width:100%; height:100%; object-fit:cover; }
.scrp-rep-card__name{ font-size:1.05rem; margin-bottom:0.15rem; color: var(--scrp-text); }
.scrp-rep-card__position{ color: var(--scrp-gold-soft); font-size:0.82rem; margin-bottom:0.15rem; }
.scrp-rep-card__company{ color: var(--scrp-text-muted); font-size:0.82rem; margin-bottom:0.9rem; }
.scrp-rep-card__contact{ display:flex; flex-direction:column; gap:0.5rem; align-items:center; }
.scrp-rep-card__contact a{
  color: var(--scrp-text); text-decoration:none; font-size:0.88rem; display:inline-flex; align-items:center; gap:0.5rem;
  transition: color .15s ease;
}
.scrp-rep-card__contact a i{ color: var(--scrp-gold); width:16px; }
.scrp-rep-card__contact a:hover{ color: var(--scrp-gold-soft); }
.scrp-action-btn{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--scrp-border); display:flex; align-items:center; justify-content:center;
  color: var(--scrp-text); background: rgba(255,255,255,0.03); cursor:pointer; text-decoration:none; transition: all .2s ease;
}
.scrp-action-btn:hover{ background: var(--scrp-gold); color:#0B1220; border-color: var(--scrp-gold); }
.scrp-empty-state{ text-align:center; color: var(--scrp-text-muted); padding:3rem 1rem; }
.scrp-empty-state i{ font-size:2.2rem; margin-bottom:0.8rem; display:block; color: var(--scrp-gold-soft); }

/* Review form */
.scrp-review-form{ padding:2rem; max-width:820px; margin:0 auto; }
.scrp-section-title{ color: var(--scrp-gold-soft); margin:1.2rem 0 1rem; font-size:1rem; }
.scrp-req{ color: var(--scrp-coral); }
.scrp-form-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; margin-bottom:1.5rem; }
.scrp-field{ display:flex; flex-direction:column; gap:0.35rem; }
.scrp-field--full{ grid-column: 1 / -1; }
.scrp-field label{ color: var(--scrp-text-muted); font-weight:600; font-size:0.85rem; }
.scrp-rating-row{ margin-bottom:0.9rem; }
.scrp-rating-row label{ display:block; margin-bottom:0.4rem; }
.scrp-star-rating{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:0.15rem; font-size:1.6rem; }
.scrp-star-rating input{ display:none; }
.scrp-star-rating label{ color: rgba(255,255,255,0.18); cursor:pointer; transition: color .15s ease; margin:0; }
.scrp-star-rating input:checked ~ label, .scrp-star-rating label:hover, .scrp-star-rating label:hover ~ label{ color: var(--scrp-gold); }
.scrp-btn-submit{
  width:100%; background: linear-gradient(135deg, var(--scrp-gold), var(--scrp-amber)); color:#0B1220; font-weight:700;
  border:none; padding:0.9rem; border-radius:999px; cursor:pointer; font-size:1rem; transition: transform .15s ease, box-shadow .2s ease;
}
.scrp-btn-submit:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(201,162,75,0.55); }
.scrp-btn-submit:disabled{ opacity:0.7; cursor:not-allowed; }
.scrp-success-panel{ text-align:center; padding:3rem 2rem; max-width:820px; margin:1.5rem auto 0; }
.scrp-success-panel i{ font-size:3rem; color: var(--scrp-emerald); margin-bottom:1rem; display:block; }

/* Digital business card modal (hand-rolled, no Bootstrap JS) */
.scrp-modal-overlay{
  display:none; position:fixed; inset:0; background: rgba(4,7,14,0.7); backdrop-filter: blur(4px);
  align-items:center; justify-content:center; z-index:99999; padding:1rem;
}
.scrp-modal-overlay.scrp-open{ display:flex; }
.scrp-modal{
  background: linear-gradient(160deg, #101A30, #0B1220); border:1px solid var(--scrp-border); border-radius: var(--scrp-radius-lg);
  color: var(--scrp-text); padding:1.75rem; width:100%; max-width:420px; position:relative;
}
.scrp-modal-close{ position:absolute; top:12px; right:14px; background:none; border:none; color: var(--scrp-text-muted); font-size:1.2rem; cursor:pointer; }

/* Toasts */
.scrp-toast-container{ position:fixed; bottom:20px; right:20px; z-index:100000; display:flex; flex-direction:column; gap:0.6rem; }
.scrp-toast{
  background: var(--scrp-bg-mid); color: var(--scrp-text); border:1px solid var(--scrp-border); border-radius:10px;
  padding:0.8rem 1.1rem; min-width:260px; box-shadow:0 14px 30px -12px rgba(0,0,0,0.5);
  animation: scrp-toast-in .25s ease;
}
.scrp-toast.scrp-error{ border-color: rgba(226,87,76,0.4); }
@keyframes scrp-toast-in{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

/* ===================== ADMIN DASHBOARD (light, WP-native theme) ===================== */
.scrp-dashboard{ font-family: var(--scrp-font-body); }
.scrp-dashboard .scrp-admin-title{ display:flex; align-items:center; gap:0.6rem; font-family: var(--scrp-font-display); }
.scrp-dashboard .scrp-admin-title i{ color: var(--scrp-gold); }
.scrp-dashboard .scrp-admin-sub{ color:#646970; margin-bottom:1.5rem; }
.scrp-dashboard .scrp-glass{
  background:#fff; border:1px solid #dcdcde; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.06);
  padding:1.25rem; margin-bottom:1.5rem; backdrop-filter:none;
}
.scrp-dashboard h6{ color:#1d2327; font-family: var(--scrp-font-display); margin:0 0 1rem; display:flex; align-items:center; gap:0.5rem; }
.scrp-dashboard h6 i{ color: var(--scrp-gold); }
.scrp-filter-grid{ align-items:flex-end; }
.scrp-filter-grid .scrp-field{ flex:1 1 160px; display:flex; flex-direction:column; gap:0.3rem; }
.scrp-filter-grid .scrp-field label{ font-size:0.8rem; color:#646970; font-weight:600; }
.scrp-field-actions{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-left:auto; align-items:flex-end; }
.scrp-kpi-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin-bottom:1.5rem; }
.scrp-kpi-card{ background:#fff; border:1px solid #dcdcde; border-radius:12px; padding:1.1rem 1.25rem; box-shadow:0 1px 3px rgba(0,0,0,0.06); position:relative; }
.scrp-kpi-label{ color:#646970; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; }
.scrp-kpi-value{ font-family: var(--scrp-font-display); font-size:1.6rem; font-weight:800; margin-top:0.25rem; color:#1d2327; }
.scrp-kpi-icon{ position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.scrp-chart-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.25rem; }
.scrp-chart-card canvas{ max-width:100%; }
.scrp-leaderboard-table img{ vertical-align:middle; margin-right:0.5rem; border-radius:50%; }
.scrp-badge-pill{ background: rgba(201,162,75,0.15); color:#8a6d1f; border-radius:999px; padding:0.25rem 0.65rem; font-size:0.72rem; margin-right:0.25rem; display:inline-block; }
.scrp-sentiment-positive{ background: rgba(45,212,167,0.16); color:#0d6b52; }
.scrp-sentiment-neutral{ background: rgba(240,185,75,0.2); color:#8a6d1f; }
.scrp-sentiment-negative{ background: rgba(226,87,76,0.16); color:#a3352c; }
.scrp-alert-list{ display:flex; flex-direction:column; gap:0.6rem; }
.scrp-alert-card{ display:flex; align-items:flex-start; justify-content:space-between; gap:0.8rem; border-left:3px solid var(--scrp-coral); padding:0.8rem 1rem; background:#fff8f7; border-radius:0 8px 8px 0; }
.scrp-alert-card__body{ flex:1; }
.scrp-alert-dismiss{
  flex-shrink:0; width:26px; height:26px; border-radius:8px; border:1px solid rgba(226,87,76,0.35); background:transparent;
  color: var(--scrp-coral); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: all .15s ease;
}
.scrp-alert-dismiss:hover{ background: var(--scrp-coral); color:#fff; }
.scrp-rep-detail-header{ display:flex; align-items:center; gap:1.4rem; }
.scrp-rep-detail-header img{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--scrp-gold); }
.scrp-rating-value{ font-weight:700; }
.scrp-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.scrp-admin-form .scrp-form-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; margin-bottom:1rem; }
.scrp-admin-form .scrp-field label{ display:block; font-weight:600; margin-bottom:0.3rem; color:#1d2327; }
.scrp-admin-form input, .scrp-admin-form select{ width:100%; }

/* Print */
@media print{
  .scrp-dashboard .scrp-field-actions, .scrp-dashboard select#leaderboardSort { display:none !important; }
  .scrp-dashboard .scrp-leaderboard-table,
  .scrp-manager-dashboard .scrp-leaderboard-table{
    font-size: 0.72rem;
    table-layout: auto;
    width: 100%;
  }
  .scrp-dashboard .scrp-leaderboard-table th,
  .scrp-dashboard .scrp-leaderboard-table td,
  .scrp-manager-dashboard .scrp-leaderboard-table th,
  .scrp-manager-dashboard .scrp-leaderboard-table td{
    white-space: normal;
    word-break: break-word;
    padding: 4px 6px;
  }
}

/* ===================== FRONT-END MANAGER DASHBOARD (dark theme) =====================
   Same structural classes as the wp-admin dashboard above (.scrp-kpi-card,
   .scrp-chart-card, .scrp-leaderboard-table, etc.) get re-themed here when
   they're inside the front-end .scrp-portal wrapper instead of .scrp-dashboard,
   so the manager dashboard shortcode matches the dark/gold brand instead of
   wp-admin's light UI. */
.scrp-portal .scrp-kpi-card{ background: linear-gradient(180deg, var(--scrp-surface), rgba(255,255,255,0.02)); border:1px solid var(--scrp-border); box-shadow:none; }
.scrp-portal .scrp-kpi-label{ color: var(--scrp-text-muted); }
.scrp-portal .scrp-kpi-value{ color: var(--scrp-text); }
.scrp-portal .scrp-chart-card h6, .scrp-portal h6{ color: var(--scrp-gold-soft); }
.scrp-portal .scrp-leaderboard-table{ color: var(--scrp-text); }
.scrp-portal .scrp-leaderboard-table th{ text-align:left; color: var(--scrp-text-muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; padding:0.6rem 0.5rem; border-bottom:1px solid var(--scrp-border); }
.scrp-portal .scrp-leaderboard-table td{ padding:0.6rem 0.5rem; border-bottom:1px solid rgba(255,255,255,0.06); vertical-align:middle; }
.scrp-portal .scrp-badge-pill{ background: rgba(201,162,75,0.16); color: var(--scrp-gold-soft); }
.scrp-portal .scrp-sentiment-positive{ background: rgba(45,212,167,0.16); color: var(--scrp-emerald); }
.scrp-portal .scrp-sentiment-neutral{ background: rgba(240,185,75,0.16); color: var(--scrp-amber); }
.scrp-portal .scrp-sentiment-negative{ background: rgba(226,87,76,0.16); color: var(--scrp-coral); }
.scrp-portal .scrp-alert-card{ background: rgba(226,87,76,0.08); border-left:3px solid var(--scrp-coral); }
.scrp-portal .scrp-rep-detail-header{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1rem; }
.scrp-portal .scrp-rep-detail-header img{ width:76px; height:76px; border-radius:50%; object-fit:cover; border:3px solid var(--scrp-gold); }

/* Native date/time picker icons default to a dark grey that's invisible
   against our dark input backgrounds -- invert them to white. Covers both
   the review form's appointment fields and the dashboard's From/To filters. */
.scrp-portal input[type=date]::-webkit-calendar-picker-indicator,
.scrp-portal input[type=time]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  cursor: pointer;
}

/* Some host themes ship a global "table td { color: ... }" rule that can
   override our text color by source order -- force the leaderboard's
   representative name to stay legible regardless. */
.scrp-portal .scrp-leaderboard-table td,
.scrp-portal .scrp-leaderboard-table .scrp-rep-name{
  color: var(--scrp-text) !important;
}

.scrp-manager-identity{ display:flex; align-items:center; gap:0.9rem; }
.scrp-manager-photo{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--scrp-gold); }

.scrp-login-card{ max-width:420px; margin:0 auto; text-align:center; padding:2.2rem; }
.scrp-login-card h2{ font-size:1.35rem; margin-bottom:0.3rem; }
.scrp-login-card form{ text-align:left; margin-top:1.2rem; }
.scrp-login-error{ background: rgba(226,87,76,0.12); border:1px solid rgba(226,87,76,0.35); color:#ffb4ac; border-radius:10px; padding:0.7rem 1rem; margin-top:1rem; font-size:0.88rem; }
.scrp-manager-dashboard .scrp-action-btn{ text-decoration:none; }

/* Responsive */
@media (max-width: 782px){
  .scrp-form-grid, .scrp-chart-grid, .scrp-two-col, .scrp-admin-form .scrp-form-grid{ grid-template-columns: 1fr; }
  .scrp-col-count{ margin-left:0; }
}