* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Arial;
  background: linear-gradient(135deg, #061b22, #0e3b40);
  color: white;
}

.app {
  max-width: 500px;
  margin: auto;
  padding: 15px;
}

/* 🔥 Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0d2e33;
  padding: 15px;
  border-radius: 20px;
  margin-bottom: 15px;
}

.header h1 {
  color: #2eff6c;
}

.lang-btn {
  background: #2eff6c;
  border: none;
  padding: 10px 15px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
}

/* 👥 Group */
.group-container {
  margin-bottom: 15px;
}

.group-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #2eff6c, #16c85a);
  border: none;
  border-radius: 15px;
  font-weight: bold;
  cursor: pointer;
}

/* 🧭 Navigation */
.nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.nav button {
  flex: 1;
  margin: 0 3px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: #12373d;
  color: white;
  cursor: pointer;
}

/* 🧠 Content */
#content {
  margin-top: 10px;
}

.welcome {
  background: #0d2e33;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
}

/* 🟩 Cards */
.card {
  background: #0d2e33;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 10px;
}

.card h2 {
  margin-bottom: 10px;
  color: #2eff6c;
}

/* 🔲 Inputs */
input, select, textarea {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border-radius: 12px;
  border: none;
  background: #061f24;
  color: white;
}

/* 🔘 Buttons */
.primary-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #2eff6c, #16c85a);
  border: none;
  border-radius: 15px;
  margin-top: 15px;
  font-weight: bold;
  cursor: pointer;
}

.danger-btn {
  background: red;
  padding: 10px;
  border-radius: 10px;
  border: none;
  color: white;
  margin-top: 5px;
  width: 100%;
}

.warning-btn {
  background: orange;
  padding: 10px;
  border-radius: 10px;
  border: none;
  margin-top: 5px;
  width: 100%;
}

/* 👤 Client Card */
.client {
  background: #12373d;
  padding: 12px;
  border-radius: 12px;
  margin-top: 10px;
}

/* 🟢 Status */
.status {
  font-size: 12px;
  margin-top: 5px;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 10px;
  background: #061f24;
}

