/* ==========================================================================
   components.css — elemen yang dipakai ulang di banyak halaman.
   Urutan: tombol, formulir, kartu, daftar, tabel, lencana, avatar, pemberitahuan, menu, tooltip, tab, modal,
   toast, keadaan kosong, kerangka muat, halaman bernomor, meter, pasangan label/nilai, saklar.
   ========================================================================== */

/* --- Tombol ----------------------------------------------------------------
   Dasar .btn = tombol sekunder (permukaan kartu + ring). .btn-primary = warna utama (slate). .btn-accent = oranye. */

.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
    height: var(--control-h); padding: 0 12px;
    border: 0; border-radius: var(--r);
    background: var(--grad-card); box-shadow: var(--sh-1); color: var(--ink-2);
    font-size: var(--fs-md); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast), background-color var(--dur-fast), transform .1s var(--ease), opacity var(--dur-fast);
}
.btn:hover { box-shadow: var(--sh-2); color: var(--ink); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(.5px) scale(.985); }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: var(--sh-1); }
.btn .icon { width: 14px; height: 14px; margin-left: -1px; }
.btn-primary { background: var(--grad-primary); color: #FFFFFF; box-shadow: var(--sh-primary); }
.btn-primary:hover:not(:disabled) { color: #FFFFFF; box-shadow: var(--sh-primary), 0 0 0 3px rgba(35, 61, 77, .14); }
.btn-primary:disabled { box-shadow: var(--sh-primary); }
.btn-accent { background: var(--grad-accent); color: #2A1406; box-shadow: var(--sh-accent); font-weight: 600; }
.btn-accent:hover:not(:disabled) { color: #2A1406; box-shadow: var(--sh-accent), 0 0 0 3px rgba(254, 127, 45, .2); }
.btn-ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: rgba(27, 35, 41, .05); box-shadow: none; }
.btn-danger { color: var(--st-hot); }
.btn-danger:hover:not(:disabled) { color: var(--st-hot); background: var(--st-hot-bg); box-shadow: 0 0 0 1px var(--st-hot-ln); }
.btn-danger-solid { background: var(--red); color: #FFFFFF; box-shadow: 0 1px 2px rgba(120, 30, 24, .3); }
.btn-danger-solid:hover:not(:disabled) { color: #FFFFFF; box-shadow: 0 1px 2px rgba(120, 30, 24, .3), 0 0 0 3px rgba(194, 70, 60, .16); }
.btn-ghost.btn-danger { background: transparent; box-shadow: none; }
.btn-ghost.btn-danger:hover:not(:disabled) { background: var(--st-hot-bg); box-shadow: none; }
.btn-sm { height: var(--control-h-sm); padding: 0 9px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-sm .icon { width: 13px; height: 13px; }
.btn-lg { height: 40px; padding: 0 18px; font-size: var(--fs-base); border-radius: 10px; }
.btn-block { width: 100%; }
/* Tombol sibuk: teks memudar, pemutar kecil muncul di tengah. */
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; border: 2px solid currentColor; border-color: var(--ink-3) transparent var(--ink-3) var(--ink-3);
    animation: spin .7s linear infinite;
}
.btn-primary.is-busy::after, .btn-danger-solid.is-busy::after { border-color: #FFFFFF transparent #FFFFFF #FFFFFF; }

.icon-btn {
    display: inline-grid; place-items: center; flex: none;
    width: var(--control-h); height: var(--control-h); padding: 0;
    border: 0; border-radius: var(--r);
    background: transparent; color: var(--ink-2);
    transition: background-color var(--dur-fast), color var(--dur-fast), transform .1s var(--ease);
}
.icon-btn:hover { background: rgba(27, 35, 41, .05); color: var(--ink); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn-sm { width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--r-sm); }
.icon-btn-sm .icon { width: 14px; height: 14px; }
.icon-btn.is-boxed { background: var(--grad-card); box-shadow: var(--sh-1); }
.icon-btn.is-boxed:hover { box-shadow: var(--sh-2); }

.link-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 0; padding: 0; background: none; color: var(--ink);
    font-size: var(--fs-md); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-fast);
}
.link-btn:hover { text-decoration-color: var(--ink); }
.link-btn .icon { width: 13px; height: 13px; }

/* Tombol Google mengikuti panduan merek Google (logo resmi di kiri). */
.btn-google { background: #FFFFFF; color: var(--ink); gap: 10px; box-shadow: var(--sh-2); }
.btn-google:hover { color: var(--ink); box-shadow: var(--sh-3); }
.btn-google img { width: 17px; height: 17px; }


/* --- Formulir ------------------------------------------------------------- */

.field { display: grid; gap: 5px; min-width: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
.field > span:not(.field-hint):not(.field-error), .field-label { font-size: var(--fs-md); font-weight: 500; color: var(--ink); }
.field-hint { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.45; }
.field-error { font-size: var(--fs-sm); color: var(--st-hot); animation: rise-in var(--dur) var(--ease-out); }

.input, .select, .textarea {
    width: 100%; min-height: var(--control-h); padding: 5px 10px;
    border: 0; border-radius: var(--r);
    background: var(--surface); color: var(--ink); box-shadow: var(--sh-1);
    font-size: var(--fs-base); line-height: 1.35;
    transition: box-shadow var(--dur-fast) var(--ease);
}
.textarea { min-height: 76px; resize: vertical; line-height: 1.5; padding-top: 7px; padding-bottom: 7px; }
.select {
    appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.input:hover, .select:hover, .textarea:hover { box-shadow: 0 0 0 1px rgba(27, 35, 41, .15), 0 1px 1.5px rgba(27, 35, 41, .05); }
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: 0 0 0 1px rgba(35, 61, 77, .55), var(--focus-ring); }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); opacity: 1; }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-alt); color: var(--ink-3); cursor: not-allowed; }
.input[type="date"] { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-md); }
.input-sm, .select-sm { min-height: var(--control-h-sm); padding-top: 3px; padding-bottom: 3px; font-size: var(--fs-md); border-radius: var(--r-sm); }
.select-sm { width: auto; }
.is-invalid, .input.is-invalid, .select.is-invalid, .textarea.is-invalid { box-shadow: 0 0 0 1px var(--st-hot-ln), 0 0 0 3px rgba(194, 70, 60, .08); }

.check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-base); line-height: 1.4; cursor: pointer; }
.check input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--primary); flex: none; cursor: pointer; }
/* Label + kontrol kecil sebaris ("Dari [tanggal]"): filter dashboard, penyusun segmen. */
.field-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.field-inline .input { width: auto; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); cursor: pointer; }
.check-row input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }

