/* ==========================================================================
   Component library
   Every screen in VyapaarPro is assembled from these. Modules never invent
   their own button, card, table, badge or form control.
   ========================================================================== */

/* ---------------- Card ---------------- */
.card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-lg); box-shadow:var(--sh-sm);
}
.card__header {
    display:flex; align-items:center; gap:var(--s3);
    padding:var(--s4) var(--card-pad); border-bottom:1px solid var(--divider);
}
.card__title { font-size:var(--fs-h3); font-weight:var(--fw-semibold); }
.card__actions { margin-left:auto; display:flex; gap:var(--s2); }
.card__body { padding:var(--card-pad); }
.card__body--flush { padding:0; }
.card__footer { padding:var(--s3) var(--card-pad); border-top:1px solid var(--divider); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); }
.card--clickable { transition:box-shadow var(--t-base),border-color var(--t-base); }
.card--clickable:hover { box-shadow:var(--sh-md); border-color:var(--border-strong); }

/* ---------------- Buttons ---------------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
    height:var(--h-control); padding:0 var(--s4);
    border:1px solid transparent; border-radius:var(--r-md);
    font-size:var(--fs-body); font-weight:var(--fw-medium); white-space:nowrap;
    transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform 90ms;
}
.btn:hover { text-decoration:none; }
.btn:active:not(:disabled) { transform:scale(.985); }
.btn:disabled,.btn.is-disabled { opacity:.6; cursor:not-allowed; transform:none; }

.btn--primary { background:var(--primary); color:#fff; }
.btn--primary:hover:not(:disabled) { background:var(--primary-hover); }
.btn--primary:active:not(:disabled) { background:var(--primary-active); }
.btn--secondary { background:var(--surface); color:var(--text-2); border-color:var(--border); }
.btn--secondary:hover:not(:disabled) { background:var(--surface-2); border-color:var(--border-strong); color:var(--text); }
.btn--success { background:var(--success); color:#fff; }
.btn--success:hover:not(:disabled) { filter:brightness(.94); }
.btn--danger { background:var(--danger); color:#fff; }
.btn--danger:hover:not(:disabled) { filter:brightness(.94); }
.btn--danger-soft { background:var(--danger-soft); color:var(--danger); border-color:var(--danger-border); }
.btn--ghost { background:transparent; color:var(--text-2); }
.btn--ghost:hover:not(:disabled) { background:var(--surface-3); color:var(--text); }
.btn--whatsapp { background:var(--whatsapp); color:#fff; }
.btn--sm { height:var(--h-control-sm); padding:0 var(--s3); font-size:var(--fs-label); }
.btn--lg { height:var(--h-control-lg); padding:0 var(--s5); }
.btn--block { width:100%; }
.btn--icon { width:var(--h-control); padding:0; }

.btn__spinner {
    width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent;
    border-radius:50%; animation:vp-spin .6s linear infinite; display:none;
}
.btn.is-loading { pointer-events:none; opacity:.85; }
.btn.is-loading .btn__spinner { display:inline-block; }
.btn.is-loading .btn__icon { display:none; }

@keyframes vp-spin { to { transform:rotate(360deg); } }

/* ---------------- Badges ---------------- */
.badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:var(--r-full);
    font-size:var(--fs-caption); font-weight:var(--fw-medium); line-height:1.4; white-space:nowrap;
}
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.badge--neutral { background:var(--surface-3); color:var(--text-2); }
.badge--primary { background:var(--primary-soft); color:var(--primary); }
.badge--success { background:var(--success-soft); color:var(--success); }
.badge--warning { background:var(--warning-soft); color:var(--warning); }
.badge--danger  { background:var(--danger-soft);  color:var(--danger); }
.badge--info    { background:var(--info-soft);    color:var(--info); }
.badge--purple  { background:var(--purple-soft);  color:var(--purple); }
.badge--plain::before { display:none; }

