/* ============================================================
   CLIENTES — Tema Papel Claro (match fornecedores.css)
   ============================================================ */

#view-clientes {
    background:var(--paper);
    min-height:calc(100vh - 56px);
    padding:28px 32px 60px;
    font-family:'Inter',sans-serif;
    color:var(--ink);
}
#view-clientes .mono {
    font-family:'IBM Plex Mono',monospace;
}

/* ---------- HEADER / TOPLINE ---------- */
#view-clientes .topline {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:24px;
}
#view-clientes .title-block {
    display:flex;
    gap:14px;
    align-items:flex-start;
}
#view-clientes .title-mark {
    width:42px;height:42px;border-radius:9px;
    background:var(--brand);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    box-shadow:var(--shadow-card);
}
#view-clientes .title-mark svg {
    width:21px;height:21px;stroke:#fff;
}
#view-clientes h1 {
    font-family:'Space Grotesk',sans-serif;
    font-size:24px;
    font-weight:700;
    margin:0 0 2px;
    letter-spacing:-0.01em;
    display:flex;
    align-items:baseline;
    gap:8px;
}
#view-clientes h1 .count {
    font-size:14px;
    font-weight:500;
    color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;
}
#view-clientes .subtitle {
    color:var(--ink-soft);
    font-size:13.5px;
    margin:0;
}
#view-clientes .top-actions {
    display:flex;
    gap:10px;
    align-items:center;
}
#view-clientes .search {
    position:relative;
}
#view-clientes .search svg {
    position:absolute;left:13px;top:50%;
    transform:translateY(-50%);
    width:15px;height:15px;
    stroke:var(--ink-faint);
}
#view-clientes .search input {
    width:230px;
    padding:10px 14px 10px 36px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--card);
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    color:var(--ink);
    outline:none;
    transition:border-color .12s ease, width .15s ease;
}
#view-clientes .search input:focus {
    border-color:var(--teal);
    width:270px;
}
#view-clientes .search input::placeholder {
    color:var(--ink-faint);
}
#view-clientes .btn-primary {
    display:inline-flex;align-items:center;gap:8px;
    background:var(--brand);color:#fff;border:none;
    padding:11px 18px;border-radius:8px;
    font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;
    cursor:pointer;white-space:nowrap;
    transition:background .15s ease;
    box-shadow:var(--shadow-card);
}
#view-clientes .btn-primary:hover {
    background:var(--brand-hover);
}
#view-clientes .btn-primary svg {
    width:15px;height:15px;stroke:#fff;
}

/* ---------- STATS ---------- */
#view-clientes .stats {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:22px;
}
#view-clientes .stat {
    background:var(--card);
    padding:16px 20px;
    display:flex;
    flex-direction:column;
    gap:4px;
}
#view-clientes .stat-num {
    font-family:'Space Grotesk',sans-serif;
    font-size:26px;
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:1;
}
#view-clientes .stat-label {
    font-size:11.5px;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:.05em;
    display:flex;
    align-items:center;
    gap:6px;
}
#view-clientes .dot {
    width:7px;height:7px;border-radius:50%;display:inline-block;
}
#view-clientes .dot-teal {background:var(--teal);}
#view-clientes .dot-amber {background:var(--amber);}
#view-clientes .dot-ink {background:var(--ink-faint);}

/* ---------- TOOLBAR ---------- */
#view-clientes .toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}
#view-clientes .segmented {
    display:flex;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    background:var(--card);
    flex:0 0 auto;
}
#view-clientes .segmented button {
    border:none;
    background:transparent;
    padding:10px 14px;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:500;
    color:var(--ink-soft);
    cursor:pointer;
    border-right:1px solid var(--line);
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:6px;
    transition:background .12s ease, color .12s ease;
}
#view-clientes .segmented button:last-child {
    border-right:none;
}
#view-clientes .segmented button.active {
    background:var(--ink);
    color:#fff;
}
#view-clientes .segmented button.active svg {
    stroke:#fff;
}
#view-clientes .segmented button .count {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    opacity:.7;
}
#view-clientes select#sortSelect {
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--card);
    padding:10px 32px 10px 14px;
    font-family:'Inter',sans-serif;
    font-size:13px;
    color:var(--ink);
    cursor:pointer;
    outline:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B675E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
}

/* ---------- META ROW ---------- */
#view-clientes .meta-row {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:12px;
    font-size:12.5px;
    color:var(--ink-soft);
}
#view-clientes .meta-row .mono {
    color:var(--ink-faint);
}

/* ---------- GRID / CARDS ---------- */
#view-clientes .grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:26px;
}
#view-clientes .ccard {
    background:var(--card);
    border:1px solid var(--line);
    border-left:3px solid var(--teal);
    border-radius:9px;
    padding:16px 16px 15px;
    box-shadow:var(--shadow-card);
    transition:box-shadow .12s ease, transform .12s ease;
    display:flex;
    flex-direction:column;
    gap:11px;
}
#view-clientes .ccard:hover {
    box-shadow:0 4px 14px rgba(27,26,23,0.07);
    transform:translateY(-1px);
}
#view-clientes .ccard.inativo {
    border-left-color:var(--amber);
}
#view-clientes .ccard-top {
    display:flex;
    align-items:flex-start;
    gap:11px;
}
#view-clientes .avatar {
    width:38px;height:38px;border-radius:8px;color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;
    flex-shrink:0;
}
#view-clientes .ccard-id {
    flex:1;
    min-width:0;
}
#view-clientes .ccard-name {
    font-weight:600;
    font-size:14.5px;
    line-height:1.25;
    margin:0 0 3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#view-clientes .ccard-tags {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