.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.form-actions .muted { margin-right: auto; font-size: var(--fs-sm); }

/* iOS memperbesar layar bila teks input < 16px. */
@media (max-width: 640px) {
    .input, .select, .textarea { font-size: 16px; }
}


/* --- Kartu -----------------------------------------------------------------
   ::after = garis putih tipis di tepi atas; ini yang membuat kartu terasa timbul. */

.panel, .card {
    position: relative; min-width: 0;
    background: var(--grad-card); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.panel::after, .card::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 22%, rgba(255, 255, 255, .9) 78%, transparent);
}
.panel-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    min-height: 44px; padding: 11px 15px 8px;
}
.panel-head h2 { margin-right: auto; font-size: var(--fs-base); font-weight: 500; letter-spacing: -.15px; }
.panel-head .muted, .panel-head .small { font-size: var(--fs-sm); color: var(--ink-3); }
.panel-head-actions { display: flex; align-items: center; gap: 6px; }
.panel-head.has-line { border-bottom: 1px solid var(--line-soft); padding-bottom: 10px; }
.panel-body { padding: 4px 15px 15px; }
.panel-body.is-padded { padding-top: 14px; }
.panel-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 10px 15px; border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--surface-sub);
}
.panel-foot .muted { margin-right: auto; font-size: var(--fs-sm); }
.panel-note { margin: 0; padding: 0 15px 13px; font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.5; }
.panel-note .icon { display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }

/* Judul bagian di luar kartu */
.section { display: grid; gap: 8px; }
.section-title { display: flex; align-items: center; gap: 8px; padding: 0 2px; font-size: var(--fs-base); font-weight: 500; }
.section-title .muted { margin-left: auto; font-size: var(--fs-sm); font-weight: 400; }


/* --- Daftar baris dalam kartu --------------------------------------------- */