/* ---------------- KPI card ---------------- */
.kpi {
    display:flex; align-items:flex-start; gap:var(--s4);
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:var(--card-pad);
}
.kpi__icon {
    width:44px; height:44px; border-radius:10px; flex-shrink:0;
    display:grid; place-items:center; font-size:20px;
}
.kpi__icon--primary { background:var(--primary-soft); color:var(--primary); }
.kpi__icon--success { background:var(--success-soft); color:var(--success); }
.kpi__icon--warning { background:var(--warning-soft); color:var(--warning); }
.kpi__icon--danger  { background:var(--danger-soft);  color:var(--danger); }
.kpi__icon--info    { background:var(--info-soft);    color:var(--info); }
.kpi__label { color:var(--text-3); font-size:var(--fs-label); font-weight:var(--fw-medium); }
.kpi__value { font-size:var(--fs-display); font-weight:var(--fw-bold); line-height:1.2; margin-top:2px; }
.kpi__delta { font-size:var(--fs-caption); margin-top:4px; display:flex; align-items:center; gap:4px; }
.kpi__delta--up { color:var(--success); }
.kpi__delta--down { color:var(--danger); }
.kpi-grid { display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-bottom:var(--s5); }

/* ---------------- Table ---------------- */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:var(--fs-table); }
.table thead th {
    background:var(--surface-2); color:var(--text-3);
    font-size:var(--fs-caption); font-weight:var(--fw-semibold);
    text-align:left; padding:var(--s3) var(--s4); white-space:nowrap;
    border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1;
}
.table thead th.is-sortable { cursor:pointer; user-select:none; }
.table thead th.is-sortable:hover { color:var(--text); }
.table thead th .sort-icon { opacity:.35; margin-left:4px; font-size:10px; }
.table thead th[aria-sort] .sort-icon { opacity:1; color:var(--primary); }
.table tbody td { padding:var(--s3) var(--s4); border-bottom:1px solid var(--divider); vertical-align:middle; }
.table tbody tr { transition:background var(--t-fast); }
.table tbody tr:hover { background:var(--hover-row); }
.table tbody tr.is-selected { background:var(--selected-row); box-shadow:inset 3px 0 0 var(--primary); }
.table tbody tr:last-child td { border-bottom:none; }
.table__cell-primary { font-weight:var(--fw-medium); color:var(--text); }
.table__cell-sub { color:var(--text-3); font-size:var(--fs-caption); }
.table__actions { display:flex; gap:2px; justify-content:flex-end; }

.table-toolbar {
    display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
    padding:var(--s4) var(--card-pad); border-bottom:1px solid var(--divider);
}
.table-footer {
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
    flex-wrap:wrap; padding:var(--s3) var(--card-pad); border-top:1px solid var(--divider);
    color:var(--text-3); font-size:var(--fs-label);
}
.table-progress { height:2px; background:var(--primary-soft); overflow:hidden; display:none; }
.table-progress.is-active { display:block; }
.table-progress::after {
    content:""; display:block; width:40%; height:100%; background:var(--primary);
    animation:vp-indeterminate 1.1s var(--ease-standard) infinite;
}
@keyframes vp-indeterminate { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }
.table-body.is-refreshing { opacity:.55; transition:opacity var(--t-fast); }

/* Mobile card-stack: tables must never overflow horizontally on a phone. */
@media (max-width:767px) {
    .vptable[data-responsive="stack"] thead { display:none; }
    .vptable[data-responsive="stack"] tbody tr {
        display:block; border:1px solid var(--border); border-radius:var(--r-md);
        margin-bottom:var(--s3); padding:var(--s2);
    }
    .vptable[data-responsive="stack"] tbody td {
        display:flex; justify-content:space-between; gap:var(--s4);
        border-bottom:1px solid var(--divider); padding:var(--s2) var(--s3); text-align:right;
    }
    .vptable[data-responsive="stack"] tbody td::before {
        content:attr(data-label); color:var(--text-3); font-size:var(--fs-caption);
        font-weight:var(--fw-medium); text-align:left; flex-shrink:0;
    }
    .vptable[data-responsive="stack"] tbody td:last-child { border-bottom:none; }
}

/* ---------------- Pagination ---------------- */
.pagination { display:flex; align-items:center; gap:4px; }
.pagination button {
    min-width:34px; height:34px; padding:0 var(--s2);
    border:1px solid var(--border); background:var(--surface);
    border-radius:var(--r-sm); color:var(--text-2); font-size:var(--fs-label);
    transition:background var(--t-fast),border-color var(--t-fast);
}
.pagination button:hover:not(:disabled):not(.is-active) { background:var(--surface-3); }
.pagination button.is-active { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:var(--fw-medium); }
.pagination button:disabled { opacity:.45; cursor:not-allowed; }
.pagination__ellipsis { color:var(--muted); padding:0 4px; }

