/* /css/client_mgmt.css  — enhanced */
:root {
  --cmg-bg:#0b1220; --cmg-panel:#101826; --cmg-brd:#22314a;
  --cmg-text:#e8eef9; --cmg-muted:#9fb0c3;
  --cmg-ok:#22c55e; --cmg-warn:#f59e0b; --cmg-danger:#ef4444; --cmg-brand:#3b82f6;
  --cmg-head:#0f192c; --cmg-row:#0e1626; --cmg-row-alt:#0c1220; --cmg-hover:#111c31;
}

#clientMgmtSection{ color:var(--cmg-text); padding:8px; }
.cmg-title{ margin:0 0 4px; font-size:20px; font-weight:600; }

/* Toolbar */
.cmg-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin:12px 0;
}
.cmg-right{ display:flex; align-items:center; gap:10px; }
.cmg-input{
  background:var(--cmg-panel); border:1px solid var(--cmg-brd);
  color:var(--cmg-text); padding:10px 12px; border-radius:10px; min-width:220px;
  line-height:1; height:38px;
}
.cmg-tabs{ display:flex; gap:8px; }
.cmg-tab{
  background:linear-gradient(180deg,#162137,#111a2c);
  color:#dbe7ff; border:1px solid var(--cmg-brd);
  padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:600;
  transition:.15s ease;
}
.cmg-tab--active{ border-color:var(--cmg-brand); box-shadow:0 0 0 3px rgba(59,130,246,.18) inset; }
.cmg-tab:hover{ filter:brightness(1.08); }

/* Summary cards */
.cmg-cards{
  display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(170px,1fr));
  margin: 6px 0 14px;
}
.cmg-card{
  background:var(--cmg-panel); border:1px solid var(--cmg-brd); border-radius:14px;
  padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.20);
}
.cmg-card-k{ font-size:12px; color:var(--cmg-muted); margin-bottom:6px; }
.cmg-card-v{ font-size:22px; font-weight:700; letter-spacing:.2px; }

/* Table wrapper */
.cmg-table-wrap{ overflow:auto; background:transparent; border-radius:12px; }
.cmg-table{ background:var(--cmg-panel); border:1px solid var(--cmg-brd); border-radius:12px; }

/* Table */
.cmg-data{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:13px; line-height:1.35;
}

.cmg-data thead th{
  position: sticky; top:0; z-index:1;
  background:var(--cmg-head); color:#cfe3ff; font-weight:700;
  border-bottom:1px solid var(--cmg-brd); padding:12px 10px; text-align:left;
  white-space:nowrap;
}

.cmg-data tbody tr{ background:var(--cmg-row); }
.cmg-data tbody tr:nth-child(even){ background:var(--cmg-row-alt); }
.cmg-data tbody tr:hover{ background:var(--cmg-hover); }

.cmg-data th, .cmg-data td{
  border-bottom:1px solid rgba(148,163,184,.15);
}

.cmg-data td{
  padding:10px 10px; color:#c8d4e3; vertical-align:middle;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width: 280px; /* default clamp; overridden per-column below */
}

/* Column sizing & alignment (adjust indices to your sheet order) */
/* 1: SN */
.cmg-data td:nth-child(1), .cmg-data th:nth-child(1){
  width: 56px; min-width:56px; text-align:center;
}
/* 2: Client Name */
.cmg-data td:nth-child(2){ min-width: 180px; max-width: 220px; font-weight:600; }
/* 3: Mail Id */
.cmg-data td:nth-child(3){ min-width: 180px; max-width: 260px; }
/* 4–6: Status columns (center) */
.cmg-data td:nth-child(4),
.cmg-data td:nth-child(5),
.cmg-data td:nth-child(6){ text-align:center; min-width:140px; }
/* 7: Marketing Status (badge-like) */
.cmg-data td:nth-child(7){
  min-width: 150px; font-weight:600;
}
/* 8–9: Dates (monospace, centered) */
.cmg-data td:nth-child(8),
.cmg-data td:nth-child(9){
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  text-align:center; min-width: 130px;
}
/* 10: Remark (wider) */
.cmg-data td:nth-child(10){ min-width: 220px; max-width: 380px; }