#view-clientes .type-tag {
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    letter-spacing:.03em;
    color:var(--ink-faint);
    border:1px solid var(--line);
    border-radius:4px;
    padding:1px 5px;
}
#view-clientes .badge {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:600;
    padding:4px 8px;
    border-radius:20px;
    width:fit-content;
}
#view-clientes .badge svg {
    width:10px;height:10px;
}
#view-clientes .badge-ativo {
    background:var(--teal-soft);
    color:var(--teal);
}
#view-clientes .badge-ativo svg {
    fill:var(--teal);stroke:none;
}
#view-clientes .badge-inativo {
    background:var(--amber-soft);
    color:var(--amber);
}
#view-clientes .badge-inativo svg {
    fill:var(--amber);stroke:none;
}
#view-clientes .ccard-details {
    display:flex;
    flex-direction:column;
    gap:5px;
}
#view-clientes .ccard-details div {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    color:var(--ink-soft);
    overflow:hidden;
}
#view-clientes .ccard-details svg {
    width:12px;height:12px;
    stroke:var(--ink-faint);
    flex-shrink:0;
}
#view-clientes .ccard-details span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#view-clientes .projcount {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--ink-soft);
}
#view-clientes .projcount svg {
    width:12px;height:12px;
    stroke:var(--ink-faint);
}
#view-clientes .ccard-foot {
    margin-top:auto;
    padding-top:11px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
#view-clientes .ccard-note {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    color:var(--ink-faint);
    font-style:italic;
    overflow:hidden;
}
#view-clientes .ccard-note svg {
    width:11px;height:11px;
    stroke:var(--ink-faint);
    flex-shrink:0;
}
#view-clientes .ccard-note span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#view-clientes .ccard-actions {
    display:flex;
    gap:6px;
    flex-shrink:0;
}
#view-clientes .action-btn {
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:1px solid var(--line);
    background:var(--card);
    padding:6px 10px;
    border-radius:6px;
    font-size:11.5px;
    font-weight:600;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:all .12s ease;
}
#view-clientes .action-btn svg {
    width:11px;height:11px;
}
#view-clientes .action-btn.edit {
    color:var(--brand);
    border-color:var(--teal-soft);
}
#view-clientes .action-btn.edit:hover {
    background:var(--teal-soft);
}
#view-clientes .action-btn.edit svg {
    stroke:var(--brand);
}
#view-clientes .action-btn.delete {
    color:#A34B3F;
    border-color:#F1DCD6;
}
#view-clientes .action-btn.delete:hover {
    background:#FBEEE9;
}
#view-clientes .action-btn.delete svg {
    stroke:#A34B3F;
}

/* ---------- EMPTY STATE ---------- */
#view-clientes .empty-state {
    grid-column:1/-1;
    text-align:center;
    padding:70px 20px;
    color:var(--ink-soft);
}
#view-clientes .empty-state svg {
    width:34px;height:34px;
    stroke:var(--ink-faint);
    margin-bottom:12px;
}
#view-clientes .empty-state p {
    margin:0;
    font-size:13.5px;
}

/* ---------- PAGINATION ---------- */
#view-clientes .pagination {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding-top:6px;
}
#view-clientes .page-btn {
    min-width:34px;
    height:34px;
    padding:0 10px;
    border:1px solid var(--line);
    background:var(--card);
    border-radius:7px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    color:var(--ink-soft);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .12s ease;
}
#view-clientes .page-btn:hover:not(:disabled) {
    border-color:var(--ink-faint);
    color:var(--ink);
}
#view-clientes .page-btn.active {
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
}
#view-clientes .page-btn:disabled {
    opacity:.35;
    cursor:not-allowed;
}
#view-clientes .page-btn svg {
    width:14px;height:14px;
    stroke:currentColor;
}
#view-clientes .page-dots {
    color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    padding:0 2px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
    #view-clientes .grid {grid-template-columns:repeat(3,1fr);}
}
@media (max-width:920px){
    #view-clientes .grid {grid-template-columns:repeat(2,1fr);}
    #view-clientes .stats {grid-template-columns:repeat(3,1fr);}
}
@media (max-width:620px){
    #view-clientes {padding:20px 14px 40px;}
    #view-clientes .grid {grid-template-columns:1fr;}
    #view-clientes .stats {grid-template-columns:1fr 1fr;}
    #view-clientes .topline {flex-direction:column;}
    #view-clientes .top-actions {width:100%;}
    #view-clientes .search input {width:100%;}
    #view-clientes .btn-primary {width:100%;justify-content:center;}
}