.list-rows { position: relative; background: var(--grad-card); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.list-row {
    position: relative; display: flex; align-items: center; gap: 11px;
    min-height: 50px; padding: 9px 15px; color: inherit;
}
.list-row + .list-row { border-top: 1px solid var(--line-soft); }
a.list-row { transition: background-color var(--dur-fast); }
a.list-row:hover { background: rgba(27, 35, 41, .025); text-decoration: none; color: inherit; }
.list-row:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.list-row:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.list-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.list-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.list-row-meta { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.45; }
.list-row-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.list-row-actions form { margin: 0; }
.list-row.is-muted .list-row-main strong { color: var(--ink-3); }


/* --- Tabel ------------------------------------------------------------------ */

.table-wrap { position: relative; overflow: auto; background: var(--grad-card); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.table { width: 100%; font-size: var(--fs-md); }
.table th, .table td { padding: 9px 12px; text-align: left; vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 15px; }
.table th:last-child, .table td:last-child { padding-right: 15px; }
.table thead th {
    position: sticky; top: 0; z-index: 1;
    padding-top: 10px; padding-bottom: 8px;
    background: var(--surface-sub); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); white-space: nowrap;
    box-shadow: inset 0 -1px 0 var(--line-soft);
}
.table tbody td, .table tbody th { border-top: 1px solid var(--line-soft); }
.table tbody tr:first-child td, .table tbody tr:first-child th { border-top: 0; }
.table tbody tr { transition: background-color var(--dur-fast); }
.table tbody tr:hover { background: rgba(27, 35, 41, .022); }
.table .num, .table td.num, .table th.num { text-align: right; font-family: var(--font-num); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.table th.num { font-family: var(--font-sans); }
.panel > .table-wrap { box-shadow: none; background: transparent; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.panel > .table-wrap .table thead th { background: transparent; }
.table tr.is-new { animation: row-flash 1.6s var(--ease); }
@keyframes row-flash { from { background: rgba(254, 127, 45, .12); } }

/* Tabel bertumpuk di HP: tiap baris jadi kartu ringkas (sel diberi data-label, aksi di .cell-actions). */
@media (max-width: 640px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody { display: block; width: 100%; }
    .table-stack tr { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 11px 14px; border-top: 1px solid var(--line-soft); }
    .table-stack tbody tr:first-child { border-top: 0; }
    .table-stack td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal; }
    .table-stack td.cell-main { order: -1; padding-right: 64px !important; }
    .table-stack td[data-label] { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-md); }
    .table-stack td[data-label]::before { content: attr(data-label); flex: none; min-width: 84px; font-size: var(--fs-sm); color: var(--ink-3); }
    .table-stack td.num { font-family: inherit; }
    .table-stack td.cell-actions { position: absolute; top: 8px; right: 8px; }
    .table-stack td.cell-actions:empty { display: none; }
    .table-stack td.cell-actions.is-static { position: static; }   /* tombol berlabel: di bawah kartu, tidak menimpa nama */
    .table-stack td.cell-actions.is-static .row-actions { justify-content: flex-start; }
}


/* --- Lencana (pill) -----------------------------------------------------------
   .badge = pill status; nada warna lewat .tone-* (lihat tokens.css). */

.badge {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    padding: 2px 8px; border-radius: var(--r-chip);
    font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; white-space: nowrap;
    background: var(--st-cold-bg); color: var(--st-cold); box-shadow: inset 0 0 0 1px var(--st-cold-ln);
}
.badge .icon { width: 11px; height: 11px; stroke-width: 2; }
.badge.tone-success { background: var(--st-cool-bg); color: var(--st-cool); box-shadow: inset 0 0 0 1px var(--st-cool-ln); }
.badge.tone-warning { background: var(--st-warm-bg); color: var(--st-warm); box-shadow: inset 0 0 0 1px var(--st-warm-ln); }
.badge.tone-danger { background: var(--st-hot-bg); color: var(--st-hot); box-shadow: inset 0 0 0 1px var(--st-hot-ln); }
.badge.tone-info { background: var(--st-info-bg); color: var(--st-info); box-shadow: inset 0 0 0 1px var(--st-info-ln); }
.badge.tone-accent { background: var(--st-accent-bg); color: var(--st-accent); box-shadow: inset 0 0 0 1px var(--st-accent-ln); }
.badge-primary { background: var(--primary); color: #FFFFFF; box-shadow: none; }
.badge-outline { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.badge-pro { padding: 1px 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; background: var(--grad-accent); color: #2A1406; box-shadow: none; vertical-align: 1px; }
.badge-sm { padding: 1px 6px; font-size: var(--fs-xs); }

/* Titik status kecil */
.dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c, var(--ink-4)); }
.dot.is-live { --c: var(--sage); box-shadow: 0 0 0 3px rgba(161, 193, 129, .25); animation: pulse-dot 2.4s ease-in-out infinite; }


/* --- Avatar: persegi membulat, inisial di latar netral ----------------------- */

.avatar { flex: none; border-radius: 8px; object-fit: cover; background: var(--surface-alt); box-shadow: var(--sh-1); }
.avatar-xs { width: 18px; height: 18px; border-radius: 5px; font-size: 9px; }
.avatar-sm { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
.avatar-md { width: 28px; height: 28px; font-size: var(--fs-sm); }
.avatar-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.avatar-initial { display: inline-grid; place-items: center; font-weight: 600; color: var(--ink-2); }


/* --- Pemberitahuan (flash & info di halaman) ------------------------------------ */

.notice {
    position: relative; overflow: hidden;
    display: flex; gap: 9px; align-items: flex-start;
    padding: 9px 12px 9px 14px; border-radius: var(--r);
    background: var(--grad-card); box-shadow: var(--sh-1);
    font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2);
    animation: rise-in var(--dur) var(--ease-out);
}
.notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink-4); }
.notice > .icon { width: 15px; height: 15px; margin-top: 1px; flex: none; color: var(--ink-3); }
.notice-success::before { background: var(--sage); }
.notice-success > .icon { color: var(--st-cool); }
.notice-error::before { background: var(--red); }
.notice-error > .icon { color: var(--st-hot); }
.notice-error { color: var(--st-hot); }
.notice-warning::before { background: var(--yellow); }
.notice-warning > .icon { color: var(--st-warm); }
.notice-info::before { background: var(--teal); }
.notice-info > .icon { color: var(--st-info); }
.notice a:not(.btn) { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }   /* tombol di notice tetap tombol */
.notice > span { flex: 1; }
.notice-close { margin: -3px -5px -3px 0; }


/* --- Menu tarik (details/summary) ------------------------------------------------ */

