/* ============================================================
   customers.css — Customers admin page
   Depends on: main.css + dashboard.css
   ============================================================ */

.cst-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cst-header__left { display: flex; flex-direction: column; gap: 0.15rem; }
.cst-header__title { font-family: var(--gx-font-heading); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--gx-dark); }
.cst-header__sub { font-size: 0.875rem; color: var(--gx-gray-mid); }
.cst-header__actions { display: flex; align-items: center; gap: 0.5rem; }

.cst-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: var(--gx-r-full); font-size: 0.85rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all var(--gx-t); white-space: nowrap; }
.cst-btn--outline { background: transparent; border-color: var(--gx-gray-light); color: var(--gx-g300); }
.cst-btn--outline:hover { background: var(--gx-off-white); border-color: var(--gx-gray); }
.cst-btn--primary { background: var(--gx-dark); border-color: var(--gx-dark); color: var(--gx-lime); }
.cst-btn--primary:hover { background: var(--gx-gray-dark); }
.cst-btn__icon { width: 1.5rem; height: 1.5rem; background: var(--gx-lime); color: var(--gx-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Stat strip */
.cst-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.cst-strip-card { background: var(--gx-white); border: 1px solid var(--gx-gray-light); border-radius: var(--gx-r-lg); padding: 1rem 1.25rem; cursor: pointer; transition: all var(--gx-t); display: flex; flex-direction: column; gap: 0.25rem; }
.cst-strip-card:hover { border-color: var(--gx-gray); box-shadow: var(--gx-sh); }
.cst-strip-card.is-active { border-color: var(--gx-dark); background: var(--gx-dark); }
.cst-strip-card__label { font-family: var(--gx-font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gx-gray-mid); }
.cst-strip-card.is-active .cst-strip-card__label { color: rgba(255,255,255,0.4); }
.cst-strip-card__val { font-family: var(--gx-font-heading); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.04em; color: var(--gx-dark); line-height: 1; }
.cst-strip-card.is-active .cst-strip-card__val { color: var(--gx-lime); }
.cst-strip-card__dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 0.25rem; }

/* Filter bar */
.cst-filter-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cst-search { display: flex; align-items: center; gap: 0.5rem; background: var(--gx-off-white); border: 1px solid var(--gx-gray-light); border-radius: var(--gx-r-full); padding: 0.5rem 1rem; flex: 1; min-width: 200px; max-width: 280px; transition: border-color var(--gx-t); }
.cst-search:focus-within { border-color: var(--gx-lime-dark); }
.cst-search__input { background: none; border: none; outline: none; font-size: 0.85rem; color: var(--gx-dark); flex: 1; min-width: 0; }
.cst-search__input::placeholder { color: var(--gx-gray-mid); }
.cst-filter-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: var(--gx-r-full); font-size: 0.8rem; font-weight: 500; color: var(--gx-g300); background: var(--gx-white); border: 1px solid var(--gx-gray-light); cursor: pointer; transition: all var(--gx-t); white-space: nowrap; }
.cst-filter-btn:hover { border-color: var(--gx-gray); background: var(--gx-off-white); }
.cst-sort-wrap { margin-left: auto; }

/* Customer cell */
.cst-customer { display: flex; align-items: center; gap: 0.65rem; }
.cst-customer__avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--gx-dark); color: var(--gx-lime); font-family: var(--gx-font-heading); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cst-customer__name { font-size: 0.875rem; font-weight: 600; color: var(--gx-dark); line-height: 1.2; }
.cst-customer__email { font-size: 0.72rem; color: var(--gx-gray-mid); }

