/* ============================================================
   Abandoned Carts — Panel styles
   Uses Buld design tokens (tokens.css). RTL/LTR safe via logical
   properties. Dark mode handled via :root.dark token overrides.
   ============================================================ */

/* ── Header chip count ─────────────────────────────────────── */
.ac-badge-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:24px;height:22px;padding:0 8px;
    background:var(--warning-100);color:var(--warning-700);
    font-size:var(--text-xs);font-weight:var(--weight-semibold);
    border-radius:var(--radius-full);
    margin-inline-start:var(--space-2);
}
:root.dark .ac-badge-count{ background:rgba(245,158,11,.18);color:#fcd34d; }

/* ── Header buttons ────────────────────────────────────────── */
.ac-btn{
    display:inline-flex;align-items:center;gap:var(--space-2);
    height:34px;padding:0 var(--space-4);
    border:1px solid var(--border-default);
    border-radius:var(--radius-md);
    background:var(--surface-1);color:var(--text-primary);
    font-size:var(--text-sm);font-weight:var(--weight-medium);
    cursor:pointer;transition:all var(--duration-fast) var(--ease-out);
}
.ac-btn:hover{ background:var(--surface-2);border-color:var(--border-strong); }
.ac-btn:active{ transform:translateY(1px); }
.ac-btn:disabled{ opacity:.5;cursor:not-allowed; }
.ac-btn-ghost{ background:transparent; }
.ac-btn-primary{
    background:var(--brand-gradient);border-color:transparent;color:#fff;
}
.ac-btn-primary:hover{ filter:brightness(1.05);box-shadow:var(--shadow-sm); }
.ac-btn-primary:disabled{ background:var(--surface-2);color:var(--text-tertiary); }

/* ── KPI cards row ─────────────────────────────────────────── */
.ac-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-4);
    margin:var(--space-5) 0 var(--space-5);
}
@media (max-width:1100px){ .ac-kpis{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ac-kpis{ grid-template-columns:1fr; } }

.ac-kpi{
    display:flex;align-items:center;gap:var(--space-4);
    padding:var(--space-5);
    background:var(--surface-1);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-xs);
    transition:transform var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
}
.ac-kpi:hover{ transform:translateY(-1px);box-shadow:var(--shadow-sm); }

.ac-kpi-icon{
    width:42px;height:42px;flex:0 0 42px;
    display:grid;place-items:center;
    border-radius:var(--radius-lg);
    background:var(--surface-2);color:var(--text-secondary);
}
.ac-kpi-icon svg{ width:20px;height:20px; }