.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-panel {
    position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
    min-width: 220px; padding: 5px;
    background: var(--surface); border-radius: 11px; box-shadow: var(--sh-3);
    transform-origin: top left; animation: menu-in var(--dur-fast) var(--ease-out);
}
.dropdown-label { padding: 6px 9px 3px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dropdown-item {
    display: flex; align-items: center; gap: 9px; width: 100%; min-height: 30px;
    padding: 5px 9px; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--ink); font-size: var(--fs-md); text-align: left; text-decoration: none;
    transition: background-color .1s;
}
.dropdown-item:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.dropdown-item.is-current { font-weight: 500; }
.dropdown-item .icon { width: 14px; height: 14px; color: var(--ink-3); }
.dropdown-item .muted { margin-left: auto; font-size: var(--fs-sm); }
.dropdown-item.is-danger { color: var(--st-hot); }
.dropdown-item.is-danger .icon { color: currentColor; }
.dropdown-sep { height: 1px; margin: 4px 2px; background: var(--line-soft); }
.dropdown-panel form { margin: 0; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
/* Tooltip tombol pemicu tidak menutupi menunya sendiri saat terbuka. */
.dropdown[open] > .tip::after, .dropdown[open] > .tip::before { display: none; }

/* --- Menu pilihan (App.picker): opsi kaya (foto, titik warna, keterangan) + pencarian ------------------------------------ */
.picker-panel { min-width: 240px; max-width: min(320px, calc(100vw - 16px)); padding: 0; overflow: hidden; }
.picker-panel.is-end { left: auto; right: 0; transform-origin: top right; }
.picker-panel.is-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.picker-panel.is-end.is-up { transform-origin: bottom right; }
.picker-search { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; border-bottom: 1px solid var(--line-soft); }
.picker-search .icon { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.picker-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: var(--fs-md); outline: none; }
.picker-input::placeholder { color: var(--ink-4); opacity: 1; }
.picker-list { position: relative; max-height: 360px; padding: 4px; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.picker-group + .picker-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.picker-group-title { padding: 6px 8px 3px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.picker-option {
    display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 8px;
    border-radius: var(--r-sm); color: var(--ink); font-size: var(--fs-md); line-height: 1.3; cursor: pointer; user-select: none;
}
.picker-option.is-active { background: var(--surface-alt); }
.picker-option.is-selected .picker-label { font-weight: 600; }
.picker-option.is-depth-1 { padding-left: 26px; }
.picker-option.is-depth-2 { padding-left: 44px; }
.picker-option > .icon { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.picker-option > .avatar { flex: none; width: 20px; height: 20px; font-size: 8.5px; }
.picker-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.picker-label, .picker-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-label mark { padding: 0 1px; border-radius: 2px; background: var(--st-warm-bg); color: inherit; box-shadow: inset 0 -1px 0 var(--st-warm-ln); }
.picker-sub { font-size: var(--fs-sm); color: var(--ink-3); }
.picker-badge { flex: none; padding: 0 5px; border-radius: var(--r-chip); background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-3); }
.picker-check { display: inline-grid; place-items: center; flex: none; width: 14px; color: var(--primary); }
.picker-check .icon { width: 14px; height: 14px; }
.picker-note { padding: 14px 10px; font-size: var(--fs-md); color: var(--ink-3); text-align: center; }
/* Panah kecil di tombol pemicu. */
.picker-caret { flex: none; width: 12px; height: 12px; margin-left: auto; color: currentColor; opacity: .7; }
.btn .picker-caret { width: 12px; height: 12px; margin: 0 -2px 0 0; }
.picker[open] > summary .picker-caret { transform: rotate(180deg); }
/* Pemicu selebar kolom yang tampak seperti kolom isian (kategori di panel detail). */
.picker-field {
    position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--control-h-sm); padding: 3px 8px;
    border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); font-size: var(--fs-md); cursor: pointer;
    transition: box-shadow var(--dur-fast) var(--ease);
}
.picker-field:hover { box-shadow: 0 0 0 1px rgba(27, 35, 41, .15), 0 1px 1.5px rgba(27, 35, 41, .05); }
.picker[open] > .picker-field, .picker-field:focus-visible { outline: none; box-shadow: 0 0 0 1px rgba(35, 61, 77, .55), var(--focus-ring); }
.picker-field-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.picker-field-text.is-empty { color: var(--ink-3); }
.picker-field > .icon:not(.picker-caret) { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.picker-field.is-busy { color: transparent; pointer-events: none; }
.picker-field.is-busy > * { visibility: hidden; }
.picker-field.is-busy::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; border: 2px solid var(--ink-3); border-right-color: transparent; animation: spin .7s linear infinite;
}
.picker > .btn.is-disabled, .picker > .picker-field.is-disabled { cursor: not-allowed; }
@media (max-width: 640px) {
    .picker-input { font-size: 16px; }   /* iOS tidak memperbesar layar saat kolom cari disentuh */
    .picker-option { min-height: 36px; }
}


/* --- Tooltip murni CSS: isi di data-tip. .tip.r untuk dekat tepi kanan ------- */

.tip { position: relative; }
.tip::after, .tip::before { position: absolute; z-index: 60; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.tip::after {
    content: attr(data-tip);
    top: calc(100% + 7px); left: 50%; transform: translate(-50%, -2px);
    width: max-content; max-width: 240px; padding: 7px 10px; border-radius: 8px;
    background: var(--grad-dark); color: #EEF2F4; box-shadow: var(--sh-3);
    font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; line-height: 1.45; text-align: left; letter-spacing: 0; text-transform: none;
}
.tip::before {
    content: ""; top: calc(100% + 2px); left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 7px; height: 7px; background: #2B4657; border-radius: 1.5px;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tip:hover::before, .tip:focus-visible::before { opacity: 1; }
.tip.r::after { left: auto; right: 0; transform: none; }
.tip.r::before { left: auto; right: 14px; transform: rotate(45deg); }
.qm {
    display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%;
    background: #E6E5DE; color: var(--ink-3); font-size: 9.5px; font-weight: 600; cursor: help; vertical-align: 1px;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.tip:hover .qm, .qm.tip:hover { background: var(--primary); color: #FFFFFF; }


/* --- Tab garis bawah, segmen, pil filter -------------------------------------------- */

.tabs { display: flex; align-items: center; gap: 18px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 6px 0 8px; margin-bottom: -1px; border: 0;
    background: none; color: var(--ink-3); font-size: var(--fs-md); font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: color var(--dur-fast);
}
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); transform: scaleX(0); transition: transform var(--dur) var(--ease-out); }
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.is-active, .tab[aria-selected="true"] { color: var(--ink); }
.tab.is-active::after, .tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab .icon { width: 14px; height: 14px; color: var(--ink-4); }
.tab.is-active .icon, .tab:hover .icon { color: var(--ink); }
.tab .count { padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-3); }

.segmented {
    display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
    padding: 2px; border-radius: 9px; background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--line-soft);
    overflow-x: auto; scrollbar-width: none;
}
.segment {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: 24px; padding: 0 10px; border: 0; border-radius: 7px;
    background: transparent; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.segment:hover { color: var(--ink); text-decoration: none; }
.segment.is-active, .segment[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

.pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pill-btn {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
    border: 0; border-radius: var(--r-chip); background: transparent; color: var(--ink-2);
    font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; text-decoration: none;
    transition: background-color var(--dur-fast), color var(--dur-fast);
}
.pill-btn:hover { background: rgba(27, 35, 41, .05); color: var(--ink); text-decoration: none; }
.pill-btn.is-active, .pill-btn[aria-selected="true"] { background: var(--primary); color: #FFFFFF; }


/* --- Modal (<dialog>) ----------------------------------------------------------- */

dialog.modal {
    text-align: left;
    width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0;
    border: 0; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--sh-3);
    overflow: auto;
}
dialog.modal[open] { animation: modal-in var(--dur) var(--ease-out); }
dialog.modal::backdrop { background: rgba(23, 42, 53, .34); animation: fade-in var(--dur) ease; }
dialog.modal-sm { width: min(420px, calc(100vw - 32px)); }
dialog.modal-lg { width: min(720px, calc(100vw - 32px)); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 6px 18px; }
.modal-head h2, .modal-title { font-size: 15px; font-weight: 600; }
.modal-text { font-size: var(--fs-base); color: var(--ink-2); line-height: 1.55; }
.modal-body { display: grid; gap: 14px; padding: 8px 18px 16px; }
.confirm-dialog .modal-body { gap: 8px; padding-top: 18px; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 11px 18px; border-top: 1px solid var(--line-soft); background: var(--surface-sub); }
.modal-foot .muted { margin-right: auto; font-size: var(--fs-sm); }
dialog.modal > form.modal-body, dialog.modal > form { margin: 0; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.975); } }