/* ---------------- Forms ---------------- */
.form-grid { display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field__label { font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--text-2); }
.field__label .required { color:var(--danger); margin-left:2px; }
.field__help { font-size:var(--fs-caption); color:var(--text-3); }
.field__error { font-size:var(--fs-caption); color:var(--danger); display:flex; align-items:center; gap:4px; }
.field__counter { font-size:var(--fs-caption); color:var(--muted); text-align:right; }

.input, .select, .textarea {
    width:100%; height:var(--h-control); padding:0 var(--s3);
    border:1px solid var(--border); border-radius:var(--r-md);
    background:var(--surface); font-size:var(--fs-body); color:var(--text);
    transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.textarea { height:auto; min-height:88px; padding:var(--s3); resize:vertical; line-height:var(--lh-normal); }
.input::placeholder,.textarea::placeholder { color:var(--muted); }
.input:hover:not(:disabled),.select:hover:not(:disabled),.textarea:hover:not(:disabled) { border-color:var(--border-strong); }
.input:focus,.select:focus,.textarea:focus { outline:none; border-color:var(--primary); box-shadow:var(--focus-ring); }
.input:disabled,.select:disabled,.textarea:disabled,.input[readonly] { background:var(--disabled-bg); color:var(--text-3); cursor:not-allowed; }
.input.is-invalid,.select.is-invalid,.textarea.is-invalid { border-color:var(--danger); background:var(--danger-soft); }
.input.is-invalid:focus { box-shadow:0 0 0 3px rgba(220,38,38,.2); }
.input.is-valid { border-color:var(--success); }

.select { appearance:none; padding-right:34px; cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748B' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; }

.input-group { position:relative; display:flex; align-items:center; }
.input-group .input { padding-left:34px; }
.input-group__prefix,.input-group__suffix {
    position:absolute; color:var(--text-3); font-size:var(--fs-label); pointer-events:none;
}
.input-group__prefix { left:var(--s3); }
.input-group__suffix { right:var(--s3); }
.input-group--suffix .input { padding-left:var(--s3); padding-right:44px; }
.input--money { text-align:right; font-variant-numeric:tabular-nums; font-weight:var(--fw-medium); }

.check { display:flex; align-items:flex-start; gap:var(--s2); cursor:pointer; font-size:var(--fs-body); }
.check input { width:17px; height:17px; margin:2px 0 0; accent-color:var(--primary); cursor:pointer; flex-shrink:0; }

.switch { position:relative; display:inline-flex; align-items:center; gap:var(--s3); cursor:pointer; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch__track {
    width:42px; height:24px; border-radius:var(--r-full); background:var(--border-strong);
    position:relative; transition:background var(--t-base) var(--ease-standard); flex-shrink:0;
}
.switch__track::after {
    content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
    background:#fff; border-radius:50%; box-shadow:var(--sh-xs);
    transition:transform var(--t-base) var(--ease-standard);
}
.switch input:checked + .switch__track { background:var(--primary); }
.switch input:checked + .switch__track::after { transform:translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow:var(--focus-ring); }

.qty-stepper { display:flex; align-items:center; }
.qty-stepper button {
    width:32px; height:var(--h-control); border:1px solid var(--border); background:var(--surface);
    color:var(--text-2); display:grid; place-items:center;
}
.qty-stepper button:first-child { border-radius:var(--r-md) 0 0 var(--r-md); }
.qty-stepper button:last-child { border-radius:0 var(--r-md) var(--r-md) 0; }
.qty-stepper button:hover { background:var(--surface-3); }
.qty-stepper .input { border-radius:0; border-left:none; border-right:none; text-align:center; }

/* ---------------- Alerts ---------------- */
.alert {
    display:flex; align-items:flex-start; gap:var(--s3);
    padding:var(--s3) var(--s4); border-radius:var(--r-md);
    border:1px solid; font-size:var(--fs-label);
}
.alert--success { background:var(--success-soft); border-color:var(--success-border); color:#166534; }
.alert--warning { background:var(--warning-soft); border-color:var(--warning-border); color:#92400E; }
.alert--danger  { background:var(--danger-soft);  border-color:var(--danger-border);  color:#991B1B; }
.alert--info    { background:var(--info-soft);    border-color:var(--info-border);    color:#075985; }
.alert__icon { flex-shrink:0; margin-top:1px; }

/* ---------------- Toast ---------------- */
.toast-region {
    position:fixed; right:var(--s5); bottom:var(--s5); z-index:var(--z-toast);
    display:flex; flex-direction:column; gap:var(--s2); max-width:400px;
}
.toast {
    display:flex; align-items:flex-start; gap:var(--s3);
    background:var(--surface); border:1px solid var(--border);
    border-left:4px solid var(--primary); border-radius:var(--r-md);
    box-shadow:var(--sh-lg); padding:var(--s3) var(--s4);
    animation:vp-toast-in 200ms var(--ease-standard);
}
.toast.is-leaving { animation:vp-toast-out 160ms var(--ease-in) forwards; }
.toast--success { border-left-color:var(--success); }
.toast--danger  { border-left-color:var(--danger); }
.toast--warning { border-left-color:var(--warning); }
.toast--info    { border-left-color:var(--info); }
.toast__title { font-weight:var(--fw-semibold); font-size:var(--fs-label); }
.toast__message { font-size:var(--fs-label); color:var(--text-2); }
.toast__close { background:none; border:none; color:var(--muted); margin-left:auto; padding:0 2px; }
@keyframes vp-toast-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes vp-toast-out { to{opacity:0;transform:translateY(8px)} }
@media (max-width:767px){ .toast-region{left:var(--s4);right:var(--s4);bottom:var(--s4);max-width:none;} }

/* ---------------- Modal & drawer ---------------- */
.modal-overlay {
    position:fixed; inset:0; background:var(--overlay); z-index:var(--z-overlay);
    display:grid; place-items:center; padding:var(--s4);
    opacity:0; pointer-events:none; transition:opacity var(--t-base);
}
.modal-overlay.is-open { opacity:1; pointer-events:auto; }
.modal {
    width:100%; max-width:560px; max-height:90vh; overflow:auto;
    background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
    transform:scale(.97); opacity:0; transition:transform var(--t-base) var(--ease-standard),opacity var(--t-base);
}
.modal-overlay.is-open .modal { transform:scale(1); opacity:1; }
.modal--sm{max-width:420px;} .modal--lg{max-width:760px;} .modal--xl{max-width:1080px;}
.modal__header { display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--divider); }
.modal__title { font-size:var(--fs-h2); font-weight:var(--fw-semibold); }
.modal__close { margin-left:auto; background:none; border:none; color:var(--muted); font-size:20px; line-height:1; }
.modal__body { padding:var(--s5); }
.modal__footer { display:flex; justify-content:flex-end; gap:var(--s2); padding:var(--s4) var(--s5); border-top:1px solid var(--divider); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); }
@media (max-width:575px) {
    .modal-overlay { padding:0; align-items:flex-end; }
    .modal { max-width:none; border-radius:var(--r-lg) var(--r-lg) 0 0; max-height:94vh; }
}

/* ---------------- States ---------------- */
.empty-state { text-align:center; padding:var(--s12) var(--s5); }
.empty-state__icon {
    width:64px; height:64px; margin:0 auto var(--s4); border-radius:var(--r-full);
    background:var(--surface-3); color:var(--muted); display:grid; place-items:center; font-size:26px;
}
.empty-state__title { font-size:var(--fs-h3); font-weight:var(--fw-semibold); margin-bottom:var(--s2); }
.empty-state__text { color:var(--text-3); font-size:var(--fs-label); max-width:380px; margin:0 auto var(--s4); }

.skeleton {
    background:linear-gradient(90deg,var(--surface-3) 25%,#E8EDF5 37%,var(--surface-3) 63%);
    background-size:400% 100%; animation:vp-shimmer 1.4s ease-in-out infinite;
    border-radius:var(--r-sm);
}
.skeleton--text { height:12px; margin-bottom:8px; }
.skeleton--title { height:20px; width:40%; }
.skeleton--row { height:20px; }
.skeleton--kpi { height:96px; border-radius:var(--r-lg); }
.skeleton--chart { height:260px; border-radius:var(--r-md); }
@keyframes vp-shimmer { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

.spinner {
    width:18px; height:18px; border:2px solid var(--border-strong); border-right-color:var(--primary);
    border-radius:50%; animation:vp-spin .6s linear infinite; display:inline-block;
}
.loading-overlay {
    position:fixed; inset:0; background:rgba(255,255,255,.65); z-index:var(--z-overlay);
    display:none; place-items:center; backdrop-filter:blur(1px);
}
.loading-overlay.is-active { display:grid; }

/* ---------------- Misc ---------------- */
.avatar {
    width:36px; height:36px; border-radius:var(--r-full); flex-shrink:0;
    display:grid; place-items:center; font-size:var(--fs-caption);
    font-weight:var(--fw-semibold); background:var(--primary-soft); color:var(--primary);
}
.avatar--sm{width:28px;height:28px;font-size:11px;} .avatar--lg{width:44px;height:44px;font-size:var(--fs-body);}

.dropdown { position:relative; }
.dropdown__menu {
    position:absolute; right:0; top:calc(100% + 6px); min-width:220px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
    box-shadow:var(--sh-lg); padding:6px; z-index:var(--z-dropdown);
    opacity:0; transform:scaleY(.96); transform-origin:top; pointer-events:none;
    transition:opacity var(--t-fast),transform var(--t-fast) var(--ease-standard);
}
.dropdown.is-open .dropdown__menu { opacity:1; transform:scaleY(1); pointer-events:auto; }
.dropdown__item {
    display:flex; align-items:center; gap:var(--s3); width:100%;
    padding:9px var(--s3); border:none; background:none; border-radius:var(--r-sm);
    font-size:var(--fs-label); color:var(--text-2); text-align:left;
}
.dropdown__item:hover { background:var(--surface-3); color:var(--text); text-decoration:none; }
.dropdown__item--danger { color:var(--danger); }
.dropdown__divider { height:1px; background:var(--divider); margin:6px 0; }

.tabs { display:flex; gap:var(--s1); border-bottom:1px solid var(--border); overflow-x:auto; }
.tab {
    position:relative; padding:var(--s3) var(--s4); border:none; background:none;
    color:var(--text-3); font-size:var(--fs-label); font-weight:var(--fw-medium); white-space:nowrap;
    transition:color var(--t-fast);
}
.tab:hover { color:var(--text); }
.tab.is-active { color:var(--primary); }
.tab.is-active::after {
    content:""; position:absolute; left:var(--s3); right:var(--s3); bottom:-1px;
    height:2px; background:var(--primary); border-radius:2px 2px 0 0;
}
.tab__count { margin-left:6px; background:var(--surface-3); color:var(--text-3); font-size:11px; padding:1px 7px; border-radius:var(--r-full); }
.tab.is-active .tab__count { background:var(--primary-soft); color:var(--primary); }

.filter-bar { display:flex; gap:var(--s3); flex-wrap:wrap; align-items:flex-end; }
.filter-bar .field { min-width:170px; flex:0 1 auto; }
.filter-chips { display:flex; gap:var(--s2); flex-wrap:wrap; }
.filter-chip {
    display:inline-flex; align-items:center; gap:6px; padding:4px 8px 4px 12px;
    background:var(--primary-soft); color:var(--primary); border-radius:var(--r-full); font-size:var(--fs-caption);
}
.filter-chip button { border:none; background:none; color:inherit; line-height:1; padding:0 2px; }

.chart-container { position:relative; height:280px; }
.chart-container canvas { max-height:100%; }

.timeline { display:flex; flex-direction:column; gap:var(--s4); }
.timeline__item { display:flex; gap:var(--s3); position:relative; padding-left:var(--s5); }
.timeline__dot { position:absolute; left:0; top:5px; width:9px; height:9px; border-radius:50%; background:var(--primary); }
.timeline__item::before { content:""; position:absolute; left:4px; top:16px; bottom:-16px; width:1px; background:var(--divider); }
.timeline__item:last-child::before { display:none; }
.timeline__title { font-size:var(--fs-label); font-weight:var(--fw-medium); }
.timeline__meta { font-size:var(--fs-caption); color:var(--text-3); }

.quick-actions { display:flex; flex-direction:column; gap:2px; }
.quick-action {
    display:flex; align-items:center; gap:var(--s3); padding:10px var(--s3);
    border-radius:var(--r-md); color:var(--text-2); font-size:var(--fs-label); font-weight:var(--fw-medium);
    transition:background var(--t-fast);
}
.quick-action:hover { background:var(--surface-3); color:var(--text); text-decoration:none; }
.quick-action__icon { width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); flex-shrink:0; }
.quick-action__key { margin-left:auto; font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:1px 5px; }