.ac-kpi-meta{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.ac-kpi-label{
    font-size:var(--text-xs);color:var(--text-tertiary);
    text-transform:uppercase;letter-spacing:var(--tracking-wide);
    font-weight:var(--weight-medium);
}
.ac-kpi-value{
    font-size:var(--text-2xl);font-weight:var(--weight-bold);
    color:var(--text-primary);
    font-feature-settings:'tnum' 1;line-height:var(--leading-tight);
}
.ac-kpi-sub{
    font-size:var(--text-xs);color:var(--text-tertiary);
    font-weight:var(--weight-regular);
}

/* Variant tints */
.ac-kpi-total      .ac-kpi-icon{ background:var(--info-50);color:var(--info-600); }
.ac-kpi-recoverable .ac-kpi-icon{ background:var(--success-50);color:var(--success-600); }
.ac-kpi-value      .ac-kpi-icon{ background:var(--warning-50);color:var(--warning-700); }
.ac-kpi-recovered  .ac-kpi-icon{ background:rgba(139,92,246,.10);color:var(--accent-600); }

:root.dark .ac-kpi-total      .ac-kpi-icon{ background:rgba(59,130,246,.18);color:#93c5fd; }
:root.dark .ac-kpi-recoverable .ac-kpi-icon{ background:rgba(34,197,94,.18);color:#86efac; }
:root.dark .ac-kpi-value      .ac-kpi-icon{ background:rgba(245,158,11,.18);color:#fcd34d; }
:root.dark .ac-kpi-recovered  .ac-kpi-icon{ background:rgba(167,139,250,.20);color:#c4b5fd; }

/* ── Toolbar (filter tabs + search) ────────────────────────── */
.ac-toolbar{
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--space-4);
    margin-bottom:var(--space-4);
    flex-wrap:wrap;
}
.ac-filter-tabs{
    display:inline-flex;gap:2px;
    padding:4px;
    background:var(--surface-1);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
}
.ac-tab{
    display:inline-flex;align-items:center;gap:6px;
    height:30px;padding:0 var(--space-3);
    background:transparent;border:0;
    color:var(--text-secondary);
    font-size:var(--text-sm);font-weight:var(--weight-medium);
    border-radius:var(--radius-md);
    cursor:pointer;transition:all var(--duration-fast) var(--ease-out);
    white-space:nowrap;
}
.ac-tab:hover{ background:var(--surface-2);color:var(--text-primary); }
.ac-tab.is-active{
    background:var(--surface-0);
    color:var(--text-primary);
    box-shadow:var(--shadow-xs);
}
:root.dark .ac-tab.is-active{ background:var(--surface-3); }
.ac-tab-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;padding:0 5px;
    border-radius:var(--radius-full);
    background:var(--surface-2);color:var(--text-tertiary);
    font-size:10px;font-weight:var(--weight-semibold);
    line-height:1;font-feature-settings:'tnum' 1;
}
.ac-tab.is-active .ac-tab-count{ background:var(--brand-100);color:var(--brand-700); }
:root.dark .ac-tab.is-active .ac-tab-count{ background:rgba(14,165,233,.20);color:#7dd3fc; }

.ac-search{
    position:relative;display:flex;align-items:center;
    gap:var(--space-2);
    height:34px;padding:0 var(--space-3);
    border:1px solid var(--border-default);
    border-radius:var(--radius-md);
    background:var(--surface-1);
    min-width:280px;
    transition:border-color var(--duration-fast),box-shadow var(--duration-fast);
}
.ac-search:focus-within{
    border-color:var(--border-focus);
    box-shadow:var(--ring-focus);
}
.ac-search > svg{ color:var(--text-tertiary);flex-shrink:0; }
.ac-search input{
    flex:1;border:0;background:transparent;outline:0;
    font-size:var(--text-sm);color:var(--text-primary);
    font-family:inherit;
}
.ac-search input::placeholder{ color:var(--text-tertiary); }

/* ── Table card ────────────────────────────────────────────── */
.ac-table-card{
    background:var(--surface-1);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow:var(--shadow-xs);
}
.ac-table-head,
.ac-table-row{
    display:grid;
    grid-template-columns: 36px minmax(180px,1.4fr) minmax(220px,2fr) 110px 130px 130px 180px;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
}
.ac-table-head{
    background:var(--surface-2);
    border-bottom:1px solid var(--border-subtle);
    font-size:var(--text-xs);font-weight:var(--weight-semibold);
    color:var(--text-tertiary);
    text-transform:uppercase;letter-spacing:var(--tracking-wide);
}
.ac-table-body .ac-table-row{
    border-bottom:1px solid var(--border-subtle);
    transition:background var(--duration-fast) var(--ease-out);
}
.ac-table-body .ac-table-row:last-child{ border-bottom:0; }
.ac-table-body .ac-table-row:hover{ background:var(--surface-2); }
.ac-table-body .ac-table-row.is-selected{ background:var(--brand-50); }
:root.dark .ac-table-body .ac-table-row.is-selected{ background:rgba(14,165,233,.12); }

@media (max-width:980px){
    .ac-table-head{ display:none; }
    .ac-table-body .ac-table-row{
        grid-template-columns: 32px 1fr;
        grid-template-areas:
            "check customer"
            "check items"
            ". value"
            ". time"
            ". status"
            ". actions";
        gap:var(--space-2);
        padding:var(--space-4);
    }
    .ac-th-check{ grid-area:check; }
    .ac-cell-customer{ grid-area:customer; }
    .ac-cell-items{ grid-area:items; }
    .ac-cell-value{ grid-area:value; }
    .ac-cell-time{ grid-area:time; }
    .ac-cell-status{ grid-area:status; }
    .ac-cell-actions{ grid-area:actions; }
}

/* Cell — checkbox */
.ac-th-check input,
.ac-cell-check input{
    width:16px;height:16px;cursor:pointer;accent-color:var(--brand-500);
}

/* Cell — customer */
.ac-cust{
    display:flex;align-items:center;gap:var(--space-3);min-width:0;
}
.ac-cust-avatar{
    width:34px;height:34px;flex:0 0 34px;
    border-radius:var(--radius-full);
    display:grid;place-items:center;
    background:var(--surface-2);color:var(--text-secondary);
    font-weight:var(--weight-semibold);font-size:var(--text-sm);
    text-transform:uppercase;
}
.ac-cust-avatar.is-anon{
    background:var(--surface-2);color:var(--text-tertiary);
    border:1px dashed var(--border-default);
}
.ac-cust-meta{ display:flex;flex-direction:column;min-width:0;gap:1px; }
.ac-cust-name{
    font-size:var(--text-sm);font-weight:var(--weight-semibold);
    color:var(--text-primary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ac-cust-name.is-anon{ color:var(--text-tertiary);font-style:italic;font-weight:var(--weight-regular); }
.ac-cust-phone{
    font-size:var(--text-xs);color:var(--text-tertiary);
    font-feature-settings:'tnum' 1;
    direction:ltr;display:inline-block;
}

/* Cell — items */
.ac-items-stack{ display:flex;align-items:center;gap:var(--space-2);min-width:0; }
.ac-item-thumbs{ display:inline-flex; }
.ac-item-thumbs > *{
    width:30px;height:30px;
    border-radius:var(--radius-md);
    border:2px solid var(--surface-1);
    background:var(--surface-2);
    margin-inline-start:-8px;
    display:grid;place-items:center;
    overflow:hidden;
    color:var(--text-tertiary);
    font-size:11px;font-weight:var(--weight-semibold);
}
.ac-item-thumbs > *:first-child{ margin-inline-start:0; }
.ac-item-thumbs img{ width:100%;height:100%;object-fit:cover; }
.ac-items-text{
    font-size:var(--text-sm);color:var(--text-secondary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.ac-items-text strong{ color:var(--text-primary);font-weight:var(--weight-semibold); }

/* Cell — value */
.ac-value{
    font-size:var(--text-md);font-weight:var(--weight-semibold);
    color:var(--text-primary);
    font-feature-settings:'tnum' 1;
}
.ac-value-cur{
    font-size:var(--text-xs);color:var(--text-tertiary);
    font-weight:var(--weight-regular);margin-inline-start:2px;
}

/* Cell — time */
.ac-time{
    display:flex;flex-direction:column;gap:2px;
    font-size:var(--text-sm);color:var(--text-secondary);
}
.ac-time-rel{ color:var(--text-primary);font-weight:var(--weight-medium); }
.ac-time-abs{ font-size:var(--text-xs);color:var(--text-tertiary); }

/* Cell — status pill */
.ac-pill{
    display:inline-flex;align-items:center;gap:5px;
    height:22px;padding:0 var(--space-2);
    border-radius:var(--radius-full);
    font-size:var(--text-xs);font-weight:var(--weight-semibold);
    line-height:1;
}
.ac-pill-pending{    background:var(--warning-100);color:var(--warning-700); }
.ac-pill-anon{       background:var(--surface-2);color:var(--text-tertiary); }
.ac-pill-contacted{  background:var(--info-100);color:var(--info-600); }
.ac-pill-recovered{  background:var(--success-100);color:var(--success-700); }
:root.dark .ac-pill-pending{    background:rgba(245,158,11,.20);color:#fcd34d; }
:root.dark .ac-pill-anon{       background:var(--surface-2);color:var(--text-tertiary); }
:root.dark .ac-pill-contacted{  background:rgba(59,130,246,.18);color:#93c5fd; }
:root.dark .ac-pill-recovered{  background:rgba(34,197,94,.18);color:#86efac; }

/* Cell — actions */
.ac-actions{ display:flex;align-items:center;gap:var(--space-1); }
.ac-act-btn{
    display:inline-grid;place-items:center;
    width:30px;height:30px;
    border:1px solid transparent;
    border-radius:var(--radius-md);
    background:transparent;color:var(--text-secondary);
    cursor:pointer;
    transition:all var(--duration-fast) var(--ease-out);
}
.ac-act-btn:hover{
    background:var(--surface-2);
    color:var(--text-primary);
    border-color:var(--border-default);
}
.ac-act-btn.ac-act-whatsapp{ color:#25d366; }
.ac-act-btn.ac-act-whatsapp:hover{ background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.35); }
.ac-act-btn.ac-act-call{ color:var(--info-600); }
.ac-act-btn.ac-act-delete:hover{ color:var(--danger-600);border-color:var(--danger-100); }
.ac-act-btn.is-disabled{ opacity:.4;pointer-events:none; }
.ac-act-btn svg{ width:15px;height:15px; }

/* ── Empty state ────────────────────────────────────────────── */
.ac-empty{
    text-align:center;
    padding:var(--space-16) var(--space-6) var(--space-12);
    color:var(--text-secondary);
}
.ac-empty-icon{
    width:64px;height:64px;margin:0 auto var(--space-4);
    border-radius:var(--radius-full);
    background:var(--surface-2);color:var(--text-tertiary);
    display:grid;place-items:center;
}
.ac-empty h3{
    font-size:var(--text-lg);font-weight:var(--weight-semibold);
    color:var(--text-primary);margin:0 0 var(--space-2);
}
.ac-empty p{
    font-size:var(--text-sm);color:var(--text-tertiary);
    max-width:420px;margin:0 auto;line-height:var(--leading-normal);
}

/* ── Loading skeleton ───────────────────────────────────────── */
.ac-skel-row{
    display:grid;grid-template-columns: 36px minmax(180px,1.4fr) minmax(220px,2fr) 110px 130px 130px 180px;
    gap:var(--space-3);padding:var(--space-3) var(--space-4);
    border-bottom:1px solid var(--border-subtle);
}
.ac-skel{
    height:14px;border-radius:var(--radius-xs);
    background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
    background-size:200% 100%;
    animation:ac-shimmer 1.4s linear infinite;
}
@keyframes ac-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ── Drawer ─────────────────────────────────────────────────── */
.ac-drawer-backdrop{
    position:fixed;inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:saturate(140%) blur(2px);
    z-index:var(--z-drawer);
    animation:ac-fade var(--duration-normal) var(--ease-out);
}
@keyframes ac-fade{ from{ opacity:0; } to{ opacity:1; } }
.ac-drawer{
    position:fixed;
    inset-block:0;inset-inline-end:0;
    width:min(480px,92vw);
    background:var(--surface-1);
    border-inline-start:1px solid var(--border-subtle);
    box-shadow:var(--shadow-2xl);
    z-index:calc(var(--z-drawer) + 1);
    display:flex;flex-direction:column;
    animation:ac-slide-in var(--duration-normal) var(--ease-out);
}
.ac-drawer[hidden],
.ac-drawer-backdrop[hidden]{ display:none !important; }
[dir="rtl"] .ac-drawer{ animation-name:ac-slide-in-rtl; }
@keyframes ac-slide-in    { from{ transform:translateX(100%); } to{ transform:translateX(0); } }
@keyframes ac-slide-in-rtl{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }

.ac-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--space-3);
    padding:var(--space-5) var(--space-5) var(--space-4);
    border-bottom:1px solid var(--border-subtle);
}
.ac-drawer-eyebrow{
    display:block;
    font-size:var(--text-xs);color:var(--text-tertiary);
    text-transform:uppercase;letter-spacing:var(--tracking-wide);
    font-weight:var(--weight-medium);margin-bottom:2px;
}
.ac-drawer-title{
    font-size:var(--text-xl);font-weight:var(--weight-semibold);
    color:var(--text-primary);margin:0;
}
.ac-drawer-close{
    width:32px;height:32px;flex:0 0 32px;
    border:1px solid var(--border-default);border-radius:var(--radius-md);
    background:var(--surface-1);color:var(--text-secondary);
    display:grid;place-items:center;cursor:pointer;
    transition:all var(--duration-fast) var(--ease-out);
}
.ac-drawer-close:hover{ background:var(--surface-2);color:var(--text-primary); }

.ac-drawer-body{
    flex:1;overflow-y:auto;
    padding:var(--space-5);
    display:flex;flex-direction:column;gap:var(--space-5);
}

/* Drawer sections */
.ac-d-section{ display:flex;flex-direction:column;gap:var(--space-3); }
.ac-d-label{
    font-size:var(--text-xs);color:var(--text-tertiary);
    text-transform:uppercase;letter-spacing:var(--tracking-wide);
    font-weight:var(--weight-semibold);
}
.ac-d-customer{
    display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-4);
    background:var(--surface-2);border-radius:var(--radius-lg);
    border:1px solid var(--border-subtle);
}
.ac-d-customer .ac-cust-avatar{ width:40px;height:40px;font-size:var(--text-md); }
.ac-d-customer-info{ display:flex;flex-direction:column;min-width:0;gap:2px;flex:1; }
.ac-d-customer-name{
    font-size:var(--text-md);font-weight:var(--weight-semibold);
    color:var(--text-primary);
}
.ac-d-customer-contact{
    font-size:var(--text-sm);color:var(--text-secondary);
    direction:ltr;display:inline-block;
    font-feature-settings:'tnum' 1;
}

.ac-d-items{ display:flex;flex-direction:column;gap:var(--space-2); }
.ac-d-item{
    display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-3);
    border:1px solid var(--border-subtle);border-radius:var(--radius-md);
}
.ac-d-item-thumb{
    width:48px;height:48px;flex:0 0 48px;
    border-radius:var(--radius-md);background:var(--surface-2);
    overflow:hidden;display:grid;place-items:center;
    color:var(--text-tertiary);
}
.ac-d-item-thumb img{ width:100%;height:100%;object-fit:cover; }
.ac-d-item-info{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; }
.ac-d-item-title{ font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary); }
.ac-d-item-meta{ font-size:var(--text-xs);color:var(--text-tertiary); }
.ac-d-item-price{
    font-size:var(--text-sm);font-weight:var(--weight-semibold);
    color:var(--text-primary);font-feature-settings:'tnum' 1;
}

.ac-d-summary{
    padding:var(--space-4);
    background:var(--surface-2);border-radius:var(--radius-lg);
    border:1px solid var(--border-subtle);
    display:flex;flex-direction:column;gap:var(--space-2);
}
.ac-d-row{
    display:flex;align-items:center;justify-content:space-between;
    font-size:var(--text-sm);color:var(--text-secondary);
}
.ac-d-row.is-total{
    border-top:1px solid var(--border-subtle);
    padding-top:var(--space-3);margin-top:var(--space-1);
    font-size:var(--text-md);font-weight:var(--weight-semibold);
    color:var(--text-primary);
}
.ac-d-row b{ color:var(--text-primary);font-feature-settings:'tnum' 1; }

.ac-d-msg{
    display:flex;flex-direction:column;gap:var(--space-2);
    padding:var(--space-4);
    background:var(--surface-2);border-radius:var(--radius-lg);
    border:1px solid var(--border-subtle);
}
.ac-d-msg textarea{
    width:100%;min-height:96px;
    border:1px solid var(--border-default);border-radius:var(--radius-md);
    background:var(--surface-1);color:var(--text-primary);
    padding:var(--space-3);font-size:var(--text-sm);
    font-family:inherit;line-height:var(--leading-normal);
    resize:vertical;outline:none;
    transition:border-color var(--duration-fast),box-shadow var(--duration-fast);
}
.ac-d-msg textarea:focus{
    border-color:var(--border-focus);
    box-shadow:var(--ring-focus);
}
.ac-d-msg-templates{ display:flex;flex-wrap:wrap;gap:6px; }
.ac-d-tpl{
    height:26px;padding:0 var(--space-3);
    border:1px solid var(--border-default);border-radius:var(--radius-full);
    background:var(--surface-1);color:var(--text-secondary);
    font-size:var(--text-xs);font-weight:var(--weight-medium);
    cursor:pointer;
    transition:all var(--duration-fast) var(--ease-out);
}
.ac-d-tpl:hover{ background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-200); }
:root.dark .ac-d-tpl:hover{ background:rgba(14,165,233,.15);color:#7dd3fc;border-color:rgba(14,165,233,.35); }

.ac-drawer-foot{
    display:flex;align-items:center;gap:var(--space-2);
    padding:var(--space-4) var(--space-5);
    border-top:1px solid var(--border-subtle);
    background:var(--surface-1);
}
.ac-drawer-foot .ac-btn{ flex:1; }