/* --- Popup tawaran workspace demo (Fase 5j, keputusan AY) ------------------------------------------------------------ */
/* Tanpa JavaScript <dialog open> ini sudah berupa lapisan penuh layar dengan latar redup; app.js/site.js membukanya ulang
   sebagai modal (fokus terkunci), jadi ::backdrop bawaan dibuat transparan supaya latar tidak dobel. */
dialog.demo-prompt[open] {
    position: fixed; inset: 0; z-index: 95;
    display: grid; place-items: center;
    width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px;
    border: 0; background: rgba(23, 42, 53, .34); color: var(--ink);
    overflow: auto; overscroll-behavior: contain;
    animation: fade-in var(--dur) ease;
}
dialog.demo-prompt::backdrop { background: transparent; }
.demo-prompt-card {
    position: relative; display: grid; gap: 12px; width: min(440px, 100%); padding: 26px 24px 18px;
    border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-3); text-align: left;
    animation: modal-in var(--dur) var(--ease-out);
}
.demo-prompt-close { position: absolute; top: 10px; right: 10px; margin: 0; }
.demo-prompt-icon {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-lg);
    background: var(--st-accent-bg); color: var(--st-accent); box-shadow: inset 0 0 0 1px var(--st-accent-ln);
}
.demo-prompt-icon .icon { width: 18px; height: 18px; }
.demo-prompt-card h2 { padding-right: 28px; font-size: 18px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3; text-wrap: balance; }
.demo-prompt-card p { font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); }
.demo-prompt-points { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-md); color: var(--ink-2); }
.demo-prompt-points li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.demo-prompt-points .icon { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--st-cool); }
.demo-prompt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.demo-prompt-actions form { margin: 0; }
@media (max-width: 480px) {
    .demo-prompt-card { padding: 22px 18px 16px; }
    .demo-prompt-actions { flex-direction: column-reverse; }
    .demo-prompt-actions form, .demo-prompt-actions .btn { width: 100%; justify-content: center; }
}


/* --- Toast ---------------------------------------------------------------------- */

.toast {
    position: fixed; z-index: 90; left: 50%; bottom: 22px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    max-width: min(460px, calc(100vw - 32px)); padding: 9px 14px; border-radius: 10px;
    background: var(--grad-dark); color: #FFFFFF; box-shadow: var(--sh-3);
    font-size: var(--fs-md); font-weight: 500;
    animation: toast-in var(--dur) var(--ease-spring);
}
.toast[data-tone="error"] { background: linear-gradient(180deg, #B4473D 0%, #9B3329 100%); }
.toast[data-tone="success"] { box-shadow: var(--sh-3), inset 3px 0 0 var(--sage); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.97); } }


/* --- Keadaan kosong & kerangka muat ------------------------------------------------- */

