/* One badge system for the whole app (front-end #tk-app and admin #tk-admin).
   Every status/label badge gets the same flat shape; its colour says what KIND of
   thing it is, never which page drew it:

     success  green   done, approved, paid / pelunasan, verified, published
     warning  amber   waiting, needs action, down payment (balance still owed)
     danger   red     rejected, cancelled, failed
     info     blue    in progress, informational requirement (perlu sampel/formulir)
     neutral  grey    category / metadata: package, lab, sample count, add-on, draft, period

   New markup: add `tk-tone-<kind>` to any of the badge classes below.
   Scoped by an id so it outranks the per-page @push('styles') blocks. */

:is(#tk-app, #tk-admin) {
    --tk-tone-success-bg: #ecfdf3; --tk-tone-success-fg: #067647; --tk-tone-success-bd: #abefc6;
    --tk-tone-warning-bg: #fffaeb; --tk-tone-warning-fg: #b54708; --tk-tone-warning-bd: #fedf89;
    --tk-tone-danger-bg:  #fef3f2; --tk-tone-danger-fg:  #b42318; --tk-tone-danger-bd:  #fecdca;
    --tk-tone-info-bg:    #eff8ff; --tk-tone-info-fg:    #175cd3; --tk-tone-info-bd:    #b2ddff;
    --tk-tone-neutral-bg: #f2f4f7; --tk-tone-neutral-fg: #344054; --tk-tone-neutral-bd: #d0d5dd;
}

/* ---------- Shape (all badges) + neutral default ---------- */
:is(#tk-app, #tk-admin) :is(
    .tk-project-tag, .tk-status-badge, .tk-payment-type-badge, .tk-plan-badge, .tk-plan-tag,
    .tk-sample-badge, .tk-sample-badge-sm, .tk-sample-badge-invoice, .tk-addon-badge, .tk-service-pay,
    .tk-order-lab, .tk-meta-tag, .tb-badge, .tb-tag, .tb-tag-success, .tb-tag-warning,
    .badge:is(.badge-success, .badge-warning, .badge-danger, .badge-info, .badge-primary, .badge-secondary)
) {
    --tk-b-bg: var(--tk-tone-neutral-bg);
    --tk-b-fg: var(--tk-tone-neutral-fg);
    --tk-b-bd: var(--tk-tone-neutral-bd);
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    width: auto;
    max-width: 100%;
    padding: 3px 10px !important;
    border: 1px solid var(--tk-b-bd) !important;
    border-radius: var(--tk-radius-sm, 6px) !important;
    background: var(--tk-b-bg) !important;
    color: var(--tk-b-fg) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
}