/* Badges for status values (optional; applied via JS or server-side if you add classes) */
.cmg-badge{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid transparent; letter-spacing:.2px;
}
.cmg-badge--ok{ color:#b7f7c8; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); }
.cmg-badge--warn{ color:#ffe0b2; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); }
.cmg-badge--danger{ color:#ffd0d0; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); }

/* Error text */
.cmg-err{ color:#ffd2d2; padding:10px 0; }

/* Mobile layout */
@media (max-width: 900px){
  .cmg-input{ min-width:150px; width:100%; }
}
@media (max-width: 768px){
  .cmg-right{ flex-wrap:wrap; }
  .cmg-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  .cmg-table{ border-radius:12px; }
  .cmg-data thead{ display:none; }
  .cmg-data tr{ display:block; border-bottom:1px solid rgba(148,163,184,.12); padding:6px 8px; }
  .cmg-data td{
    display:flex; gap:12px; justify-content:space-between; border:none;
    padding:6px 2px; white-space:normal; max-width:none;
  }
  .cmg-data td::before{
    content: attr(data-title);
    color:var(--cmg-muted); font-weight:600; min-width:36%;
  }
}
/* === Table alignment fix === */
.cmg-data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  line-height: 1.4;
}

.cmg-data th,
.cmg-data td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(148,163,184,.15);
  vertical-align: middle;              /* ✅ keeps text centered vertically */
  line-height: 1.4;                    /* same for both header and body */
}

/* Sticky header */
.cmg-data thead th {
  position: sticky;
  top: 0;
  background: #0f192c;
  color: #cfe3ff;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Row styles */
.cmg-data tbody tr:nth-child(even) { background: #0c1220; }
.cmg-data tbody tr:hover { background: #111c31; }

/* Column width tweaks */
.cmg-data th:nth-child(1), .cmg-data td:nth-child(1) { width: 60px; text-align: center; }
.cmg-data th:nth-child(2), .cmg-data td:nth-child(2) { min-width: 160px; }
.cmg-data th:nth-child(3), .cmg-data td:nth-child(3) { min-width: 200px; }
.cmg-data th:nth-child(4), .cmg-data td:nth-child(4),
.cmg-data th:nth-child(5), .cmg-data td:nth-child(5),
.cmg-data th:nth-child(6), .cmg-data td:nth-child(6) { text-align: center; }
.cmg-data th:nth-child(8), .cmg-data td:nth-child(8),
.cmg-data th:nth-child(9), .cmg-data td:nth-child(9) {
  text-align: center;
  font-family: "Consolas","Courier New",monospace;
}

/* Tighten empty rows */
.cmg-data tbody tr:empty { display:none; }
.cmg-input-field, .cmg-select-field, .cmg-date-field{
  background:#0f1520; border:1px solid #22314a; color:#e8eef9; height:32px;
  border-radius:8px; padding:4px 8px; outline:none; width:100%;
}
.cmg-input-field:focus, .cmg-select-field:focus, .cmg-date-field:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.cmg-locked{
  color:#c8d4e3;
  opacity:.85;
  position:relative;
  padding-right:18px;
}
.cmg-locked::after{
  content:"🔒";
  position:absolute;
  right:0; top:50%; transform:translateY(-50%);
  font-size:12px; opacity:.8;
}
.cmg-locked{
  color:#c8d4e3; opacity:.88; position:relative; padding-right:18px;
}
.cmg-locked::after{
  content:"🔒"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:12px; opacity:.8;
}
/* ===========================
   CMG Status Badges + Row Flags
   =========================== */

/* Enforce fixed layout + no shifting */
/* table spans full width; no phantom spacing */
.cmg-data{
  width:105%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;         /* extra safety */
  box-sizing: border-box;
}

/* prevent cells from insisting on extra min-width */
.cmg-data th, .cmg-data td{
  min-width: 0;
}

/* the badge tail sits outside its inline box; allow overflow to show cleanly */
.cmg-data td{ overflow: visible; }

.cmg-flag::after{
  content:"";
  position:absolute;
  left:0; top:0;
  width:6px;                  /* thin stripe */
  height:100%;
  border-radius:0 4px 4px 0;
  pointer-events:none;
  background: var(--flag, rgba(148,163,184,.35));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18) inset,
    0 0 14px var(--flagGlow, transparent);

  /* 🧠 key line: draw the stripe 6px OUTSIDE the row, so table width stays full */
  transform: translateX(-6px);
}

/* ===========================
   Pill badge with left tail
   =========================== */
.cmg-tag{
  --tag-bg: rgba(148,163,184,.12);
  --tag-brd: rgba(148,163,184,.35);
  --tag-fg: #cbd5e1;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;       /* room for tail */
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: var(--tag-fg);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06)), var(--tag-bg);
  border: 1px solid var(--tag-brd);
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 2px 10px rgba(0,0,0,.18),
    0 0 0 3px rgba(255,255,255,.02) inset;
}

/* little left triangle "tail" */
.cmg-tag::before{
  content:"";
  position:absolute;
  left:-6px;                        /* hangs outside, no layout shift */
  top:50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 6px 6px 0;      /* ▶ */
  border-color: transparent var(--tag-brd) transparent transparent;
  filter: brightness(1.15);
}

/* Value color variants (match your class names) */
.cmg-tag.ok{
  --tag-bg: rgba(34,197,94,.12);
  --tag-brd: rgba(34,197,94,.35);
  --tag-fg: #b7f7c8;
  box-shadow: 0 0 14px rgba(34,197,94,.18);
}
.cmg-tag.warn{
  --tag-bg: rgba(245,158,11,.12);
  --tag-brd: rgba(245,158,11,.35);
  --tag-fg: #ffe0b2;
  box-shadow: 0 0 14px rgba(245,158,11,.18);
}
.cmg-tag.dang{
  --tag-bg: rgba(239,68,68,.12);
  --tag-brd: rgba(239,68,68,.38);
  --tag-fg: #ffd0d0;
  box-shadow: 0 0 14px rgba(239,68,68,.20);
}
.cmg-tag.mute{
  --tag-bg: rgba(148,163,184,.12);
  --tag-brd: rgba(148,163,184,.35);
  --tag-fg: #d5deea;
  box-shadow: 0 0 10px rgba(148,163,184,.12);
}

/* Subtle pulse when status changes */
@keyframes cmgPulse {
  0%   { transform: translateZ(0) scale(0.98); filter: saturate(1.2); }
  60%  { transform: translateZ(0) scale(1.02); }
  100% { transform: translateZ(0) scale(1); }
}
.cmg-status-pulse{
  animation: cmgPulse .5s ease-out;
}

/* Mobile keeps working as before; no extra column used */
/* ==== CMG New Client Modal ==== */
.cmg-new-btn{height:32px;padding:0 12px;border-radius:10px;font-weight:700;border:1px solid #2b3a57;background:#102035;color:#eaf1ff;cursor:pointer;box-shadow:0 0 0 3px rgba(59,130,246,.08) inset}
.cmg-new-btn:hover{filter:brightness(1.08)}
#cmgNewClientModal{display:none;position:fixed;inset:0;z-index:9999}
.cmg-modal-backdrop{position:absolute;inset:0;backdrop-filter:blur(2px);background:rgba(9,12,18,.65)}
.cmg-modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(780px,92vw);background:#0c1422;border:1px solid #24324d;border-radius:16px;box-shadow:0 20px 80px rgba(0,0,0,.45)}
.cmg-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #1f2a41}
.cmg-modal-hd h3{margin:0;font-size:16px;color:#dfe9ff;letter-spacing:.2px}
.cmg-modal-close{background:transparent;border:none;color:#9fb0c3;font-size:20px;cursor:pointer}
.cmg-modal-bd{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.cmg-field label{display:block;font-size:12px;color:#9fb0c3;margin-bottom:6px}
.cmg-field input,.cmg-field select,.cmg-field textarea{width:100%;height:36px;border-radius:10px;border:1px solid #22314a;background:#0f1520;color:#e8eef9;padding:6px 10px}
.cmg-modal-ft{padding:14px 16px;border-top:1px solid #1f2a41;display:flex;gap:10px;justify-content:flex-end}
.cmg-btn{height:36px;padding:0 14px;border-radius:10px;border:1px solid #2b3a57;background:#0f2749;color:#eaf1ff;font-weight:700;cursor:pointer}
.cmg-btn--pri{background:#123765;border-color:#2c5d9e}
.cmg-btn:disabled{opacity:.6;cursor:not-allowed}
.cmg-err{color:#ff9aa5;font-size:12px;grid-column:1 / -1;margin-top:-6px}
/* Keep tall items neat in table cells */
.cmg-data td { vertical-align: top; }

/* Single-line remark with ellipsis */
.cmg-remark-input{
  display:block;                 /* ensure ellipsis works consistently */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 28px;           /* room for info icon */
  position: relative;
}

/* Tiny info glyph on the right */
.cmg-remark-info{
  position:absolute;
  right:6px; top:50%;
  transform:translateY(-50%);
  font-size:12px;
  opacity:.75;
  pointer-events:none;           /* purely visual */
  user-select:none;
}

/* Tooltip / popover for full text */
.cmg-popover{
  position: fixed;               /* position near mouse */
  z-index: 99999;
  max-width: 520px;
  background: #0b1220;           /* dark theme */
  color: #e8eef9;
  border: 1px solid #2a3a57;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  font-size: 13px;
  line-height: 1.45;
  display: none;                 /* shown via JS */
  white-space: pre-wrap;
  word-break: break-word;
}
.cmg-popover .cmg-popover-hint{
  display:block;
  margin-top:6px;
  font-size:11px;
  opacity:.7;
}