/* Клиенти (07.10.2026) - префикс cu-. Макет: docs/mockups/admin-tabs-variants.html (В) */
/* Картата (фон, сянка, радиус, слята с лентата на таблото) идва от tab-card.css - там е и #customers */
#customers { color: #2b231d; }
#customers button { min-height: 0; }

.cu-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cu-top > div { flex: 1; min-width: 0; }
.cu-top h1 { margin: 0; font-size: 1.35rem; font-weight: 800; }
.cu-top p { margin: 2px 0 0; color: #8a7866; font-size: .9rem; }

.cu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 11px;
    border: 1px solid #e6d4bf; background: #fff; color: #2b231d; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
}
.cu-btn i { color: #a8743f; }
.cu-btn:hover { background: #fbf4ec; }
.cu-btn--pri { background: #3a2f26; border-color: #3a2f26; color: #fff; }
.cu-btn--pri i { color: #f1d3a6; }
.cu-btn--pri:hover { background: #2b231d; }
.cu-btn--sm { padding: 7px 11px; font-size: .8rem; border-radius: 9px; white-space: nowrap; }
.cu-btn--dng, .cu-btn--dng i { color: #b3261e; }
.cu-btn--ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.cu-btn--ghost i { color: #f1d3a6; }
.cu-btn--ghost:hover { background: rgba(255, 255, 255, .18); }

.cu-wrap { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: start; }
.cu-list { border: 1px solid #efe4d8; border-radius: 16px; overflow: hidden; background: #fff; }
.cu-tools { padding: 10px; border-bottom: 1px solid #efe4d8; display: grid; gap: 8px; }
.cu-search { display: flex; align-items: center; gap: 8px; border: 1px solid #efe4d8; border-radius: 12px; padding: 0 12px; background: #fff; }
.cu-search i { color: #8a7866; }
.cu-search input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 0; background: none; }
.cu-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cu-chip { border: 1px solid #efe4d8; background: #fff; border-radius: 999px; padding: 6px 11px; font: inherit; font-size: .8rem; font-weight: 700; color: #5a4a3a; cursor: pointer; }
.cu-chip.on { background: #3a2f26; border-color: #3a2f26; color: #fff; }
.cu-chip small { opacity: .7; margin-left: 3px; }
.cu-items { max-height: 640px; overflow-y: auto; }
.cu-item { display: flex; width: 100%; gap: 10px; align-items: center; padding: 11px 12px; border: 0; border-top: 1px solid #efe4d8; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.cu-items .cu-item:first-child { border-top: 0; }
.cu-item:hover { background: #fdf8f1; }
.cu-item.on { background: #fbf4ec; box-shadow: inset 3px 0 0 #d4a574; }
.cu-item-t { flex: 1; min-width: 0; }
.cu-item-t b { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-item-t small { color: #8a7866; font-size: .78rem; }
.cu-ini { width: 36px; height: 36px; border-radius: 50%; background: #f3e6d6; color: #a8743f; display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: none; }
.cu-ini--lg { width: 56px; height: 56px; font-size: 1.1rem; }
.cu-empty { padding: 28px 16px; text-align: center; color: #8a7866; }
.cu-empty-s { padding: 10px 0; color: #8a7866; font-size: .88rem; }

.cu-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-weight: 800; white-space: nowrap; flex: none; }
.cu-pill--ok { background: #e7f4e8; color: #2f7a35; }
.cu-pill--warn { background: #fdf1dc; color: #9a5d0b; }
.cu-pill--bad { background: #fbe9e7; color: #b3261e; }
.cu-pill--m { background: #f3e6d6; color: #a8743f; }
.cu-sub .cu-pill--ok { background: rgba(63, 157, 69, .25); color: #b8e6bb; }
.cu-sub .cu-pill--warn { background: rgba(253, 241, 220, .2); color: #f6d9a0; }
.cu-sub .cu-pill--bad { background: rgba(251, 233, 231, .2); color: #f5b4ad; }

.cu-page { border: 1px solid #efe4d8; border-radius: 16px; padding: 18px; min-width: 0; }
.cu-back { display: none; margin-bottom: 12px; padding: 8px 12px; border: 1px solid #efe4d8; border-radius: 11px; background: #fff; font: inherit; font-weight: 700; color: #3b2d22; cursor: pointer; }
.cu-hero { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cu-hero-t { flex: 1; min-width: 0; }
.cu-hero-t h2 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.cu-hero-t small { color: #8a7866; }
.cu-hero-a { display: flex; gap: 8px; }
.cu-tabs { display: flex; gap: 2px; border-bottom: 1px solid #efe4d8; margin: 16px 0; overflow-x: auto; scrollbar-width: none; }
.cu-tabs::-webkit-scrollbar { display: none; }
.cu-tabs button { border: 0; background: none; padding: 10px 14px; font: inherit; font-weight: 800; color: #8a7866; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.cu-tabs button.on { color: #2b231d; border-color: #d4a574; }
.cu-tabs small { opacity: .7; }

.cu-sub { background: linear-gradient(135deg, #3a2f26, #57432f); color: #fff; border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.cu-sub-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #e3d4c2; font-size: .86rem; }
.cu-sub-line { font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; }
.cu-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.cu-bar i { display: block; height: 100%; background: linear-gradient(135deg, #f1d3a6, #d4a574); }
.cu-bar.low i { background: linear-gradient(135deg, #f3b4ad, #e0453a); }
.cu-sub-a { display: flex; gap: 8px; flex-wrap: wrap; }

.cu-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.cu-box { border: 1px solid #efe4d8; border-radius: 14px; padding: 12px; min-width: 0; }
.cu-lbl { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a7866; margin-bottom: 6px; }
.cu-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cu-sec-h .cu-lbl { margin: 0; }
.cu-u { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #efe4d8; font-size: .88rem; flex-wrap: wrap; }
.cu-lbl + .cu-u, .cu-sec-h + .cu-u { border-top: 0; }
.cu-u-t { flex: 1; min-width: 140px; }
.cu-u-t b { display: block; overflow-wrap: anywhere; }
.cu-u-t small { color: #8a7866; font-size: .78rem; }
.cu-u-a { display: inline-flex; gap: 6px; }
.cu-ic { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #efe4d8; background: #fff; color: #a8743f; cursor: pointer; display: grid; place-items: center; padding: 0; }
.cu-ic:hover { background: #fbf4ec; }
.cu-ic--dng { color: #b3261e; }
.cu-more { margin-top: 6px; border: 0; background: none; color: #a8743f; font: inherit; font-weight: 800; cursor: pointer; padding: 6px 0; }
.cu-f { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .88rem; }
.cu-f i { color: #d9c6ae; width: 18px; text-align: center; }
.cu-f i.on { color: #2f7a35; }
.cu-f .cu-pill { margin-left: auto; }
.cu-h { display: grid; grid-template-columns: 90px 90px 80px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid #efe4d8; font-size: .86rem; align-items: center; }
.cu-h small { color: #8a7866; overflow-wrap: anywhere; }
.cu-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .9rem; }
.cu-kv span { color: #8a7866; }
.cu-kv b { text-align: right; }
.cu-invs { display: grid; gap: 8px; }
.cu-inv { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto 18px; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid #efe4d8; border-radius: 12px; text-decoration: none; color: inherit; font-size: .88rem; }
.cu-inv:hover { background: #fdf8f1; }
.cu-inv i { color: #a8743f; font-size: .8rem; }
.cu-feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.cu-feat { border: 1px solid #efe4d8; border-radius: 14px; padding: 12px; display: grid; gap: 4px; color: #8a7866; }
.cu-feat i { font-size: 1.2rem; color: #d9c6ae; }
.cu-feat b { color: #2b231d; font-size: .9rem; }
.cu-feat span { font-size: .78rem; }
.cu-feat.on { background: #fbf4ec; }
.cu-feat.on i { color: #a8743f; }
.cu-note { margin: 14px 0 0; color: #8a7866; font-size: .86rem; }
.cu-note a { color: #a8743f; font-weight: 700; }

/* Таблет: по-тясен списък вляво */
@media (max-width: 1023px) {
    .cu-wrap { grid-template-columns: 280px minmax(0, 1fr); }
}

/* Телефон: ЕДИН екран наведнъж - списък, а след избор страницата на клиента */
@media (max-width: 767px) {
    .cu-wrap { grid-template-columns: 1fr; }
    .cu-wrap .cu-page { display: none; }
    .cu-wrap.is-detail .cu-list { display: none; }
    .cu-wrap.is-detail .cu-page { display: block; padding: 14px; }
    .cu-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
    .cu-items { max-height: none; }
    .cu-item { min-height: 60px; padding: 12px; }
    .cu-top { gap: 8px; }
    .cu-top .cu-btn { min-height: 44px; }
    .cu-chip { min-height: 38px; padding: 7px 12px; }
    .cu-btn { min-height: 44px; }
    .cu-btn--sm { min-height: 40px; }
    .cu-ic { width: 44px; height: 44px; }
    .cu-hero-a { width: 100%; }
    .cu-hero-a .cu-btn:first-child { flex: 1; }
    .cu-tabs button { padding: 12px 12px; }
    .cu-two { grid-template-columns: 1fr; }
    .cu-sub-a .cu-btn { flex: 1 1 140px; }
    .cu-h { grid-template-columns: 1fr 1fr; }
    .cu-h small { grid-column: 1 / -1; }
    .cu-inv { grid-template-columns: 1fr auto; }
    .cu-inv span:nth-of-type(1), .cu-inv span:nth-of-type(2) { color: #8a7866; }
    .cu-inv i { display: none; }
    .cu-u-a { margin-left: auto; }
    .cu-top h1 { font-size: 1.2rem; }
}

/* Функции и адрес (редактируеми), бързи връзки, активност (07.10.2026) */
.cu-feat { cursor: default; grid-template-columns: auto 1fr auto; align-items: center; grid-auto-flow: column; gap: 4px 10px; }
.cu-feat span { font-size: .78rem; }
.cu-sw { position: relative; display: inline-block; width: 44px; height: 26px; }
.cu-sw input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.cu-sw i { position: absolute; inset: 0; border-radius: 999px; background: #d9c6ae; transition: background .2s; }
.cu-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.cu-sw input:checked + i { background: #3a2f26; }
.cu-sw input:checked + i::after { transform: translateX(18px); }
.cu-sw input:disabled { cursor: not-allowed; }
.cu-sw input:disabled + i { opacity: .55; }
.cu-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 16px; }
.cu-field label { display: block; font-size: .78rem; font-weight: 800; color: #5a4a3a; margin-bottom: 6px; }
.cu-field label small { font-weight: 500; color: #8a7866; margin-left: 4px; }
.cu-row { display: flex; gap: 8px; }
.cu-row select, .cu-row input { flex: 1; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid #e6d4bf; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: #2b231d; }
.cu-row select:focus, .cu-row input:focus { outline: none; border-color: #d4a574; box-shadow: 0 0 0 3px rgba(212, 165, 116, .28); }
.cu-row button { flex: none; }
.cu-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #e6d4bf; border-radius: 12px; background: #fff; color: #2b231d; font-weight: 700; font-size: .86rem; text-decoration: none; }
.cu-link i { color: #a8743f; }
.cu-link:hover { background: #fbf4ec; }
.cu-act { display: grid; gap: 0; }
.cu-act-i { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #efe4d8; font-size: .88rem; }
.cu-lbl + .cu-act .cu-act-i:first-child { border-top: 0; }
.cu-act-d { color: #5a4a3a; font-weight: 700; font-size: .82rem; }
.cu-act-d small { display: block; color: #8a7866; font-weight: 500; }
.cu-act-i b { display: block; overflow-wrap: anywhere; }
.cu-act-i small { color: #8a7866; font-size: .76rem; }
@media (max-width: 767px) {
    .cu-form { grid-template-columns: 1fr; }
    .cu-sw { width: 50px; height: 30px; }
    .cu-sw i::after { width: 24px; height: 24px; }
    .cu-sw input:checked + i::after { transform: translateX(20px); }
    .cu-act-i { grid-template-columns: 1fr; gap: 2px; }
    .cu-link { flex: 1 1 100%; min-height: 46px; }
    .cu-row button { min-height: 44px; }
}

/* архивиране (13.10.2026) */
.cu-arch { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #f3eee8; border: 1px solid #e3d6c6; color: #5a4a3a; font-size: .88rem; line-height: 1.45; }
.cu-arch i { margin-top: 3px; color: #8a7662; }
.cu-arch-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; font-size: .9rem; color: #3f3328; }
.cu-arch-list li { display: flex; gap: 10px; align-items: flex-start; }
.cu-arch-list i { width: 18px; margin-top: 3px; color: #a8743f; text-align: center; }
.cu-btn[disabled] { opacity: .45; cursor: not-allowed; }
#cuArchReason { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e3d6c6; border-radius: 10px; font: inherit; resize: vertical; }

/* чистка на неактивни клиенти (13.10.2026) */
.cu-cleanup { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 12px 16px; border: 1px solid #e6d4bf; border-radius: 14px; background: #fbf3e8; color: #3f3328; font: inherit; text-align: left; cursor: pointer; }
.cu-cleanup:hover { background: #f6e8d4; }
.cu-cleanup > i { color: #a8743f; }
.cu-cleanup span { flex: 1; }
.cu-cleanup em { font-style: normal; font-weight: 700; color: #7a4f24; white-space: nowrap; }
.cu-cq { margin: 0 0 12px; padding: 14px; border: 1px solid #ecdcc8; border-radius: 14px; background: #fffaf3; }
.cu-cq-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cu-cq-b { padding: 3px 10px; border-radius: 999px; background: #e9efe9; color: #2f6b45; font-size: .76rem; font-weight: 700; }
.cu-cq-b.is-del { background: #fdecea; color: #b3261e; }
.cu-cq-m { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: .82rem; color: #6d5a48; }
.cu-cq-m i { color: #a8743f; width: 14px; }
.cu-cq-r { margin: 8px 0 0; font-size: .85rem; color: #5a4a3a; }
.cu-cq-ok { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: .84rem; color: #5a4a3a; }
.cu-cq-a { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.cu-cq-hist { margin: 14px 0 0; }
.cu-cq-hist summary { cursor: pointer; font-weight: 700; color: #5a3d1f; }
.cu-cq-hr { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px dashed #ecdcc8; }
.cu-cq-hr span { font-size: .84rem; color: #3f3328; }
.cu-cq-hr small { color: #8a7662; }
@media (max-width: 560px) { .cu-cleanup em { display: none; } .cu-cq-a .cu-btn { flex: 1 1 100%; justify-content: center; } }

/* прекратяване на Stripe абонамент (13.10.2026) */
.cu-warn { margin: 12px 0 0; padding: 12px 14px; border: 1px solid #efc9c4; border-radius: 12px; background: #fdf1ef; color: #6b2a24; font-size: .88rem; }
.cu-warn p { margin: 0 0 10px; line-height: 1.45; }
.cu-sc-list { display: grid; gap: 8px; margin: 0 0 10px; }
.cu-sc-row { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #ecdcc8; border-radius: 12px; background: #fffaf3; font-size: .86rem; }
.cu-sc-row b { word-break: break-all; font-size: .8rem; color: #5a4a3a; }
.cu-sc-row em { font-style: normal; font-weight: 700; color: #3f3328; }
.cu-sc-row small { color: #8a7662; }

/* пробен период - свой цвят (синьо), различен от „Активен“ (зелено) - 13.10.2026 */
.cu-pill--trial { background: #e3ecfb; color: #2a4f9e; }
.cu-sub .cu-pill--trial { background: rgba(120, 160, 240, .25); color: #bcd0fa; }