:is(#tk-app, #tk-admin) :is(
    .tk-project-tag, .tk-status-badge, .tk-payment-type-badge, .tk-plan-badge, .tk-plan-tag,
    .tk-sample-badge, .tk-sample-badge-sm, .tk-sample-badge-invoice, .tk-addon-badge, .tk-service-pay,
    .tk-order-lab, .tk-meta-tag, .tb-badge, .tb-tag, .badge
) :is(i, span, em) {
    color: inherit !important;
    font-size: inherit;
    /* some pages boxed the icon in its own tinted square; inside a badge it is plain */
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* ---------- success ---------- */
:is(#tk-app, #tk-admin) :is(
    .tk-tone-success, .tk-success-tag, .tk-complete-tag, .tk-project-tag:is(.tk-completed, .tk-complete),
    .tk-project-tag:is(.tk-active, .tk-new-green),
    .tk-order-tone--done, .tk-status-approved, .tk-status-paid, .tk-status-success, .tk-status-completed,
    .tk-status-badge.tk-success, .badge-success, .tk-badge-final, .tk-badge-full, .tb-tag-success,
    .tb-badge-green, .tb-badge-cyan
) {
    --tk-b-bg: var(--tk-tone-success-bg);
    --tk-b-fg: var(--tk-tone-success-fg);
    --tk-b-bd: var(--tk-tone-success-bd);
}

/* ---------- warning ---------- */
:is(#tk-app, #tk-admin) :is(
    .tk-tone-warning, .tk-warning-tag, .tk-project-tag:is(.tk-pending, .tk-awaiting, .tk-sample-required, .tk-sample-pending),
    .tk-order-tone--waiting, .tk-status-pending, .tk-status-unpaid, .tk-status-warning,
    .tk-status-badge:is(.tk-warning, .tk-sample-pending, .tk-sample-required),
    .badge-warning, .tk-badge-dp, .tb-tag-warning
) {
    --tk-b-bg: var(--tk-tone-warning-bg);
    --tk-b-fg: var(--tk-tone-warning-fg);
    --tk-b-bd: var(--tk-tone-warning-bd);
}

/* ---------- danger ---------- */
:is(#tk-app, #tk-admin) :is(
    .tk-tone-danger, .tk-danger-tag, .tk-red-tag,
    .tk-project-tag:is(.tk-canceled, .tk-cancelled, .tk-rejected, .tk-declined, .tk-failed),
    .tk-order-tone--declined, .tk-status-rejected, .tk-status-danger, .tk-status-cancelled,
    .tk-status-canceled, .tk-status-badge.tk-danger, .badge-danger
) {
    --tk-b-bg: var(--tk-tone-danger-bg);
    --tk-b-fg: var(--tk-tone-danger-fg);
    --tk-b-bd: var(--tk-tone-danger-bd);
}

/* ---------- info ---------- */
:is(#tk-app, #tk-admin) :is(
    .tk-tone-info, .tk-info-tag, .tk-purple-tag,
    .tk-project-tag:is(.tk-processed, .tk-ongoing, .tk-processing, .tk-refunded, .tk-hired),
    .tk-order-tone--ongoing, .tk-status-info, .tk-status-processed, .tk-status-refunded,
    .tk-status-badge:is(.tk-info, .tk-primary), .tk-status-badge.tk-to:not(.tk-success, .tk-warning, .tk-danger, .tk-sample-pending, .tk-sample-required, .tk-gray, .tk-secondary, .tk-dark),
    .badge-info, .badge-primary, .tb-badge-blue, .tb-badge-orange
) {
    --tk-b-bg: var(--tk-tone-info-bg);
    --tk-b-fg: var(--tk-tone-info-fg);
    --tk-b-bd: var(--tk-tone-info-bd);
}

/* neutral is the default above; these only need listing where a page coloured them:
   .tk-gray-tag, .tk-status-badge.tk-from/.tk-gray/.tk-secondary/.tk-dark, .badge-secondary,
   .tk-plan-badge, .tk-sample-badge*, .tk-addon-badge, .tk-order-lab, .tb-badge-purple (periods) */
:is(#tk-app, #tk-admin) :is(
    .tk-tone-neutral, .tk-gray-tag, .tk-project-tag:is(.tk-drafted, .tk-disabled),
    .tk-status-badge:is(.tk-from, .tk-gray, .tk-secondary, .tk-dark), .badge-secondary, .tb-badge-purple
) {
    --tk-b-bg: var(--tk-tone-neutral-bg);
    --tk-b-fg: var(--tk-tone-neutral-fg);
    --tk-b-bd: var(--tk-tone-neutral-bd);
}

/* ---------- Tags laid over gig photos ----------
   These sit on images, so they stay solid (a tint would vanish on a busy photo).
   "Unggulan" is a highlight (gold, like the rating stars); the requirement tags are information,
   not errors, so they share the info blue instead of red/purple/blue by accident;
   a pending order's status asks the user to act, so it is amber. */
:is(#tk-app, #tk-admin) .tk-featuretag {
    background: #a16207 !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}

:is(#tk-app, #tk-admin) .tk-featuretag:is(.tk-sampletag, .tk-formtag, .tk-approvaltag) {
    background: #175cd3 !important;
}

:is(#tk-app, #tk-admin) .tk-featuretag.tk-pending-status-badge {
    background: #b54708 !important;
}