/* Tier badge */
.cst-tier { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: var(--gx-r-full); font-family: var(--gx-font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cst-tier--standard { background: rgba(100,116,139,0.12); color: #475569; }
.cst-tier--premium  { background: rgba(99,102,241,0.12); color: #4338ca; }
.cst-tier--vip      { background: rgba(201,236,102,0.2); color: var(--gx-lime-dark); }

/* Stats cell */
.cst-stat-cell { font-size: 0.82rem; color: var(--gx-g300); }
.cst-stat-cell__main { font-family: var(--gx-font-heading); font-weight: 700; color: var(--gx-dark); font-size: 0.9rem; }

/* Row actions */
.cst-row-actions { display: flex; gap: 0.3rem; opacity: 0; transition: opacity var(--gx-t); }
.cst-table .db-table tbody tr:hover .cst-row-actions { opacity: 1; }
.cst-row-btn { width: 1.75rem; height: 1.75rem; border-radius: var(--gx-r-sm); background: var(--gx-off-white); border: 1px solid var(--gx-gray-light); color: var(--gx-g300); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--gx-t); }
.cst-row-btn:hover { background: var(--gx-dark); color: var(--gx-lime); border-color: var(--gx-dark); }

/* Pagination */
.cst-pagination { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--gx-gray-light); gap: 1rem; flex-wrap: wrap; }
.cst-pagination__info { font-family: var(--gx-font-mono); font-size: 0.68rem; color: var(--gx-gray-mid); letter-spacing: 0.04em; }
.cst-pages { display: flex; align-items: center; gap: 0.25rem; }
.cst-page { width: 2rem; height: 2rem; border-radius: var(--gx-r-sm); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; color: var(--gx-g300); background: transparent; transition: all var(--gx-t); }
.cst-page:hover { background: var(--gx-off-white); border-color: var(--gx-gray-light); }
.cst-page.is-active { background: var(--gx-dark); color: var(--gx-lime); border-color: var(--gx-dark); }
.cst-page--arrow { color: var(--gx-gray-mid); }
.cst-page--arrow:disabled { opacity: 0.35; cursor: default; }

/* ============================================================
   Dark theme
   ============================================================ */
[data-theme="dark"] .cst-header__title { color: #dde4f2; }
[data-theme="dark"] .cst-header__sub { color: #5c6880; }
[data-theme="dark"] .cst-btn--outline { background: transparent; border-color: rgba(255,255,255,0.1); color: #8090b0; }
[data-theme="dark"] .cst-btn--outline:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .cst-strip-card { background: #0f1420; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .cst-strip-card:hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
[data-theme="dark"] .cst-strip-card__label { color: #4a5568; }
[data-theme="dark"] .cst-strip-card__val { color: #dde4f2; }
[data-theme="dark"] .cst-search { background: #080c14; border-color: rgba(255,255,255,0.09); }
[data-theme="dark"] .cst-search__input { color: #dde4f2; }
[data-theme="dark"] .cst-search__input::placeholder { color: #4a5568; }
[data-theme="dark"] .cst-filter-btn { background: #0f1420; border-color: rgba(255,255,255,0.09); color: #8090b0; }
[data-theme="dark"] .cst-filter-btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
[data-theme="dark"] .cst-customer__name { color: #dde4f2; }
[data-theme="dark"] .cst-customer__email { color: #5c6880; }
[data-theme="dark"] .cst-tier--standard { background: rgba(100,116,139,0.2); color: #94a3b8; }
[data-theme="dark"] .cst-tier--premium { background: rgba(99,102,241,0.2); color: #818cf8; }
[data-theme="dark"] .cst-tier--vip { background: rgba(201,236,102,0.15); color: var(--gx-lime); }
[data-theme="dark"] .cst-stat-cell { color: #b0bed4; }
[data-theme="dark"] .cst-stat-cell__main { color: #dde4f2; }
[data-theme="dark"] .cst-row-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #7080a0; }
[data-theme="dark"] .cst-row-btn:hover { background: var(--gx-lime); color: var(--gx-dark); border-color: var(--gx-lime); }
[data-theme="dark"] .cst-pagination { border-top-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .cst-pagination__info { color: #4a5568; }
[data-theme="dark"] .cst-page { color: #7080a0; }
[data-theme="dark"] .cst-page:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }

@media (max-width: 1200px) { .cst-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .cst-filter-bar { flex-direction: column; align-items: stretch; } .cst-search { max-width: 100%; } .cst-sort-wrap { margin-left: 0; } }