/* 💬 Chat */
.chat-box {
  height: 300px;
  overflow-y: auto;
  background: #061f24;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.msg {
  background: #12373d;
  padding: 8px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.me {
  background: #2eff6c;
  color: black;
}

.empty-state {
text-align: center;
color: #cfd8dc;
margin-top: 15px;
padding: 15px;
background: #061f24;
border-radius: 12px;
}

/* تحديثات احترافية */
.notice-box {
background: rgba(46, 255, 108, 0.12);
border: 1px solid rgba(46, 255, 108, 0.35);
padding: 12px;
border-radius: 14px;
margin-top: 12px;
line-height: 1.7;
}

.empty-state {
text-align: center;
padding: 16px;
color: #c8d6d8;
}

.client.expiring-soon {
border: 1px solid #ff4d4d;
box-shadow: 0 0 12px rgba(255, 77, 77, 0.25);
}

.client.expiring-week {
border: 1px solid #f1c40f;
box-shadow: 0 0 12px rgba(241, 196, 15, 0.18);
}

.status-active { background: #16c85a; color: #03140a; }
.status-pending { background: #f1c40f; color: #1c1600; }
.status-stopped, .status-rejected { background: #e74c3c; color: #fff; }

.toast {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
background: #0d2e33;
color: white;
border: 1px solid #2eff6c;
border-radius: 16px;
padding: 12px 18px;
z-index: 9999;
box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

input:focus, select:focus, textarea:focus {
outline: 2px solid rgba(46, 255, 108, 0.55);
}

/* إدارة احترافية */
.admin-hero {
background: linear-gradient(135deg, rgba(46,255,108,.12), rgba(22,200,90,.05)), #0d2e33;
border: 1px solid rgba(46,255,108,.25);
}

.hint {
color: #b8d6dc;
font-size: 13px;
line-height: 1.7;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 12px 0;
}

.stat-card {
background: #061f24;
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
}

.stat-card b {
font-size: 24px;
color: #2eff6c;
}

.stat-card span {
font-size: 12px;
color: #c7dde1;
}

.secondary-btn {
width: 100%;
padding: 12px;
background: #12373d;
color: #fff;
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
margin-top: 10px;
font-weight: bold;
cursor: pointer;
}

.user-card {
border: 1px solid rgba(255,255,255,.08);
}

.user-main {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
}

.mini-stats {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 70px;
text-align: center;
}

.mini-stats span {
background: #061f24;
border-radius: 10px;
padding: 6px;
font-size: 12px;
}

.action-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 8px;
}

.action-row button {
margin-top: 0 !important;
}

/* Remember login */
.remember-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 14px;
color: #d7ffe4;
}

.remember-row input {
width: auto;
margin: 0;
accent-color: #2eff6c;
}

.hint {
margin-top: 10px;
font-size: 12px;
color: #b7c9cc;
line-height: 1.6;
}

/* Support chat upgrades */
.msg {
position: relative;
word-break: break-word;
}

.msg-meta {
font-size: 11px;
opacity: .8;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
}

.msg-meta time {
white-space: nowrap;
font-size: 10px;
opacity: .9;
}

.me .msg-meta {
color: rgba(0,0,0,.75);
}

.msg-text {
line-height: 1.6;
}

.quoted-msg {
background: rgba(255,255,255,.12);
border-right: 3px solid #2eff6c;
border-radius: 10px;
padding: 7px 9px;
margin-bottom: 7px;
font-size: 12px;
color: #dfffea;
}

.msg-actions {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 8px;
}

.msg-actions button {
border: none;
border-radius: 999px;
padding: 5px 8px;
background: rgba(255,255,255,.13);
color: inherit;
cursor: pointer;
font-size: 12px;
}

.me .msg-actions button {
background: rgba(0,0,0,.12);
}

.reaction-summary {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 7px;
}

.reaction-summary span {
background: rgba(255,255,255,.16);
border-radius: 999px;
padding: 3px 8px;
font-size: 12px;
}

.reply-preview {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
background: rgba(46,255,108,.12);
border: 1px solid rgba(46,255,108,.35);
border-radius: 14px;
padding: 10px;
margin-bottom: 8px;
color: #eafff0;
}

.reply-preview button {
width: auto;
border: none;
border-radius: 50%;
background: #e74c3c;
color: #fff;
padding: 5px 9px;
cursor: pointer;
}

.chat-attachment-img {
max-width: 180px;
max-height: 180px;
border-radius: 12px;
margin-top: 8px;
display: block;
border: 1px solid rgba(255,255,255,.12);
}

.chat-attachment-file {
display: inline-block;
margin-top: 8px;
color: #2eff6c;
background: #061f24;
padding: 8px 10px;
border-radius: 10px;
text-decoration: none;
}

small {
color: #b7c9cc;
}

.reaction-wrap {
position: relative;
display: inline-block;
}

.react-toggle {
min-width: 34px;
}

.reaction-menu {
display: none;
position: absolute;
bottom: 34px;
right: 0;
background: #0d2e33;
border: 1px solid rgba(46,255,108,.35);
border-radius: 999px;
padding: 6px;
gap: 4px;
z-index: 100;
box-shadow: 0 8px 25px rgba(0,0,0,.35);
white-space: nowrap;
}

.reaction-menu.show {
display: flex;
}

.reaction-menu button {
background: transparent !important;
border: none;
font-size: 20px;
padding: 6px;
cursor: pointer;
line-height: 1;
}

.me .reaction-menu {
right: auto;
left: 0;
}

/* New CRM filters and alerts */
.filter-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 8px 0 2px;
margin: 8px 0;
}

.filter-tabs button {
flex: 0 0 auto;
border: 1px solid rgba(46,255,108,.25);
background: #061f24;
color: #eafff0;
border-radius: 999px;
padding: 8px 11px;
cursor: pointer;
font-size: 12px;
}

.compact-stats {
grid-template-columns: repeat(3, 1fr);
}

.compact-stats .stat-card {
padding: 9px;
}

.compact-stats .stat-card b {
font-size: 20px;
}

.client.expired-client {
border: 1px solid #9b59b6;
box-shadow: 0 0 12px rgba(155, 89, 182, 0.22);
}

.status-expired { background: #9b59b6; color: #fff; }

.duplicate-card {
border: 1px solid rgba(241,196,15,.35);
}

.mini-record {
background: #061f24;
border-radius: 12px;
padding: 10px;
margin-top: 8px;
border: 1px solid rgba(255,255,255,.08);
line-height: 1.6;
}

/* Broadcast / Admin inbox */
.unread-broadcast {
border: 1px solid #f1c40f;
box-shadow: 0 0 12px rgba(241, 196, 15, 0.18);
}

.checkbox-list {
background: #061f24;
border-radius: 14px;
padding: 10px;
margin-top: 10px;
max-height: 220px;
overflow-y: auto;
}

.checkbox-list label {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-bottom: 1px solid rgba(255,255,255,.06);
}

.checkbox-list input {
width: auto;
margin: 0;
accent-color: #2eff6c;
}

/* Professional service comment and password reveal */
.comment-box {
background: rgba(46,255,108,.08);
border: 1px solid rgba(46,255,108,.25);
border-radius: 16px;
padding: 12px;
margin-top: 10px;
}

.comment-box textarea {
min-height: 92px;
resize: vertical;
}

.service-comment-display {
background: rgba(241,196,15,.10);
border: 1px solid rgba(241,196,15,.25);
border-radius: 12px;
padding: 9px;
margin: 8px 0;
line-height: 1.6;
color: #fff8d6;
}

.password-reveal-box {
background: #061f24;
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 10px;
margin: 8px 0;
line-height: 1.7;
}

.inline-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 8px;
}

.mini-btn {
border: 1px solid rgba(46,255,108,.25);
background: #12373d;
color: #fff;
border-radius: 999px;
padding: 8px 10px;
cursor: pointer;
font-weight: bold;
}

/* Correction workflow */
.status-needs_correction {
background: #f39c12;
color: #1c1200;
}

.correction-note-display {
background: rgba(243,156,18,.12);
border: 1px solid rgba(243,156,18,.35);
border-radius: 12px;
padding: 9px;
margin: 8px 0;
line-height: 1.6;
color: #fff3d6;
}

.stop-reason-display {
background: rgba(231,76,60,.12);
border: 1px solid rgba(231,76,60,.35);
border-radius: 12px;
padding: 9px;
margin: 8px 0;
line-height: 1.6;
color: #ffe3df;
}

/* Admin activated today widget */
.today-activated-card {
border: 1px solid rgba(46,255,108,.35);
background: linear-gradient(135deg, rgba(46,255,108,.16), rgba(46,255,108,.05)), #12373d;
}

.today-activated-card b {
color: #2eff6c;
font-size: 22px;
}

.account-updates-display {
background: rgba(52,152,219,.12);
border: 1px solid rgba(52,152,219,.35);
border-radius: 12px;
padding: 9px;
margin: 8px 0;
line-height: 1.6;
color: #eaf6ff;
white-space: pre-line;
}
textarea {
white-space: pre-wrap;
}


/* Support unread notifications */
.support-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
margin-right: 6px;
border-radius: 999px;
background: #e74c3c;
color: #fff;
font-size: 12px;
font-weight: bold;
vertical-align: middle;
}

.unread-support-card {
border: 1px solid rgba(231,76,60,.35);
background: linear-gradient(135deg, rgba(231,76,60,.16), rgba(231,76,60,.05)), #12373d;
}

.unread-support-card b {
color: #ff7675;
font-size: 22px;
}

.unread-pill {
display: inline-flex;
background: #e74c3c;
color: #fff;
border-radius: 999px;
padding: 4px 10px;
font-size: 12px;
font-weight: bold;
margin-top: 6px;
}


/* Admin dashboard upgrades */
.admin-dashboard-grid {
  grid-template-columns: repeat(2, 1fr);
}

.sent-today-card {
  border: 1px solid rgba(52,152,219,.35);
  background: linear-gradient(135deg, rgba(52,152,219,.16), rgba(52,152,219,.05)), #12373d;
}

.sent-today-card b { color: #74b9ff; }

.bot-change-alert {
  border: 1px solid rgba(52,152,219,.65) !important;
  background: linear-gradient(135deg, rgba(52,152,219,.22), rgba(46,255,108,.08)), #12373d !important;
  box-shadow: 0 0 18px rgba(52,152,219,.25);
}

.bot-change-alert b {
  color: #74b9ff;
  font-size: 22px;
}

.glow-btn {
  animation: pulseGlow 1.4s infinite;
}

.pulse-card {
  animation: pulseGlow 1.4s infinite;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 rgba(52,152,219,.15); }
  50% { box-shadow: 0 0 20px rgba(52,152,219,.55); }
  100% { box-shadow: 0 0 0 rgba(52,152,219,.15); }
}

@media (max-width: 420px) {
  .admin-dashboard-grid { grid-template-columns: 1fr; }
}


/* Theme switch */
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.theme-btn {
  background: #12373d;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
}

body.light-mode {
  background: linear-gradient(135deg, #eef7f2, #d9eee6);
  color: #082126;
}

body.light-mode .header,
body.light-mode .welcome,
body.light-mode .card {
  background: #ffffff;
  color: #082126;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

body.light-mode .nav button,
body.light-mode .client,
body.light-mode .secondary-btn,
body.light-mode .theme-btn,
body.light-mode .stat-card,
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .chat-box,
body.light-mode .mini-record,
body.light-mode .checkbox-list,
body.light-mode .password-reveal-box {
  background: #eef7f2;
  color: #082126;
  border-color: rgba(8,33,38,.12);
}

body.light-mode .header h1,
body.light-mode .card h2,
body.light-mode .stat-card b,
body.light-mode .chat-attachment-file {
  color: #139447;
}

body.light-mode .hint,
body.light-mode small,
body.light-mode .stat-card span {
  color: #4c6468;
}

body.light-mode .toast {
  background: #fff;
  color: #082126;
  border-color: #16c85a;
}

/* Analytics dashboard */
.analytics-box h3 {
  margin-bottom: 10px;
  color: #2eff6c;
}

.analytics-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}

.analytics-row span {
  font-size: 13px;
  color: #eafff0;
}

.analytics-row b {
  color: #2eff6c;
}

.analytics-track {
  grid-column: 1 / -1;
  height: 9px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow: hidden;
}

.analytics-track i {
  display: block;
  height: 100%;
  background: linear-gradient(135deg, #2eff6c, #16c85a);
  border-radius: 999px;
}

body.light-mode .analytics-box h3,
body.light-mode .analytics-row b {
  color: #139447;
}

body.light-mode .analytics-row span {
  color: #082126;
}

body.light-mode .analytics-track {
  background: rgba(8,33,38,.12);
}

/* Full Upgrade UX Additions */
.smart-dashboard {
  border: 1px solid rgba(46,255,108,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.status-active-card { border-color: rgba(46,255,108,.35); }
.status-pending-card { border-color: rgba(241,196,15,.35); }
.status-expired-card { border-color: rgba(231,76,60,.35); }
.status-warning-card { border-color: rgba(255,152,0,.35); }
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-top: 10px;
}
.quick-actions button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: inherit;
  border-radius: 12px;
  padding: 9px;
  cursor: pointer;
  font-weight: 700;
}
.support-tools {
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.drop-zone {
  margin-top: 10px;
  padding: 14px;
  border: 1px dashed rgba(46,255,108,.45);
  background: rgba(46,255,108,.08);
  color: #dfffea;
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
}
.drop-zone.dragging {
  background: rgba(46,255,108,.18);
  transform: scale(1.01);
}
.pinned-msg {
  border: 1px solid rgba(241,196,15,.55);
  box-shadow: 0 0 0 2px rgba(241,196,15,.08);
}
.priority-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  margin-inline-start: 6px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255,255,255,.12);
}
.priority-urgent .priority-chip,
.priority-chip.priority-urgent {
  background: rgba(231,76,60,.2);
  color: #ffd9d5;
}
.priority-low .priority-chip,
.priority-chip.priority-low {
  background: rgba(52,152,219,.18);
  color: #d9efff;
}
.notification-list,
.timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.notification-item,
.timeline-item {
  background: #061f24;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
}
.notification-item.unread {
  border-color: rgba(46,255,108,.38);
}
.notification-item.read {
  opacity: .72;
}
.notification-item small,
.timeline-item small {
  display: block;
  margin: 4px 0 7px;
  color: #b7c9cc;
}
.timeline-item {
  border-right: 3px solid #2eff6c;
}
.floating-notification-btn {
  position: fixed;
  right: 18px;
  bottom: 82px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2eff6c, #16c85a);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  z-index: 3000;
  cursor: pointer;
  font-size: 22px;
}
@keyframes softPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.pulse-card { animation: softPulse 1.7s infinite; }
@media (max-width: 430px) {
  .support-tools { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
}

/* Navigation / organization upgrade */
.back-btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  margin: 0 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(46,255,108,.35);
  background: #12373d;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}
.id-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  margin-inline-start: 5px;
  background: rgba(46,255,108,.14);
  border: 1px solid rgba(46,255,108,.25);
  color: #dfffea;
  font-size: 11px;
  font-weight: 700;
}
.pending-focus {
  border: 1px solid rgba(241,196,15,.48);
  box-shadow: 0 0 14px rgba(241,196,15,.16);
}
body.light-mode .back-btn {
  background: #eef7f2;
  color: #082126;
  border-color: rgba(19,148,71,.28);
}
body.light-mode .id-chip {
  color: #0b602b;
  background: rgba(19,148,71,.10);
  border-color: rgba(19,148,71,.24);
}

/* Service reactivation workflow */
.reactivation-btn {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.reactivation-alert {
  border: 1px solid rgba(46, 204, 113, .55) !important;
  background: linear-gradient(135deg, rgba(46,204,113,.18), rgba(52,152,219,.08)), #12373d !important;
  box-shadow: 0 0 18px rgba(46,204,113,.22);
}

.reactivation-alert b {
  color: #2eff6c;
}

.reactivation-diff {
  background: rgba(46,255,108,.08);
  border: 1px solid rgba(46,255,108,.25);
  border-radius: 14px;
  padding: 10px;
  margin: 9px 0;
  line-height: 1.7;
}

body.light-mode .reactivation-diff {
  background: #eef7f2;
  border-color: rgba(19,148,71,.22);
}


/* Smart daily control center */
.smart-control-btn {
  background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
}
.smart-control-page .system-score {
  background: #061f24;
  border: 1px solid rgba(46,255,108,.28);
  border-radius: 18px;
  padding: 14px;
  margin: 12px 0;
}
.system-score b {
  font-size: 34px;
  color: #2eff6c;
  display: block;
}
.system-score span {
  color: #c8d6d8;
  font-size: 13px;
}
.smart-task-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 12px;
}
.smart-task {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  background: #061f24;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px;
}
.smart-task.has-items {
  border-color: rgba(241,196,15,.35);
  box-shadow: 0 0 12px rgba(241,196,15,.10);
}
.priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  margin-inline-start: 5px;
}
.priority-high { background: rgba(231,76,60,.22); color: #ffd9d5; }
.priority-medium { background: rgba(241,196,15,.20); color: #fff3c1; }
.priority-low { background: rgba(52,152,219,.18); color: #d9efff; }
.smart-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.smart-row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 72px;
}
body.light-mode .smart-task,
body.light-mode .system-score {
  background: #eef7f2;
  color: #082126;
  border-color: rgba(8,33,38,.12);
}
body.light-mode .system-score span {
  color: #4c6468;
}
@media (min-width: 460px) {
  .smart-task-grid { grid-template-columns: 1fr 1fr; }
}

/* Activity log upgrades */
.activity-item {
  border: 1px solid rgba(46,255,108,.22);
}
.activity-item small {
  display: block;
  margin-top: 7px;
  color: #c9f7d8;
}
.id-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(46,255,108,.14);
  border: 1px solid rgba(46,255,108,.25);
  color: #dfffea;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  margin-inline-start: 6px;
}
body.light-mode .activity-item small,
body.light-mode .id-chip {
  color: #0d5f31;
}


/* Sales block control upgrade */
.service-block-status {
  margin: 12px 0;
  padding: 13px;
  border-radius: 16px;
  line-height: 1.7;
  border: 1px solid rgba(255,255,255,.10);
  background: #061f24;
}
.service-block-status.open {
  border-color: rgba(46,255,108,.35);
  background: rgba(46,255,108,.10);
}
.service-block-status.blocked {
  border-color: rgba(231,76,60,.45);
  background: linear-gradient(135deg, rgba(231,76,60,.18), rgba(241,196,15,.08)), #12373d;
}
.countdown-pill {
  display: inline-flex;
  margin-top: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 800;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.pro-modal {
  width: min(430px, 100%);
  background: #0d2e33;
  border: 1px solid rgba(231,76,60,.5);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  line-height: 1.8;
}
.pro-modal h2 { color: #ff7675; margin-bottom: 8px; }
.warning-info {
  background: rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
  margin: 12px 0;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.days-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.blocked-rule {
  border: 1px solid rgba(231,76,60,.45);
  box-shadow: 0 0 14px rgba(231,76,60,.16);
}
.service-block-btn {
  background: linear-gradient(135deg, #e67e22, #e74c3c) !important;
}
body.light-mode .service-block-status,
body.light-mode .pro-modal,
body.light-mode .warning-info {
  background: #ffffff;
  color: #082126;
}
@media (max-width: 430px) {
  .two-col, .days-list { grid-template-columns: 1fr; }
}

/* Daily stops clarity upgrade */
.stops-control-page .today-stops-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin: 12px 0;
  border-radius: 18px;
  border: 1px solid rgba(231,76,60,.55);
  background: linear-gradient(135deg, rgba(231,76,60,.22), rgba(241,196,15,.08)), #12373d;
  box-shadow: 0 10px 28px rgba(231,76,60,.14);
}
.today-stops-hero b {
  display: block;
  font-size: 38px;
  color: #ff7675;
  line-height: 1;
  margin: 6px 0;
}
.today-label {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(231,76,60,.22);
  border: 1px solid rgba(231,76,60,.35);
  color: #ffe3df;
  font-size: 12px;
  font-weight: 800;
}
.today-stops-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 105px;
}
.today-stops-side span {
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  text-align: center;
}
.today-stop-stat {
  border-color: rgba(231,76,60,.45) !important;
  background: linear-gradient(135deg, rgba(231,76,60,.18), rgba(241,196,15,.06)), #061f24 !important;
}
.today-stop-stat b { color: #ff7675 !important; }
.stops-section {
  margin-top: 14px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(6,31,36,.45);
}
.today-stops-section {
  border-color: rgba(231,76,60,.45);
  background: linear-gradient(135deg, rgba(231,76,60,.12), rgba(241,196,15,.04)), rgba(6,31,36,.62);
}
.old-stops-section {
  opacity: .92;
}
.stops-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.stops-section-head h3 {
  font-size: 15px;
  color: #fff3d6;
}
.stops-section-head span {
  display: inline-flex;
  min-width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e74c3c;
  color: #fff;
  font-weight: 900;
}
.today-stop-card {
  border: 1px solid rgba(231,76,60,.58) !important;
  background: linear-gradient(135deg, rgba(231,76,60,.18), rgba(46,255,108,.04)), #12373d !important;
  box-shadow: 0 0 16px rgba(231,76,60,.20);
}
.today-stop-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  margin-inline-start: 5px;
}
.stop-card-meta {
  margin-top: 9px;
  padding: 10px;
  border-radius: 13px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
  line-height: 1.7;
}
.stop-card-meta b,
.stop-card-meta span,
.stop-card-meta small {
  display: block;
}
.stop-card-meta.today {
  border-color: rgba(231,76,60,.35);
  background: rgba(231,76,60,.12);
}
.stops-filter-tabs button:focus,
.stops-filter-tabs button:hover {
  border-color: rgba(231,76,60,.55);
  box-shadow: 0 0 12px rgba(231,76,60,.12);
}
body.light-mode .today-stops-hero,
body.light-mode .today-stop-card,
body.light-mode .stops-section,
body.light-mode .stop-card-meta {
  color: #082126;
}
body.light-mode .today-stops-hero {
  background: linear-gradient(135deg, rgba(231,76,60,.12), rgba(241,196,15,.08)), #fff;
}
body.light-mode .stops-section {
  background: #fff;
  border-color: rgba(8,33,38,.12);
}
body.light-mode .today-stops-section {
  background: linear-gradient(135deg, rgba(231,76,60,.08), rgba(241,196,15,.04)), #fff;
}
body.light-mode .today-stop-card {
  background: linear-gradient(135deg, rgba(231,76,60,.10), rgba(19,148,71,.03)), #fff !important;
}
body.light-mode .stops-section-head h3 {
  color: #9f2d24;
}
body.light-mode .stop-card-meta {
  background: #eef7f2;
}
@media (max-width: 430px) {
  .stops-control-page .today-stops-hero {
    grid-template-columns: 1fr;
  }
  .today-stops-side {
    min-width: 0;
  }
}


/* ===== Sales Professional Interface v3 ===== */
.sales-pro-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(46,255,108,.30);
  background:
    radial-gradient(circle at top left, rgba(46,255,108,.20), transparent 34%),
    linear-gradient(135deg, rgba(18,55,61,.96), rgba(6,31,36,.98));
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
}
.sales-hero-top {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 12px;
  align-items: center;
}
.pro-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(46,255,108,.14);
  border: 1px solid rgba(46,255,108,.25);
  color: #dfffea;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 7px;
}
.sales-pro-hero h2 { margin-bottom: 5px; }
.sales-pro-hero p { color: #c8d6d8; line-height: 1.65; font-size: 13px; }
.sales-score-ring {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: conic-gradient(#2eff6c var(--score), rgba(255,255,255,.10) 0);
  position: relative;
  isolation: isolate;
}
.sales-score-ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: #0d2e33;
  border-radius: 50%;
  z-index: -1;
}
.sales-score-ring b { color: #2eff6c; font-size: 19px; }
.sales-score-ring span { color: #dfffea; font-size: 11px; }
.sales-alert-strip {
  margin: 14px 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(46,255,108,.10);
  border: 1px solid rgba(46,255,108,.24);
  line-height: 1.5;
}
.sales-alert-strip.has-risk {
  background: rgba(241,196,15,.12);
  border-color: rgba(241,196,15,.35);
  color: #fff4c2;
}
.sales-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.sales-metric-card {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 16px;
  padding: 12px;
  text-align: start;
  cursor: pointer;
}
.sales-metric-card b { display: block; font-size: 24px; margin-bottom: 4px; }
.sales-metric-card span { color: #c8d6d8; font-size: 12px; }
.sales-metric-card.green b { color:#2eff6c; }
.sales-metric-card.blue b { color:#74b9ff; }
.sales-metric-card.amber b { color:#f1c40f; }
.sales-metric-card.red b { color:#ff7675; }
.sales-metric-card.purple b { color:#c084fc; }
.sales-command-center {
  border: 1px solid rgba(116,185,255,.25);
}
.section-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.live-chip {
  display:inline-flex;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(52,152,219,.16);
  border:1px solid rgba(52,152,219,.30);
  color:#d9efff;
  font-size:11px;
  font-weight:800;
}
.sales-action-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:9px;
}
.sales-action-grid button {
  text-align:start;
  border:none;
  border-radius:16px;
  background:#061f24;
  color:#fff;
  padding:12px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
}
.sales-action-grid button b { display:block; margin-bottom:5px; color:#eafff0; }
.sales-action-grid button span { display:block; color:#b7c9cc; font-size:12px; line-height:1.4; }
.workflow-steps {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.workflow-steps div {
  display:flex;
  align-items:center;
  gap:8px;
  background:#061f24;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px;
}
.workflow-steps b {
  min-width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#2eff6c;
  color:#03140a;
}
.workflow-steps span { font-size:12px; color:#dfffea; }
.sales-smart-search {
  background:#061f24;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:10px;
  margin:10px 0;
}
.smart-filter-row,
.sales-export-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.sales-export-row button { margin-top:0; }
.client-card-head {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
  margin-bottom:8px;
}
.client-priority-chip {
  display:inline-flex;
  white-space:nowrap;
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  font-weight:800;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
}
.priority-active { color:#dfffea; border-color:rgba(46,255,108,.32); background:rgba(46,255,108,.12); }
.priority-pending { color:#fff3c1; border-color:rgba(241,196,15,.32); background:rgba(241,196,15,.12); }
.priority-needs_correction { color:#fff3d6; border-color:rgba(243,156,18,.35); background:rgba(243,156,18,.12); }
.priority-expired,.priority-stopped,.priority-rejected { color:#ffe3df; border-color:rgba(231,76,60,.35); background:rgba(231,76,60,.12); }
.account-footer-card { opacity:.95; }

body.light-mode .sales-pro-hero {
  background: radial-gradient(circle at top left, rgba(19,148,71,.14), transparent 34%), #ffffff;
  color:#082126;
}
body.light-mode .sales-pro-hero p,
body.light-mode .sales-metric-card span,
body.light-mode .sales-action-grid button span { color:#4c6468; }
body.light-mode .sales-score-ring::after,
body.light-mode .sales-action-grid button,
body.light-mode .workflow-steps div,
body.light-mode .sales-smart-search { background:#eef7f2; color:#082126; border-color:rgba(8,33,38,.10); }
body.light-mode .sales-action-grid button b,
body.light-mode .workflow-steps span { color:#082126; }
body.light-mode .pro-kicker { color:#0b602b; }

@media (max-width:430px) {
  .sales-hero-top { grid-template-columns:1fr; }
  .sales-score-ring { width:78px; height:78px; }
  .sales-metric-grid,
  .sales-action-grid,
  .workflow-steps,
  .smart-filter-row,
  .sales-export-row { grid-template-columns:1fr; }
}


/* Fixed targeted sales block picker */
.block-sales-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.sales-pick-row {
  align-items: flex-start !important;
}
.sales-pick-row span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.4;
}
.sales-pick-row small {
  font-size: 11px;
  opacity: .8;
}
.blocked-rule {
  border: 1px solid rgba(231,76,60,.55);
  box-shadow: 0 0 15px rgba(231,76,60,.16);
}

/* CRM / Sales professional upgrade v5 */
.crm-hero {
  border: 1px solid rgba(46,255,108,.32);
  background: linear-gradient(135deg, rgba(46,255,108,.14), rgba(52,152,219,.06)), #0d2e33;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.crm-score {
  background: #061f24;
  border: 1px solid rgba(46,255,108,.25);
  border-radius: 18px;
  padding: 14px;
  margin: 12px 0;
}
.crm-score b { font-size: 34px; color: #2eff6c; display: block; }
.crm-score span { color: #c8d6d8; font-size: 13px; }
.crm-task-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 12px 0;
}
.crm-task-card {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 13px 10px;
  background: #061f24;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-align: center;
}
.crm-task-card span { font-size: 22px; }
.crm-task-card b { font-size: 24px; color: #2eff6c; }
.crm-task-card small { color: #c8d6d8; }
.crm-blue { border-color: rgba(52,152,219,.35); }
.crm-amber, .crm-orange { border-color: rgba(241,196,15,.38); }
.crm-red { border-color: rgba(231,76,60,.38); }
.crm-purple { border-color: rgba(155,89,182,.38); }
.crm-green { border-color: rgba(46,255,108,.38); }
.crm-client-mini {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  background: #061f24;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px;
  margin: 9px 0;
}
.crm-client-mini.due { border-color: rgba(241,196,15,.35); }
.crm-client-mini.expiring { border-color: rgba(231,76,60,.35); }
.crm-client-mini.correction { border-color: rgba(243,156,18,.40); }
.crm-mini-actions { display:flex; flex-direction:column; gap:6px; min-width:74px; }
.crm-note-line {
  background: rgba(46,255,108,.08);
  border: 1px solid rgba(46,255,108,.18);
  border-radius: 10px;
  padding: 6px 8px;
  margin-top: 6px;
  font-size: 12px;
}
.crm-followup-item p,
.template-card p { line-height: 1.7; margin-top: 8px; white-space: pre-wrap; }
.template-card {
  background: #061f24;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 12px;
  margin: 10px 0;
}
.sales-rank-card,
.sales-performance-row {
  background: #061f24;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px;
  margin: 9px 0;
}
.sales-rank-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sales-rank-card span { color:#2eff6c; font-weight:800; }
.sales-performance-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.sales-performance-row .analytics-track { grid-column: 1 / -1; }
.sales-rate {
  text-align:center;
  background: rgba(46,255,108,.10);
  border: 1px solid rgba(46,255,108,.20);
  border-radius: 14px;
  padding: 8px 10px;
}
.sales-rate b { display:block; color:#2eff6c; font-size:20px; }
.sales-rate span { font-size:11px; color:#c8d6d8; }
.priority-urgent { border-color: rgba(231,76,60,.55) !important; }
.priority-high { border-color: rgba(243,156,18,.45) !important; }
.priority-normal { border-color: rgba(46,255,108,.22) !important; }
.priority-low { border-color: rgba(52,152,219,.22) !important; }
body.light-mode .crm-hero,
body.light-mode .crm-score,
body.light-mode .crm-task-card,
body.light-mode .crm-client-mini,
body.light-mode .template-card,
body.light-mode .sales-rank-card,
body.light-mode .sales-performance-row {
  background: #fff;
  color: #082126;
  border-color: rgba(8,33,38,.12);
}
body.light-mode .crm-score span,
body.light-mode .crm-task-card small,
body.light-mode .sales-rate span { color:#4c6468; }
@media (max-width: 430px) {
  .crm-task-grid { grid-template-columns: 1fr 1fr; }
  .crm-client-mini { grid-template-columns: 1fr; }
  .crm-mini-actions { flex-direction: row; }
  .sales-performance-row { grid-template-columns: 1fr; }
}


/* Smart renewal / duplicate protection upgrade */
.duplicate-blocked-card {
  border: 1px solid rgba(231,76,60,.55) !important;
  background: linear-gradient(135deg, rgba(231,76,60,.18), rgba(241,196,15,.08)), #12373d !important;
}
.duplicate-blocked-card b { color: #ff7675; }
.pending-bot-password {
  border: 1px solid rgba(46,255,108,.7) !important;
  box-shadow: 0 0 18px rgba(46,255,108,.22);
  background: linear-gradient(135deg, rgba(46,255,108,.10), rgba(52,152,219,.06)), #12373d;
}
.password-pending-tools {
  margin-top: 10px;
}
.smart-action-chip {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(52,152,219,.14);
  border: 1px solid rgba(52,152,219,.30);
  color: #d9efff;
  font-size: 12px;
  font-weight: 800;
}
.smart-action-chip.urgent {
  background: rgba(231,76,60,.14);
  border-color: rgba(231,76,60,.35);
  color: #ffe1dd;
}
.smart-action-chip.ok {
  background: rgba(46,255,108,.12);
  border-color: rgba(46,255,108,.35);
  color: #eafff0;
}
body.light-mode .pending-bot-password,
body.light-mode .smart-action-chip,
body.light-mode .duplicate-blocked-card {
  color: #082126;
}


/* Admin operations center v3 */
.admin-command-btn, .admin-ops-hero { border: 1px solid rgba(46,255,108,.35); box-shadow: 0 0 18px rgba(46,255,108,.10); }
.ops-summary-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 12px 0; }
.ops-summary-grid button { background:#061f24; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:12px; cursor:pointer; }
.ops-summary-grid b { display:block; font-size:24px; color:#2eff6c; margin-bottom:4px; }
.ops-help-box { background:rgba(46,255,108,.08); border:1px solid rgba(46,255,108,.22); border-radius:14px; padding:12px; margin-top:10px; line-height:1.7; color:#dfffea; }
.ops-card { cursor:pointer; transition:.18s ease; border:1px solid rgba(255,255,255,.08); }
.ops-card:hover { transform: translateY(-1px); border-color: rgba(46,255,108,.45); }
.ops-card-head { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:8px; }
.ops-card-footer { margin-top:8px; color:#2eff6c; font-size:12px; }
.request-status-chip { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:5px 9px; font-size:11px; background:#061f24; color:#fff; border:1px solid rgba(255,255,255,.12); white-space:nowrap; }
.request-pending { background:#f1c40f; color:#1c1600; border-color:#f1c40f; }
.request-approved { background:#16c85a; color:#021609; border-color:#16c85a; }
.request-rejected { background:#e74c3c; color:#fff; border-color:#e74c3c; }
.admin-detail-page h3 { color:#2eff6c; margin:14px 0 8px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0; }
.detail-grid div { background:#061f24; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px; }
.detail-grid b { display:block; color:#b7c9cc; font-size:12px; margin-bottom:4px; }
.detail-grid span { color:#fff; font-weight:700; }
.compare-box { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.compare-box > div { background:#061f24; border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:12px; line-height:1.8; }
.compare-box h3 { margin-top:0; }
.admin-decision-bar { margin-top:12px; display:grid; gap:8px; }
.clickable-notification { cursor:pointer; border:1px solid rgba(255,255,255,.08); }
.clickable-notification:hover { border-color: rgba(46,255,108,.45); }
.clickable-notification em { display:block; color:#2eff6c; font-style:normal; font-size:12px; margin-top:6px; }
.client-full-profile .timeline-item { background:#061f24; border-radius:14px; padding:10px; margin:8px 0; border:1px solid rgba(255,255,255,.08); }


/* Clickable dashboard numbers + support lookup + richer timeline */
.metric-click {
  width: 100%;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: .18s ease;
}
.metric-click:hover {
  transform: translateY(-1px);
  border-color: rgba(46,255,108,.45) !important;
  box-shadow: 0 0 16px rgba(46,255,108,.16);
}
.support-client-lookup {
  background: #061f24;
  border: 1px solid rgba(52,152,219,.24);
  border-radius: 18px;
  padding: 12px;
  margin: 10px 0;
}
.support-client-result {
  border-color: rgba(52,152,219,.30);
}
.duplicate-record-row {
  border: 1px solid rgba(241,196,15,.30);
}
.timeline-active {
  border-right-color: #2eff6c !important;
}
.timeline-sensitive {
  border-right-color: #e74c3c !important;
  background: linear-gradient(135deg, rgba(231,76,60,.13), rgba(46,255,108,.04)), #061f24 !important;
}
.timeline-renew {
  border-right-color: #74b9ff !important;
}
.timeline-note {
  border-right-color: #f1c40f !important;
}
.timeline-system {
  border-right-color: #c084fc !important;
}
body.light-mode .support-client-lookup,
body.light-mode .support-client-result,
body.light-mode .client-full-profile .timeline-item {
  background: #eef7f2;
  color: #082126;
  border-color: rgba(8,33,38,.12);
}


/* Clickable summaries + auto client finder in support */
.clickable-summary-grid .stat-card {
  min-height: 82px;
}
.support-auto-client {
  margin-top: 8px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(52,152,219,.10);
  border: 1px solid rgba(52,152,219,.26);
}
.support-auto-client small {
  display: block;
  margin-top: 5px;
}
.reactivation-full-client {
  background: rgba(52,152,219,.08);
  border: 1px solid rgba(52,152,219,.24);
  border-radius: 14px;
  padding: 10px;
  margin: 10px 0;
}
.reactivation-full-client > b {
  display: block;
  margin-bottom: 8px;
  color: #74b9ff;
}
body.light-mode .support-auto-client,
body.light-mode .reactivation-full-client {
  background: #eef7f2;
  color: #082126;
  border-color: rgba(8,33,38,.12);
}

/* Support chat: automatic client profile button */
.support-auto-client.matched {
  background: rgba(46,255,108,.10);
  border-color: rgba(46,255,108,.35);
}
.client-profile-btn {
  background: linear-gradient(135deg, #2eff6c, #16c85a) !important;
  color: #03140a !important;
}
body.light-mode .support-auto-client.matched {
  background: rgba(19,148,71,.10);
  border-color: rgba(19,148,71,.28);
}

/* === CRM upgrade: server number + activity log === */
.server-number-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(46,255,108,.12);
  border: 1px solid rgba(46,255,108,.35);
  color: #eafff0;
  padding: 7px 10px;
  border-radius: 999px;
  margin: 6px 0;
  font-size: 13px;
}

.ref-chip {
  display: inline-block;
  background: rgba(241,196,15,.13);
  border: 1px solid rgba(241,196,15,.35);
  color: #fff6d0;
  padding: 5px 9px;
  border-radius: 999px;
  margin: 4px 0;
  font-size: 12px;
}

.activity-log-row {
  background: #061f24;
  border: 1px solid rgba(255,255,255,.08);
  border-right: 4px solid rgba(46,255,108,.55);
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
  line-height: 1.7;
}

.activity-log-row p {
  margin: 5px 0;
  color: #dbecef;
  word-break: break-word;
}

.activity-log-row small {
  display: block;
  margin-top: 6px;
  color: #b8d6dc;
}

.id-chip {
  display: inline-block;
  background: rgba(255,255,255,.10);
  color: #dfffea;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  margin-inline-start: 5px;
}

/* Full activity log filters and complete client data */
.activity-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.activity-summary-grid div {
  background: #061f24;
  border: 1px solid rgba(46,255,108,.18);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}
.activity-summary-grid b {
  display: block;
  color: #2eff6c;
  font-size: 22px;
}
.activity-summary-grid span {
  font-size: 12px;
  color: #c7dde1;
}
.full-activity-card {
  border: 1px solid rgba(46,255,108,.22);
  background: #0b2a30;
}
.activity-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.activity-change-box {
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 8px 0;
  line-height: 1.7;
}
.activity-full-details {
  margin-top: 10px;
  background: rgba(0,0,0,.13);
  border-radius: 14px;
  padding: 9px;
}
.activity-full-details summary {
  cursor: pointer;
  color: #2eff6c;
  font-weight: bold;
}
.activity-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.activity-detail-grid div {
  background: #061f24;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 8px;
  min-width: 0;
}
.activity-detail-grid b {
  display: block;
  color: #b7c9cc;
  font-size: 11px;
  margin-bottom: 5px;
}
.activity-detail-grid span {
  word-break: break-word;
}
.activity-long {
  margin-top: 8px;
  background: #061f24;
  border-radius: 12px;
  padding: 9px;
  line-height: 1.7;
}
.activity-long b {
  color: #2eff6c;
}
.activity-long p {
  margin-top: 5px;
  white-space: pre-wrap;
}
@media (max-width: 420px) {
  .activity-detail-grid,
  .activity-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* Final Activity Date Filter */
.quick-date-filter-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.quick-date-filter-row button {
  border: 1px solid rgba(46,255,108,.35);
  background: #061f24;
  color: #eafff0;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}
.activity-summary-grid,
.activity-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.activity-summary-grid div,
.activity-detail-grid div,
.activity-change-box,
.activity-long {
  background: #061f24;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px;
}
.activity-summary-grid b { color:#2eff6c; font-size:20px; display:block; }
.activity-summary-grid span,
.activity-detail-grid span { color:#d7eef2; font-size:12px; word-break: break-word; }
.full-activity-card { margin-top: 12px; }
.activity-headline { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.activity-full-details summary { cursor:pointer; margin:10px 0; color:#2eff6c; font-weight:bold; }

.error-card{border:1px solid rgba(231,76,60,.45);box-shadow:0 0 14px rgba(231,76,60,.15)}
.error-card h2{color:#ff7675!important}


/* Date filters fixes - Operations Center & Daily Report */
.ops-filter-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  background: rgba(6, 31, 36, .72);
  border: 1px solid rgba(46,255,108,.18);
  border-radius: 16px;
  padding: 10px;
}
.ops-filter-panel input,
.ops-filter-panel select {
  margin-top: 0;
}
.quick-date-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}
.quick-date-row button {
  flex: 1 1 90px;
  border: 1px solid rgba(46,255,108,.25);
  background: #061f24;
  color: #eafff0;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}
.ops-card-footer {
  margin-top: 8px;
  color: #b8d6dc;
  font-size: 12px;
}
@media (max-width: 430px) {
  .ops-filter-panel { grid-template-columns: 1fr; }
}

/* Smart alerts / backup / enhanced reports */
.smart-alert-btn { background: linear-gradient(135deg, #ffb347, #ff4d4d) !important; color:#180505 !important; }
.ops-card-head { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.ops-card-footer { margin-top:8px; color:#b7c9cc; font-size:12px; }
.ops-filter-panel { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.quick-date-row { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.quick-date-row button { flex:1; min-width:90px; border:none; border-radius:12px; padding:10px; background:#12373d; color:#fff; cursor:pointer; }
.sales-rank-card, .sales-performance-row { background:#061f24; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px; margin-top:8px; line-height:1.7; }
.sales-rate { text-align:center; background:rgba(46,255,108,.12); border-radius:12px; padding:8px; margin-top:6px; }
.analytics-track { height:8px; background:#12373d; border-radius:99px; overflow:hidden; margin-top:7px; }
.analytics-track i { display:block; height:100%; background:#2eff6c; border-radius:99px; }
.expiring-week { border:1px solid rgba(241,196,15,.35); box-shadow:0 0 12px rgba(241,196,15,.12); }
@media (max-width: 420px) { .ops-filter-panel { grid-template-columns:1fr; } }

/* clickable report/activity cards */
.clickable-stat {
  cursor: pointer;
  width: 100%;
  border: 1px solid rgba(46,255,108,.25);
  color: inherit;
  font-family: inherit;
}
.clickable-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(46,255,108,.14);
  border-color: rgba(46,255,108,.65);
}
.clickable-stat small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #b7c9cc;
}
.daily-details-card {
  border: 1px solid rgba(46,255,108,.35);
  box-shadow: 0 0 18px rgba(46,255,108,.10);
}

/* CRM mini card clickable actions fix */
.crm-client-summary { cursor: pointer; flex: 1; }
.crm-client-summary:hover b { text-decoration: underline; }
.crm-mini-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.crm-mini-actions .details-btn { min-width: 112px; }


/* Activity log client quick actions */
.activity-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.activity-action-row .mini-btn,
.activity-summary-grid .clickable-stat {
  border-radius: 12px;
}
.clickable-activity-summary button {
  text-align: center;
  background: #061f24;
  color: #fff;
  border: 1px solid rgba(46,255,108,.25);
}
.clickable-activity-summary small {
  color: #b7c9cc;
  font-size: 11px;
}
@media (max-width: 420px) {
  .activity-action-row { grid-template-columns: 1fr; }
}


/* Professional CRM final upgrade */
.pro-report-hero { border: 1px solid rgba(46,255,108,.35); box-shadow: 0 12px 35px rgba(0,0,0,.22); }
.pro-filter-panel { display:grid; grid-template-columns:1fr; gap:8px; }
.pro-quick-row { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.pro-quick-row button { padding:10px 6px; border-radius:12px; border:1px solid rgba(46,255,108,.28); background:#061f24; color:#fff; font-weight:bold; }
.pro-ticket-board .stat-card, .pro-ticket-card { cursor:pointer; transition:.18s ease; }
.pro-ticket-board .stat-card:hover, .pro-ticket-card:hover { transform: translateY(-2px); border-color: rgba(46,255,108,.65); }
.pro-report-btn { background: linear-gradient(135deg,#2eff6c,#00a3ff) !important; color:#031b12 !important; }
.client .ref-chip { display:inline-block; margin:3px 0; }
@media (min-width: 520px) { .pro-filter-panel { grid-template-columns:1fr 1fr; } }


/* FINAL HOTFIX V2 */
.active-pro-ticket{outline:2px solid #2eff6c; box-shadow:0 0 18px rgba(46,255,108,.35)}
.pro-filter-panel label{font-size:12px;color:#cfeeed;margin-top:6px;display:block}
.pro-filter-panel input,.pro-filter-panel select{margin-top:5px}
.quick-date-row button{min-height:38px}
.error-card{border:1px solid #e74c3c}

/* ===== FINAL FIX V3 REPORT MOBILE LAYOUT ===== */
.pro-report-card-v3{overflow:hidden;border:1px solid rgba(46,255,108,.25);}
.pro-report-title-v3{text-align:center;margin-bottom:12px;}
.pro-report-title-v3 h2{font-size:24px;margin-bottom:6px;}
.pro-report-title-v3 p{font-size:12px;color:#cde7e8;line-height:1.7;}
.pro-period-grid-v3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
.pro-period-grid-v3 button{min-height:44px;border:1px solid rgba(46,255,108,.28);background:#061f24;color:#fff;border-radius:14px;font-weight:800;cursor:pointer;}
.pro-filter-grid-v3{display:grid;grid-template-columns:1fr;gap:6px;background:rgba(0,0,0,.12);border-radius:18px;padding:12px;}
.pro-filter-grid-v3 label{font-size:13px;color:#dfffea;margin-top:4px;}
.pro-filter-grid-v3 input,.pro-filter-grid-v3 select{margin-top:0;height:46px;min-width:0;}
.pro-apply-btn-v3{position:sticky;bottom:8px;z-index:5;box-shadow:0 10px 28px rgba(0,0,0,.35);}
.pro-filter-chips-v3{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px;}
.pro-filter-chips-v3 span{background:#061f24;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 9px;font-size:11px;color:#dfffea;}
.pro-ticket-grid-v3{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.pro-ticket-v3{background:#061f24;border:1px solid rgba(46,255,108,.20);border-radius:18px;padding:13px 8px;color:#fff;cursor:pointer;text-align:center;min-height:82px;}
.pro-ticket-v3 b{display:block;color:#2eff6c;font-size:25px;line-height:1.1;margin-bottom:6px;}
.pro-ticket-v3 span{font-size:12px;color:#dfffea;line-height:1.35;}
.pro-ticket-v3.active{border-color:#2eff6c;box-shadow:0 0 0 2px rgba(46,255,108,.16),0 0 16px rgba(46,255,108,.16);}
.floating-notification-btn{bottom:92px !important;right:14px !important;width:54px !important;height:54px !important;z-index:80 !important;}
@media (max-width:380px){.pro-period-grid-v3{grid-template-columns:repeat(2,1fr)}.pro-ticket-grid-v3{grid-template-columns:1fr}.pro-ticket-v3{min-height:70px}}

/* ===== V4 report explanation and composition ===== */
.pro-ticket-v3 small{
  display:block;
  margin-top:6px;
  color:#bdebd2;
  font-size:11px;
  opacity:.9;
}
.pro-analysis-card-v3{
  border:1px solid rgba(46,255,108,.22);
  background:linear-gradient(135deg, rgba(46,255,108,.08), rgba(3,22,25,.96));
}
.pro-big-explain{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#061f24;
  border:1px solid rgba(46,255,108,.18);
  border-radius:16px;
  padding:12px;
  margin-top:10px;
}
.pro-big-explain b{
  font-size:34px;
  color:#2eff6c;
  min-width:54px;
  text-align:center;
}
.pro-big-explain p{
  line-height:1.8;
  color:#dfffea;
  font-size:13px;
}
.pro-mini-kpis-v3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}
.pro-mini-kpis-v3 span{
  background:#082a2f;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:9px;
  text-align:center;
  font-size:12px;
  color:#bfe3e7;
}
.pro-mini-kpis-v3 b{color:#2eff6c;display:block;font-size:17px;margin-top:4px;}
.pro-breakdown-box-v3{
  margin-top:12px;
  background:#061f24;
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
}
.pro-breakdown-box-v3 h3{color:#2eff6c;margin-bottom:10px;}
.pro-break-line{
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:10px;
  margin-top:10px;
}
.pro-break-line b{display:block;color:#fff;margin-bottom:8px;}
.pro-break-line div{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.pro-break-line span{
  background:#0d2e33;
  border:1px solid rgba(46,255,108,.16);
  border-radius:999px;
  padding:7px 9px;
  font-size:12px;
  color:#dfffea;
}
.pro-break-line strong{color:#2eff6c;}
.pro-break-line small{color:#b6cdd1;margin-right:4px;}
.pro-rows-card-v3{padding-top:12px;}
.pro-rows-header-v3{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.pro-rows-header-v3 b{color:#2eff6c;font-size:18px;display:block;}
.pro-rows-header-v3 small{display:block;margin-top:4px;}
.pro-rows-header-v3 > div:last-child{display:flex;gap:6px;}
@media(max-width:520px){
  .pro-mini-kpis-v3{grid-template-columns:1fr;}
  .pro-big-explain{flex-direction:column;}
  .pro-big-explain b{text-align:right;}
  .pro-rows-header-v3{align-items:flex-start;flex-direction:column;}
}


/* =========================
   Pro Traders Logo Header
   ========================= */
.pro-header {
  gap: 10px;
  min-height: 86px;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.app-logo {
  width: 155px;
  max-width: 56vw;
  height: auto;
  max-height: 58px;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  background: #000;
  padding: 3px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.brand-copy {
  min-width: 0;
}

.brand-copy h1 {
  color: #2eff6c;
  font-size: 20px;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}

.brand-copy p {
  color: #dfeff1;
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 3px;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.theme-btn {
  background: #12373d;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  padding: 10px 13px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
}

body.light-mode .app-logo {
  background: #061f24;
}

body.light-mode .brand-copy p {
  color: #244047;
}

@media (max-width: 420px) {
  .app-logo {
    width: 125px;
    max-height: 48px;
  }

  .brand-copy h1 {
    font-size: 16px;
  }

  .brand-copy p {
    font-size: 10px;
  }

  .header-actions {
    gap: 5px;
  }

  .lang-btn,
  .theme-btn {
    padding: 8px 10px;
  }
}