/* Вкладка «Добавление клиента». Всё внутри #client-admin, классы с префиксом ca- */
#client-admin { --ca-bg: #1e293b; --ca-bg2: #0f172a; --ca-line: #334155; --ca-line2: #475569;
  --ca-text: #e2e8f0; --ca-muted: #94a3b8; --ca-dim: #64748b; --ca-blue: #3b82f6; --ca-green: #22c55e;
  --ca-red: #ef4444; --ca-amber: #f59e0b; --ca-violet: #a78bfa; }
#client-admin * { min-width: 0; }
#client-admin .ca-shell { display: flex; flex-direction: column; gap: 16px; }

/* шапка */
#client-admin .ca-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
#client-admin .ca-head h2 { font-size: 22px; margin: 0 0 4px; }
#client-admin .ca-head p { color: var(--ca-muted); font-size: 13px; max-width: 640px; line-height: 1.45; }
#client-admin .ca-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
#client-admin .ca-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ca-line);
  background: #273449; color: var(--ca-text); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; line-height: 1.2; }
#client-admin .ca-btn:hover { background: #334155; border-color: var(--ca-line2); }
#client-admin .ca-btn:disabled { opacity: .5; cursor: default; }
#client-admin .ca-btn.primary { background: var(--ca-blue); border-color: var(--ca-blue); color: #fff; }
#client-admin .ca-btn.primary:hover { background: #2563eb; }
#client-admin .ca-btn.danger { background: transparent; border-color: #7f1d1d; color: #fca5a5; }
#client-admin .ca-btn.danger:hover { background: #450a0a; }
#client-admin .ca-btn.ghost { background: transparent; }
#client-admin .ca-btn.sm { padding: 5px 9px; font-size: 12px; border-radius: 7px; }

/* поиск */
#client-admin .ca-search { background: var(--ca-bg); border: 1px solid var(--ca-line); border-radius: 12px; padding: 14px; }
#client-admin .ca-search-row { display: flex; gap: 8px; }
#client-admin .ca-search input { flex: 1; background: var(--ca-bg2); border: 1px solid var(--ca-line); color: var(--ca-text);
  border-radius: 9px; padding: 11px 14px; font-size: 15px; outline: none; width: 100%; }
#client-admin .ca-search input:focus { border-color: var(--ca-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
#client-admin .ca-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; color: var(--ca-dim); font-size: 12px; align-items: center; }
#client-admin .ca-chip { border: 1px dashed var(--ca-line2); border-radius: 999px; padding: 2px 9px; cursor: pointer; color: var(--ca-muted); }
#client-admin .ca-chip:hover { color: var(--ca-text); border-color: var(--ca-blue); }

/* сетка */
#client-admin .ca-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { #client-admin .ca-grid { grid-template-columns: minmax(0, 1fr); } }
#client-admin .ca-panel { background: var(--ca-bg); border: 1px solid var(--ca-line); border-radius: 12px; overflow: hidden; }
#client-admin .ca-panel-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--ca-line); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ca-muted); }
#client-admin .ca-list { max-height: calc(100vh - 260px); overflow-y: auto; }
@media (max-width: 1000px) { #client-admin .ca-list { max-height: 50vh; } }
#client-admin .ca-group { padding: 8px 14px 4px; font-size: 11px; color: var(--ca-dim); text-transform: uppercase; letter-spacing: .05em; }
#client-admin .ca-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid rgba(51,65,85,.6);
  padding: 11px 14px; color: var(--ca-text); cursor: pointer; font: inherit; }
#client-admin .ca-item:hover { background: rgba(59,130,246,.07); }
#client-admin .ca-item.active { background: rgba(59,130,246,.14); box-shadow: inset 3px 0 0 var(--ca-blue); }
#client-admin .ca-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
#client-admin .ca-item-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#client-admin .ca-item-meta { color: var(--ca-muted); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#client-admin .ca-empty { padding: 28px 18px; text-align: center; color: var(--ca-muted); font-size: 14px; line-height: 1.5; }
#client-admin .ca-empty b { color: var(--ca-text); display: block; font-size: 16px; margin-bottom: 6px; }

/* бейджи и полоса */
#client-admin .ca-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap; background: #273449; color: var(--ca-muted); border: 1px solid var(--ca-line); }
#client-admin .ca-badge.green { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.35); }
#client-admin .ca-badge.red { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.35); }
#client-admin .ca-badge.blue { background: rgba(59,130,246,.12); color: #93c5fd; border-color: rgba(59,130,246,.35); }
#client-admin .ca-badge.violet { background: rgba(167,139,250,.12); color: #c4b5fd; border-color: rgba(167,139,250,.35); }
#client-admin .ca-badge.amber { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.35); }
#client-admin .ca-bar { height: 6px; background: var(--ca-bg2); border-radius: 999px; overflow: hidden; margin-top: 8px; }
#client-admin .ca-bar > i { display: block; height: 100%; background: var(--ca-green); border-radius: 999px; }
#client-admin .ca-bar.warn > i { background: var(--ca-amber); }
#client-admin .ca-bar.bad > i { background: var(--ca-red); }