.empty { display: grid; justify-items: center; gap: 4px; padding: 34px 20px; text-align: center; color: var(--ink-3); animation: fade-in var(--dur) ease; }
.empty-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.empty-icon .icon { width: 16px; height: 16px; }
.empty-title { color: var(--ink); font-size: var(--fs-base); font-weight: 500; }
.empty-text { max-width: 44ch; font-size: var(--fs-md); }
.empty .btn { margin-top: 8px; }

.skeleton {
    display: block; border-radius: 6px; min-height: 12px;
    background: linear-gradient(90deg, var(--surface-alt) 0%, var(--surface-sub) 40%, var(--surface-alt) 80%) var(--surface-alt);
    background-size: 640px 100%;
    animation: shimmer 1.3s linear infinite;
}
.skeleton-row { display: flex; align-items: center; gap: 11px; padding: 12px 15px; }
.skeleton-row + .skeleton-row { border-top: 1px solid var(--line-soft); }
.skeleton-row .skeleton:first-child { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.skeleton-lines { display: grid; gap: 6px; flex: 1; }
.skeleton-lines .skeleton:nth-child(1) { width: 42%; }
.skeleton-lines .skeleton:nth-child(2) { width: 68%; height: 10px; }
.loaded { animation: rise-in var(--dur) var(--ease-out); }


/* --- Halaman bernomor ---------------------------------------------------------------- */

.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: var(--fs-md); }
.page-link { display: inline-flex; align-items: center; gap: 4px; height: var(--control-h-sm); padding: 0 9px; border-radius: var(--r-sm); background: var(--grad-card); box-shadow: var(--sh-1); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: box-shadow var(--dur-fast); }
.page-link:hover { color: var(--ink); box-shadow: var(--sh-2); text-decoration: none; }
.page-link.is-disabled { color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--line-soft); background: transparent; }
.page-link .icon { width: 13px; height: 13px; }
.page-info { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--ink-3); }


/* --- Meter (kuota, pemakaian) --------------------------------------------------------- */

.meter { height: 5px; border-radius: var(--r-pill); background: var(--ch-track); overflow: hidden; box-shadow: inset 0 1px 2px rgba(27, 35, 41, .08); }
.meter i { display: block; width: 0; height: 100%; border-radius: var(--r-pill); background: var(--primary); transition: width .7s var(--ease-out); }
.meter i.is-warn { background: var(--yellow); }
.meter i.is-full { background: var(--red); }


/* --- Pasangan label/nilai ------------------------------------------------------------- */

.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; font-size: var(--fs-md); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv code { padding: 1px 6px; border-radius: 5px; background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: var(--fs-sm); }
@media (max-width: 560px) {
    .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .kv dd { margin-bottom: 8px; }
}


/* --- Saklar on/off (checkbox asli tetap bisa difokus & dibaca pembaca layar) --------- */

.switch { position: relative; display: inline-flex; flex: none; width: 34px; height: 20px; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch i { position: relative; width: 100%; height: 100%; border-radius: var(--r-pill); background: var(--line-strong); transition: background-color var(--dur) var(--ease); }
.switch i::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 1px 2px rgba(27, 35, 41, .28); transition: transform var(--dur) var(--ease-spring);
}
.switch input:checked + i { background: var(--primary); }
.switch input:checked + i::after { transform: translateX(14px); }
.switch input:focus-visible + i { box-shadow: var(--focus-ring); }
/* Switch yang tidak bisa diubah (mis. fitur Pro di paket Free) tampak redup supaya tidak dikira aktif. */
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + i { opacity: .45; }

/* Baris pengaturan: teks di kiri, kontrol di kanan. */
.setting-list { display: grid; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.setting-row:first-child { padding-top: 2px; border-top: 0; }
.setting-row:last-child { padding-bottom: 2px; }
.setting-text { display: grid; gap: 2px; min-width: 0; }
.setting-text strong { font-size: var(--fs-base); font-weight: 500; color: var(--ink); }
.setting-text span { max-width: 62ch; font-size: var(--fs-md); line-height: 1.5; color: var(--ink-3); }
.setting-row .select { flex: none; width: 200px; }
.setting-row .select.select-wide { width: 320px; }
@media (max-width: 640px) {
    .setting-row { align-items: flex-start; }
    .setting-row .select, .setting-row .select.select-wide { width: 100%; }
    .setting-row:has(.select) { flex-direction: column; align-items: stretch; }
}

/* --- Tombol aksi ikon di baris tabel ------------------------------------------------------ */

.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.row-actions form { display: contents; margin: 0; }
.row-btn {
    display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; text-decoration: none;
    transition: background-color var(--dur-fast), color var(--dur-fast);
}
.row-btn .icon { width: 15px; height: 15px; }
.row-btn:hover { background: rgba(27, 35, 41, .06); color: var(--ink); text-decoration: none; }
.row-btn.is-danger:hover { background: var(--st-hot-bg); color: var(--st-hot); }
.row-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.row-btn.tip::after { top: auto; bottom: calc(100% + 7px); left: auto; right: 0; transform: none; white-space: nowrap; }
.row-btn.tip::before { top: auto; bottom: calc(100% + 2px); left: auto; right: 10px; transform: rotate(45deg); }

/* --- Pilihan bahasa "ID | EN" ---------------------------------------------------------- */
.lang-switch { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border-radius: 8px; background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--line-soft); }
.lang-switch a { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--ink-3); text-decoration: none; transition: background-color var(--dur-fast), color var(--dur-fast); }
.lang-switch a:hover { color: var(--ink); text-decoration: none; }
.lang-switch a.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* --- Salin teks (API key, tautan) --------------------------------------------------------- */
.copy-field { display: flex; gap: 8px; }
.copy-field .input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-md); }

