/* ==========================================================
Project : Counter Doodle
Module  : Core Design System
File    : utilities.css
Version : 1.0.0

Kelas kecil pengganti atribut style="..." di template.
Semua nilai memakai token dari variables.css.
========================================================== */

/* ----------------------------------------------------------
   Teks
   (perataan & warna pakai !important supaya menang atas
   aturan komponen seperti .table td)
---------------------------------------------------------- */

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.nowrap { white-space: nowrap; }

.text-strong { font-weight: var(--font-bold); }
.text-semibold { font-weight: var(--font-semibold); }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }

/* angka di tabel: rata kanan, tidak terpotong */
.text-num {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------
   Lebar kolom tabel
---------------------------------------------------------- */

.col-2xs { width: var(--col-2xs); }
.col-xs { width: var(--col-xs); }
.col-sm { width: var(--col-sm); }
.col-md { width: var(--col-md); }
.col-lg { width: var(--col-lg); }
.col-xl { width: var(--col-xl); }
.col-2xl { width: var(--col-2xl); }
.col-3xl { width: var(--col-3xl); }
.col-pay { width: var(--col-pay); }
.col-pending-act { width: var(--col-pending-act); }
.col-bundle-act { width: var(--col-bundle-act); }

/* kolom nama produk: jangan menyempit sampai terlipat per kata */
.col-name { min-width: var(--col-3xl); }

/* ----------------------------------------------------------
   Lebar kontrol (filter & input)
---------------------------------------------------------- */

.filter-sm { width: var(--filter-sm); }
.filter-md { width: var(--filter-md); }
.filter-lg { width: var(--filter-lg); }
.filter-xl { width: var(--filter-xl); }

.control-md { max-width: var(--filter-xl); }

/* ----------------------------------------------------------
   Jarak
---------------------------------------------------------- */

.m-0 { margin: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }

/* ----------------------------------------------------------
   Tata letak kecil
---------------------------------------------------------- */

.flex-1 { flex: 1; }
.inline-form { display: inline; }

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

/* ----------------------------------------------------------
   Baris status dengan ikon (mis. "Stok mencukupi")
---------------------------------------------------------- */

.status-line {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-weight: var(--font-semibold);
    color: var(--color-success);
}

.status-line.is-danger { color: var(--color-danger); }
.status-line.is-warning { color: var(--color-warning); }

.status-line svg,
.icon {
    flex-shrink: 0;
    width: var(--icon-sm);
    height: var(--icon-sm);
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon-md { width: var(--icon-md); height: var(--icon-md); }
.icon-xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ----------------------------------------------------------
   Gambar thumbnail (form produk)
---------------------------------------------------------- */

.image-thumb,
.image-thumb-empty {
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: var(--radius-md);
}

.image-thumb {
    object-fit: cover;
    border: var(--border-width) solid var(--color-border);
}

.image-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-thick) dashed var(--color-border-strong);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}