/* карточка клиента */
#client-admin .ca-card-head { padding: 16px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--ca-line); background: linear-gradient(180deg, rgba(59,130,246,.08), transparent); }
#client-admin .ca-card-name { font-size: 19px; font-weight: 700; word-break: break-all; }
#client-admin .ca-card-sub { color: var(--ca-muted); font-size: 12px; margin-top: 4px; word-break: break-all; }
#client-admin .ca-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#client-admin .ca-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; }
@media (max-width: 640px) { #client-admin .ca-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#client-admin .ca-stat { background: var(--ca-bg2); border: 1px solid var(--ca-line); border-radius: 10px; padding: 10px 12px; }
#client-admin .ca-stat span { display: block; font-size: 11px; color: var(--ca-muted); text-transform: uppercase; letter-spacing: .04em; }
#client-admin .ca-stat b { display: block; font-size: 20px; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#client-admin .ca-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--ca-line); overflow-x: auto; scrollbar-width: none; }
#client-admin .ca-tab { background: none; border: 0; color: var(--ca-muted); padding: 11px 12px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
#client-admin .ca-tab:hover { color: var(--ca-text); }
#client-admin .ca-tab.active { color: #93c5fd; border-bottom-color: var(--ca-blue); }
#client-admin .ca-tab-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* подписка внутри карточки */
#client-admin .ca-sub { border: 1px solid var(--ca-line); border-radius: 10px; padding: 14px; background: rgba(15,23,42,.45); }
#client-admin .ca-sub.off { opacity: .75; }
#client-admin .ca-sub-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
#client-admin .ca-sub-title { font-size: 16px; font-weight: 700; }
#client-admin .ca-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin-top: 12px; font-size: 13px; }
@media (max-width: 560px) { #client-admin .ca-kv { grid-template-columns: minmax(0, 1fr); } #client-admin .ca-kv dt { margin-top: 6px; } }
#client-admin .ca-kv dt { color: var(--ca-muted); }
#client-admin .ca-kv dd { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#client-admin .ca-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all;
  background: var(--ca-bg2); border: 1px solid var(--ca-line); padding: 3px 7px; border-radius: 6px; }
#client-admin .ca-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ca-line); }
#client-admin .ca-section-title { font-size: 13px; font-weight: 700; color: var(--ca-text); margin-bottom: 2px; }
#client-admin .ca-hint { color: var(--ca-muted); font-size: 12px; line-height: 1.45; }
#client-admin .ca-danger-zone { border: 1px solid #7f1d1d; border-radius: 10px; padding: 14px; background: rgba(127,29,29,.12); }

/* таблицы */
#client-admin .ca-table-wrap { overflow-x: auto; border: 1px solid var(--ca-line); border-radius: 10px; }
#client-admin table.ca-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#client-admin .ca-table th { text-align: left; color: var(--ca-muted); font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; padding: 9px 12px; background: var(--ca-bg2); border-bottom: 1px solid var(--ca-line); white-space: nowrap; }
#client-admin .ca-table td { padding: 9px 12px; border-bottom: 1px solid rgba(51,65,85,.6); vertical-align: top; }
#client-admin .ca-table tr:last-child td { border-bottom: 0; }
#client-admin .ca-table tr.clickable { cursor: pointer; }
#client-admin .ca-table tr.clickable:hover td { background: rgba(59,130,246,.06); }
#client-admin .ca-plus { color: #86efac; font-weight: 600; white-space: nowrap; }
#client-admin .ca-minus { color: #fca5a5; font-weight: 600; white-space: nowrap; }
#client-admin .ca-nowrap { white-space: nowrap; }

/* окна и уведомления (вне #client-admin, но со своими классами) */
.ca-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.7); backdrop-filter: blur(3px); z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.ca-modal { width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; background: #1e293b; color: #e2e8f0;
  border: 1px solid #334155; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); font-family: inherit; }
.ca-modal h3 { font-size: 17px; padding: 16px 18px 0; margin: 0; }
.ca-modal .ca-modal-text { padding: 8px 18px 0; color: #94a3b8; font-size: 13px; line-height: 1.5; white-space: pre-line; }
.ca-modal form { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.ca-modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #cbd5e1; }
.ca-modal label.ca-check { flex-direction: row; align-items: center; gap: 8px; }
.ca-modal input[type=text], .ca-modal input[type=email], .ca-modal input[type=number], .ca-modal input[type=password] {
  background: #0f172a; border: 1px solid #334155; color: #e2e8f0; border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; width: 100%; }
.ca-modal input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.ca-modal .ca-field-hint { color: #64748b; font-size: 12px; }
.ca-modal .ca-modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.ca-modal .ca-modal-btns button { border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid #334155;
  background: #273449; color: #e2e8f0; }
.ca-modal .ca-modal-btns button.primary { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.ca-modal .ca-modal-btns button.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.ca-modal .ca-modal-btns button:disabled { opacity: .6; cursor: default; }
.ca-modal .ca-modal-error { color: #fca5a5; font-size: 13px; display: none; }
.ca-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2100; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.ca-toast { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-left: 4px solid #3b82f6; border-radius: 10px;
  padding: 11px 14px; font-size: 13px; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: ca-in .2s ease-out; word-break: break-word; }
.ca-toast.ok { border-left-color: #22c55e; }
.ca-toast.err { border-left-color: #ef4444; }
@keyframes ca-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
#client-admin .ca-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: ca-rot .7s linear infinite; vertical-align: -2px; }
@keyframes ca-rot { to { transform: rotate(360deg); } }