/* ---------- Fase 3: label Onix, status & prioritas tiket (dipakai inbox, tiket, kontak) ---------- */
.lbl { display: inline-flex; align-items: center; gap: 3px; max-width: 160px; padding: 1px 7px; border-radius: var(--r-chip); background: var(--lbl-bg); color: var(--lbl-ink); box-shadow: inset 0 0 0 1px var(--lbl-ln); font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; white-space: nowrap; }
.lbl > span { overflow: hidden; text-overflow: ellipsis; }
.lbl-x { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: -3px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .65; }
.lbl-x:hover { opacity: 1; background: rgba(27, 35, 41, .08); }
.lbl-x .icon { width: 10px; height: 10px; }
.lbl-navy   { --lbl-dot: #233D4D; --lbl-bg: #E9EEF1; --lbl-ink: #233D4D; --lbl-ln: #D2DCE2; }
.lbl-orange { --lbl-dot: #FE7F2D; --lbl-bg: #FFF0E5; --lbl-ink: #A3480F; --lbl-ln: #FAD7BF; }
.lbl-yellow { --lbl-dot: #FCCA46; --lbl-bg: #FFF6D9; --lbl-ink: #7F5700; --lbl-ln: #F5E2A4; }
.lbl-green  { --lbl-dot: #A1C181; --lbl-bg: #EFF5E9; --lbl-ink: #3B6A2B; --lbl-ln: #D8E7C8; }
.lbl-teal   { --lbl-dot: #619B8A; --lbl-bg: #E8F2EF; --lbl-ink: #2B6455; --lbl-ln: #CDE2DB; }
.lbl-red    { --lbl-dot: #D9534F; --lbl-bg: #FCECEB; --lbl-ink: #A8392F; --lbl-ln: #F3D6D2; }
.lbl-blue   { --lbl-dot: #4A8BC9; --lbl-bg: #EAF1F9; --lbl-ink: #2D5F92; --lbl-ln: #CFDFF0; }
.lbl-purple { --lbl-dot: #8C6BC4; --lbl-bg: #F1ECF8; --lbl-ink: #5E4391; --lbl-ln: #DED3EF; }
.lbl-pink   { --lbl-dot: #D9618C; --lbl-bg: #FBEBF1; --lbl-ink: #A23A63; --lbl-ln: #F2D2DF; }
.lbl-gray   { --lbl-dot: #7A858D; --lbl-bg: #F1F2F0; --lbl-ink: #4F5A62; --lbl-ln: #E1E3DF; }
.lbl-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 3px; background: var(--lbl-dot); }

.tk-status { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--r-chip); font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; white-space: nowrap; background: var(--tk-bg); color: var(--tk-ink); box-shadow: inset 0 0 0 1px var(--tk-ln); }
.tk-status.is-open        { --tk-bg: var(--st-accent-bg); --tk-ink: var(--st-accent); --tk-ln: var(--st-accent-ln); }
.tk-status.is-in_progress { --tk-bg: var(--st-info-bg); --tk-ink: var(--st-info); --tk-ln: var(--st-info-ln); }
.tk-status.is-waiting     { --tk-bg: var(--st-warm-bg); --tk-ink: var(--st-warm); --tk-ln: var(--st-warm-ln); }
.tk-status.is-resolved    { --tk-bg: var(--st-cool-bg); --tk-ink: var(--st-cool); --tk-ln: var(--st-cool-ln); }
.tk-status.is-closed      { --tk-bg: var(--st-cold-bg); --tk-ink: var(--st-cold); --tk-ln: var(--st-cold-ln); }
.tk-prio { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.tk-prio i { width: 7px; height: 7px; border-radius: 2px; background: var(--ink-4); }
.tk-prio.is-urgent { color: var(--st-hot); font-weight: 500; } .tk-prio.is-urgent i { background: var(--st-hot); }
.tk-prio.is-high i { background: #FE7F2D; } .tk-prio.is-normal i { background: #619B8A; } .tk-prio.is-low i { background: var(--ink-4); }
.faces { display: inline-flex; align-items: center; }
.faces > * + * { margin-left: -5px; box-shadow: 0 0 0 2px var(--surface); }

/* Warna label WhatsApp Business (indeks 0–19 dari HP) — inbox & profil kontak. */
.wa-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 3px; background: var(--wa, var(--ink-4)); box-shadow: inset 0 0 0 1px rgba(27, 35, 41, .12); }
.wa-c0 { --wa: #FF9485; } .wa-c1 { --wa: #64C4FF; } .wa-c2 { --wa: #FFD429; } .wa-c3 { --wa: #DFAEF0; } .wa-c4 { --wa: #99B6C1; }
.wa-c5 { --wa: #55CCB3; } .wa-c6 { --wa: #FF9DFF; } .wa-c7 { --wa: #D3A91D; } .wa-c8 { --wa: #6D7CCE; } .wa-c9 { --wa: #D7E752; }
.wa-c10 { --wa: #00D0E2; } .wa-c11 { --wa: #FFC5C7; } .wa-c12 { --wa: #93CEAC; } .wa-c13 { --wa: #F74848; } .wa-c14 { --wa: #00A0F2; }
.wa-c15 { --wa: #83E422; } .wa-c16 { --wa: #FFAF04; } .wa-c17 { --wa: #B5EBFF; } .wa-c18 { --wa: #9BA6FF; } .wa-c19 { --wa: #9368CF; }


/* --- Indikator pindah halaman (app.js: App.progress) ------------------------------------ */

.page-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: 3px; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.page-progress i {
    display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center;
    background: linear-gradient(90deg, var(--orange), var(--primary)); box-shadow: 0 0 10px rgba(254, 127, 45, .45);
}
.page-progress.is-active { opacity: 1; }
.page-progress.is-active i { animation: page-progress 9s cubic-bezier(.08, .8, .2, 1) forwards; }
@keyframes page-progress { 0% { transform: scaleX(0); } 8% { transform: scaleX(.3); } 35% { transform: scaleX(.65); } 100% { transform: scaleX(.94); } }
@media (prefers-reduced-motion: reduce) {
    .page-progress.is-active i { animation: none; transform: scaleX(.6); }
}

/* Editor teks berformat minimal (App.richEditor): composer email, tanda tangan channel, email baru dari kontak (keputusan AA).
   Dipakai di beberapa halaman, jadi gayanya di sini, bukan di inbox.css. */
.rte { display: grid; }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 8px 0; }
.rte-btn { display: grid; place-items: center; width: 30px; height: 28px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; }
.rte-btn:hover { background: var(--surface-alt); color: var(--ink); }
.rte-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rte-btn .icon { width: 15px; height: 15px; }
.rte-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
.rte-link { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 13px 0; }
.rte-link .input { flex: 1; min-width: 160px; }
.rte-input { min-height: 150px; max-height: 45vh; overflow-y: auto; padding: 8px 13px 10px; outline: none; font-size: var(--fs-base); line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.rte-input.is-empty::before { content: attr(data-placeholder); color: var(--ink-4); pointer-events: none; }
.rte-input ul, .rte-input ol { margin: 4px 0; padding-left: 22px; }
.rte-input a { color: var(--primary); text-decoration: underline; }
.settings-rte { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.settings-rte:focus-within { box-shadow: 0 0 0 1px rgba(35, 61, 77, .55), var(--focus-ring); }
.settings-rte .rte-input { min-height: 96px; }
@media (max-width: 760px) {
    .rte-input { min-height: 110px; max-height: 38vh; }
}

/* ---------- Jam kerja (App.hoursEditor): Pengaturan → General & jam kerja sendiri channel (keputusan AF) ---------- */
.panel-switch { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--ink-2); cursor: pointer; }
.hours-note { margin: 0 0 12px; max-width: 78ch; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-3); }
.hours-editor { display: grid; gap: 2px; transition: opacity var(--dur) var(--ease); }
.hours-editor.is-off { opacity: .55; }
.hours-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 40px; padding: 4px 0; border-top: 1px solid var(--line-soft); }
.hours-day:first-child { border-top: 0; }
.hours-day-name { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; color: var(--ink); cursor: pointer; }
.hours-day-name input { width: 16px; height: 16px; accent-color: var(--primary); }
.hours-day-times { display: inline-flex; align-items: center; gap: 8px; }
.hours-day-times .input { width: 118px; font-variant-numeric: tabular-nums; }
.hours-day-sep { color: var(--ink-3); }
.hours-day-closed { display: none; font-size: var(--fs-md); color: var(--ink-3); }
.hours-day.is-closed .hours-day-times { display: none; }
.hours-day.is-closed .hours-day-closed { display: inline; }
@media (max-width: 720px) {
    .hours-day { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .hours-day-times .input { width: 100%; min-width: 0; flex: 1 1 0; }
}


/* --- Tema aplikasi (Fase 5i): radius minimal untuk komponen bersama (aplikasi, masuk, situs, galat). Widget livechat tetap
   memakai nilai di atas. ------------------------------------------------------------------------------------------------ */
:is(.app-body, .auth-body, .site-body, .error-body) .btn-lg { border-radius: var(--r); }
:is(.app-body, .auth-body, .site-body, .error-body) .avatar { border-radius: var(--r); }
:is(.app-body, .auth-body, .site-body, .error-body) .avatar-xs { border-radius: var(--r-xs); }
:is(.app-body, .auth-body, .site-body, .error-body) .avatar-sm { border-radius: var(--r-sm); }
:is(.app-body, .auth-body, .site-body, .error-body) .avatar-lg { border-radius: var(--r-lg); }
:is(.app-body, .auth-body, .site-body, .error-body) .dropdown-panel { border-radius: var(--r-lg); }
:is(.app-body, .auth-body, .site-body, .error-body) .tip::after { border-radius: var(--r-sm); }
:is(.app-body, .auth-body, .site-body, .error-body) .toast { border-radius: var(--r-lg); }
:is(.app-body, .auth-body, .site-body, .error-body) .empty-icon { border-radius: var(--r-lg); }
:is(.app-body, .auth-body, .site-body, .error-body) .skeleton { border-radius: var(--r-sm); }
:is(.app-body, .auth-body, .site-body, .error-body) .skeleton-row .skeleton:first-child { border-radius: var(--r); }
:is(.app-body, .auth-body, .site-body, .error-body) .lang-switch a { border-radius: var(--r-sm); }