/* Client & laboran dashboard: full-width body, flat surfaces, one colour per
   button type. Applies only to pages that render the dashboard sidebar.
   Every rule is scoped by #tk-app (the <body> id) so it outranks the
   per-page @push('styles') blocks, which use !important on class selectors.

   Button types - pick the class that matches what the button DOES:
     primary  (simpan, kirim, bayar, lanjut)   tk-btn-solid*, tb-btn, tk-btn, btn-primary
     success  (setujui, terima, selesaikan)    tk-btn-approve, tb-btn-success, btn-success
     danger   (tolak, hapus, kosongkan)        tk-btn-danger, tk-btn-reject, tk-redbtn, btn-danger
     warning  (komplain, ubah ke pending)      tk-btn-warning, btn-warning
     neutral  (batal, kembali, lihat, unduh)   tk-btn-secondary, tk-btn-outline, tk-btnline
   Neutral is declared last so adding tk-btn-secondary to any button demotes it. */

#tk-app:has(.tk-themesidebar) {
    --tk-c-primary: #375685;
    --tk-c-primary-h: #2a4368;
    --tk-c-success: #15803d;
    --tk-c-success-h: #166534;
    --tk-c-danger: #dc2626;
    --tk-c-danger-h: #b91c1c;
    --tk-c-warning: #b45309;
    --tk-c-warning-h: #92400e;
    --tk-c-border: #d5dbe3;
    /* app.blade's card rule reads this; the old #e7edf5 relied on a shadow to show. */
    --tk-surface-card-border: #d5dbe3;
    --tk-c-border-strong: #d0d5dd;
    --tk-c-text: #344054;
    --tk-c-canvas: #eef1f5;
}

/* ---------- Canvas: white sidebar, grey body, white cards ---------- */
#tk-app:has(.tk-themesidebar),
#tk-app:has(.tk-themesidebar) .tk-main-wrapper,
#tk-app:has(.tk-themesidebar) .tk-themesidebar ~ .tk-scetiondb {
    background-color: var(--tk-c-canvas) !important;
}

#tk-app:has(.tk-themesidebar) .tk-themesidebar {
    background-color: #ffffff !important;
    border-right: 1px solid var(--tk-c-border) !important;
}

/* ---------- Full-width body ---------- */
#tk-app:has(.tk-themesidebar) .tk-scetiondb .container {
    max-width: none;
    padding-left: clamp(16px, 2.2vw, 32px);
    padding-right: clamp(16px, 2.2vw, 32px);
}

#tk-app:has(.tk-themesidebar) .tk-scetiondb .container .container {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 992px) {
    #tk-app:has(.tk-themesidebar) .tk-themesidebar ~ .tk-scetiondb {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}

/* ---------- Flat: no drop shadows ----------
   The inset shadows main.css uses as 1px dividers are kept (they are lines,
   not elevation); everything else loses its shadow. */
#tk-app:has(.tk-themesidebar) *:not(
    .litepicker .day-item, .tb-raisedispute, .tk-addtime-slot li, .tk-attechment-content,
    .tk-project-box + .tk-project-box, .tk-project-box + .tk-profile-form, .tk-employerproject,
    .tk-counterinfo, .tk-counterinfo_list li, .tk-notify, .tk-project-table-status tr,
    .tk-projectsactivity, .tk-projectsactivity .tk-nav-tabs, .tk-projectsactivity .tk-nav-tabs li button,
    .tk-projectsactivityvtwo .tk-nav-tabs, .tk-projectsinfo, .tk-projectsstatus_headvtwo,
    .tk-projectstatus, .tk-projectstatus_users, .tk-projectstatus_users .tk-project-box-two,
    .tk-prouserslist, .tk-seller-project-activity .tk-projectsstatus_head, .tk-timecard,
    .tk-timecard-aprroved, .tk-timecard > li, .tk-timecards, .tk-uploadfile-doc,
    .tk-rating-dot, .tk-order-card
) {
    box-shadow: none !important;
}

/* Floating layers lost their shadow, so they need an edge instead. */
#tk-app:has(.tk-themesidebar) :is(.dropdown-menu, .popover, .select2-dropdown, .tippy-box, .modal-content, .jconfirm-box) {
    border: 1px solid var(--tk-c-border-strong);
}

/* Focus rings were box-shadows too; keep keyboard focus visible. */
#tk-app:has(.tk-themesidebar) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--tk-c-primary) !important;
    outline-offset: 2px;
}

#tk-app:has(.tk-themesidebar) :is(.form-control, .form-select, input, select, textarea):focus {
    border-color: var(--tk-c-primary) !important;
}

/* ---------- Buttons ---------- */
#tk-app:has(.tk-themesidebar) :is(
    .tk-btn, .tb-btn, .tb-btnvtwo, .tk-btn-solid, .tk-btn-solid-lefticon, .tk-btn-solid-lg,
    .tk-btn-solid-lg-lefticon, .tk-btn-solid-sm, .tk-btn-solid-sm-lefticon, .tk-btn-primary,
    .tk-btn-primary-lg, .tb-btn-primary, .btn-primary, .btn-blue, .btn-orange, .tk-btn-payment,
    .tk-btn-repayment, .tk-btn-fillform, .tk-btn-review,

    .tk-btn-approve, .tk-btn-approve-main, .tk-btn-approve-sample, .tk-btn_approve, .tb-btn-success,
    .btn-success, .btn-green, .tk-btn-green, .tk-btn-complete-order,

    .tk-btn-danger, .tk-btn-reject, .tk-btn-reject-sample, .tk-btn_decline, .tk-decline-btn,
    .tk-redbtn, .tb-btn-delete, .tb-btn-danger, .tb-btn-remove, .btn-danger, .btn-red,

    .tk-btn-warning, .btn-warning, .tk-btn-dispute-order, .tk-btn-status-change,

    .tk-btn-secondary, .tb-btn-secondary, .btn-secondary, .btn-light, .btn-default, .btn-cancel,
    .tk-btn-outline, .tb-btn-outline, .btn-outline-primary, .btn-outline-secondary, .tk-btnline,
    .tk-btnlight, .tk-btn-back, .tk-btn-cancel, .tk-btn-plain, .tk-btn-line, .tk-btn-line-lefticon,
    .tk-btn-line-lg, .tk-btn-line-lg-lefticon, .tk-btn-line-sm, .tk-btn-line-sm-lefticon, .btn-reset,
    .tk-btn-view, .tk-btn-view-detail, .tk-btn-viewdetail, .tk-btn-view-proof, .tk-btn-viewproof,
    .tk-btn-view-form-sm, .tk-btn-download-sm, .tk-template-download-btn, .btn-download-rejection,
    .tk-advancebtn, .tk-btn-add-row
) {
    --tk-btn-bg: var(--tk-c-primary);
    --tk-btn-bg-h: var(--tk-c-primary-h);
    --tk-btn-fg: #ffffff;
    --tk-btn-bd: var(--tk-btn-bg);
    --tk-btn-bd-h: var(--tk-btn-bg-h);
    background: var(--tk-btn-bg) !important;
    border: 1px solid var(--tk-btn-bd) !important;
    color: var(--tk-btn-fg) !important;
    transform: none !important;
}

#tk-app:has(.tk-themesidebar) :is(
    .tk-btn-approve, .tk-btn-approve-main, .tk-btn-approve-sample, .tk-btn_approve, .tb-btn-success,
    .btn-success, .btn-green, .tk-btn-green, .tk-btn-complete-order
) {
    --tk-btn-bg: var(--tk-c-success);
    --tk-btn-bg-h: var(--tk-c-success-h);
}

#tk-app:has(.tk-themesidebar) :is(
    .tk-btn-danger, .tk-btn-reject, .tk-btn-reject-sample, .tk-btn_decline, .tk-decline-btn,
    .tk-redbtn, .tb-btn-delete, .tb-btn-danger, .tb-btn-remove, .btn-danger, .btn-red
) {
    --tk-btn-bg: var(--tk-c-danger);
    --tk-btn-bg-h: var(--tk-c-danger-h);
}

#tk-app:has(.tk-themesidebar) :is(.tk-btn-warning, .btn-warning, .tk-btn-dispute-order, .tk-btn-status-change) {
    --tk-btn-bg: var(--tk-c-warning);
    --tk-btn-bg-h: var(--tk-c-warning-h);
}

#tk-app:has(.tk-themesidebar) :is(
    .tk-btn-secondary, .tb-btn-secondary, .btn-secondary, .btn-light, .btn-default, .btn-cancel,
    .tk-btn-outline, .tb-btn-outline, .btn-outline-primary, .btn-outline-secondary, .tk-btnline,
    .tk-btnlight, .tk-btn-back, .tk-btn-cancel, .tk-btn-plain, .tk-btn-line, .tk-btn-line-lefticon,
    .tk-btn-line-lg, .tk-btn-line-lg-lefticon, .tk-btn-line-sm, .tk-btn-line-sm-lefticon, .btn-reset,
    .tk-btn-view, .tk-btn-view-detail, .tk-btn-viewdetail, .tk-btn-view-proof, .tk-btn-viewproof,
    .tk-btn-view-form-sm, .tk-btn-download-sm, .tk-template-download-btn, .btn-download-rejection,
    .tk-advancebtn, .tk-btn-add-row
) {
    --tk-btn-bg: #ffffff;
    --tk-btn-bg-h: #f2f4f7;
    --tk-btn-fg: var(--tk-c-text);
    --tk-btn-bd: var(--tk-c-border-strong);
    --tk-btn-bd-h: #98a2b3;
}

/* One hover rule for every type: each type only swaps the variables above. */
#tk-app:has(.tk-themesidebar) :is(
    .tk-btn, .tb-btn, .tb-btnvtwo, .tk-btn-solid, .tk-btn-solid-lefticon, .tk-btn-solid-lg,
    .tk-btn-solid-lg-lefticon, .tk-btn-solid-sm, .tk-btn-solid-sm-lefticon, .tk-btn-primary,
    .tk-btn-primary-lg, .tb-btn-primary, .btn-primary, .btn-blue, .btn-orange, .tk-btn-payment,
    .tk-btn-repayment, .tk-btn-fillform, .tk-btn-review, .tk-btn-approve, .tk-btn-approve-main, .tk-btn-approve-sample,
    .tk-btn_approve, .tb-btn-success, .btn-success, .btn-green, .tk-btn-green, .tk-btn-complete-order,
    .tk-btn-danger, .tk-btn-reject, .tk-btn-reject-sample, .tk-btn_decline, .tk-decline-btn,
    .tk-redbtn, .tb-btn-delete, .tb-btn-danger, .tb-btn-remove, .btn-danger, .btn-red,
    .tk-btn-warning, .btn-warning, .tk-btn-dispute-order, .tk-btn-status-change,
    .tk-btn-secondary, .tb-btn-secondary, .btn-secondary, .btn-light, .btn-default, .btn-cancel,
    .tk-btn-outline, .tb-btn-outline, .btn-outline-primary, .btn-outline-secondary, .tk-btnline,
    .tk-btnlight, .tk-btn-back, .tk-btn-cancel, .tk-btn-plain, .tk-btn-line, .tk-btn-line-lefticon,
    .tk-btn-line-lg, .tk-btn-line-lg-lefticon, .tk-btn-line-sm, .tk-btn-line-sm-lefticon, .btn-reset,
    .tk-btn-view, .tk-btn-view-detail, .tk-btn-viewdetail, .tk-btn-view-proof, .tk-btn-viewproof,
    .tk-btn-view-form-sm, .tk-btn-download-sm, .tk-template-download-btn, .btn-download-rejection,
    .tk-advancebtn, .tk-btn-add-row
) {
    &:hover, &:focus-visible {
        background: var(--tk-btn-bg-h) !important;
        border-color: var(--tk-btn-bd-h) !important;
        color: var(--tk-btn-fg) !important;
    }

    & i, & i::before, & svg, & > span:not(.tk-table-toolbar__count) {
        color: inherit !important;
        fill: currentColor;
    }

    &:disabled, &.disabled, &[disabled] {
        opacity: .55;
        cursor: not-allowed;
    }

    /* Several buttons draw a sliding overlay on ::before for their hover. */
    &::before, &::after {
        background: transparent !important;
    }
}

/* ---------- List pages: header card + one card per item ----------
   Matches /gig-orders. Wrappers that hold a .tk-savelisting (e.g. /gigs-listing)
   were one big box with the title flush against its edge. */
#tk-app:has(.tk-themesidebar) .tk-project-wrapper:has(> .tk-savelisting) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible;
}

#tk-app:has(.tk-themesidebar) .tk-project-wrapper:has(> .tk-savelisting) > .tk-dhb-mainheading,
#tk-app:has(.tk-themesidebar) .tk-project-wrapper:has(> .tk-savelisting) > .tk-savelisting > li {
    margin: 0 0 16px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--tk-c-border) !important;
    border-radius: var(--tk-radius, 10px);
}

/* ---------- Page header cards ---------- */
#tk-app:has(.tk-themesidebar) .tb-invoiceslist {
    padding: 24px !important;
}

#tk-app:has(.tk-themesidebar) :is(.tb-dhb-mainheading, .tk-dhb-mainheading) {
    gap: 16px;
}

#tk-app:has(.tk-themesidebar) :is(.tb-dhb-mainheading, .tk-dhb-mainheading) > h2 {
    margin: 0;
    font-size: 24px !important;
    line-height: 1.3;
}

#tk-app:has(.tk-themesidebar) :is(.tb-dhb-mainheading, .tk-dhb-mainheading) {
    align-items: center;
}

/* Search + sort in a page header sit on one row, right-aligned. */
#tk-app:has(.tk-themesidebar) .tk-dhb-mainheading .tb-themeform__wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

#tk-app:has(.tk-themesidebar) .tk-dhb-mainheading .tb-themeform__wrap > * {
    width: auto;
    margin: 0 !important;
}

#tk-app:has(.tk-themesidebar) .tk-dhb-mainheading .tb-themeform__wrap > .form-group {
    flex: 1 1 280px;
}

#tk-app:has(.tk-themesidebar) .tk-dhb-mainheading .tb-sortby {
    flex: 0 1 760px;
    max-width: none !important;
}

@media (min-width: 1200px) {
    #tk-app:has(.tk-themesidebar) .tk-dhb-mainheading .tb-themeform__wrap {
        flex-wrap: nowrap;
    }
}

/* Sticky asides were offset for the public header, which the dashboard
   does not have, so they sat 70px below the card next to them. */
#tk-app:has(.tk-themesidebar) .tk-status-holder {
    top: 32px !important;
}

#tk-app:has(.tk-themesidebar) .tk-formsearch.tk-formsearchvtwo {
    margin-top: 0 !important;
    top: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------- Form controls ---------- */
/* Native .form-select looked like Bootstrap next to the theme inputs, and inside
   .tk-select it showed two arrows (Bootstrap's + the wrapper's icon). */
#tk-app:has(.tk-themesidebar) .form-select {
    height: 48px;
    padding: 0 40px 0 20px;
    border: 1px solid #eaeaea;
    border-radius: var(--tk-radius, 10px);
    color: #0a0f26;
    font-size: 15px;
}

#tk-app:has(.tk-themesidebar) .tk-select > .form-select {
    background-image: none;
}

/* Settings menu card: size to its links instead of a fixed 400px. */
#tk-app:has(.tk-themesidebar) .tb-settingtab {
    min-height: 0;
}

/* Checkout/activity sections carry 60px of public-page padding. */
#tk-app:has(.tk-themesidebar) .tk-themesidebar ~ .tk-scetiondb > .tk-main-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Back links became bordered neutral buttons; give them button padding. */
#tk-app:has(.tk-themesidebar) .tk-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 8px 16px !important;
    border-radius: var(--tk-radius, 10px);
    text-decoration: none;
}

/* Chat (laraguppy) asks for "SF Pro Text", which Windows lacks, so it fell back
   to a serif. Use the dashboard font; icon glyphs keep their own. */
#tk-app:has(.tk-themesidebar) #chat-app,
#tk-app:has(.tk-themesidebar) #chat-app :not(i, [class*="guppy-"], [class^="icon-"], [class*=" icon-"]) {
    font-family: Verdana, Geneva, sans-serif !important;
}

/* Gig card grid: with the body full width, three columns made 490px cards
   on a 1920 screen. Go to four once there is room. */
@media (min-width: 1600px) {
    #tk-app:has(.tk-themesidebar) .tk-scetiondb .row > .col-lg-4:has(> .tk-topservicetask) {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

#tk-app:has(.tk-themesidebar) .tk-seller-counter-listvtwo {
    margin-bottom: 0 !important;
}

/* Mobile menu opener was a stray coral (#ff5851), not a brand colour. */
@media (max-width: 991px) {
    #tk-app:has(.tk-themesidebar) .tk-toggler-btn {
        background-color: var(--tk-c-primary) !important;
    }
}

/* Order cards on phones: the 120px thumbnail beside the text left the title
   ~170px wide. Stack them instead. */
@media (max-width: 575.98px) {
    #tk-app:has(.tk-themesidebar) .tk-gig-order-card {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 767.98px) {
    #tk-app:has(.tk-themesidebar) .tb-invoiceslist {
        padding: 16px !important;
    }

    #tk-app:has(.tk-themesidebar) :is(.tb-dhb-mainheading, .tk-dhb-mainheading) {
        align-items: flex-start;
    }

    #tk-app:has(.tk-themesidebar) :is(.tb-dhb-mainheading, .tk-dhb-mainheading) > h2 {
        text-align: left;
        font-size: 20px !important;
    }
}

/* ---------- Card edges ----------
   Cards that hard-code their own pale border (#e7edf5, #e2e8f0, #eee...) instead of
   reading --tk-surface-card-border. Without the shadow they nearly vanished. */
#tk-app:has(.tk-themesidebar) :is(
    .tb-invoiceslist, .tk-asideholder, .tk-project-wrapper, .tk-project-box, .tk-topservicetask,
    .tk-seller-graph, .tk-counter-contant, .tk-list-detail, .tk-orders-timeline-layout,
    .tk-servicedetail, .tk-reviewvtwo, .tk-formsearch, .tk-form-section, .tk-party-card,
    .tk-summary-wrapper, .tk-invoice-meta, .tk-table-responsive, .tox-tinymce, .tk-tabbitem,
    .tk-dhb-mainheading
) {
    border-color: var(--tk-c-border) !important;
}

/* ---------- Table toolbar (<x-table-toolbar>) ---------- */
#tk-app:has(.tk-themesidebar) .tk-table-toolbar {
    margin: 0 0 16px;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar__search {
    position: relative;
    flex: 1 1 280px;
    margin: 0;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar__search > i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #98a2b3;
    pointer-events: none;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar__search > input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--tk-c-border-strong);
    border-radius: var(--tk-radius, 10px);
    background: #ffffff;
    color: #0a0f26;
    font-size: 14px;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar :is(.tk-btn-solid-sm, .tk-btn-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: 42px;
    padding: 0 16px !important;
    border-radius: var(--tk-radius, 10px);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar__toggle[aria-expanded="true"] {
    background: #eef2f7 !important;
    border-color: #98a2b3 !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--tk-c-primary);
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar__panel {
    display: none;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--tk-c-border);
    border-radius: var(--tk-radius, 10px);
    background: #f8fafc;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar.is-open .tk-table-toolbar__panel {
    display: flex;
}

/* Fields share the top row and stretch to fill it, however many a table has. */
#tk-app:has(.tk-themesidebar) .tk-table-toolbar__field {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar__field > span {
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

#tk-app:has(.tk-themesidebar) .tk-table-toolbar__field > :is(.form-select, .form-control) {
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    border-color: var(--tk-c-border-strong);
    background-color: #ffffff;
    font-size: 14px;
}

/* Apply sits on its own row, bottom right, under all the fields. */
#tk-app:has(.tk-themesidebar) .tk-table-toolbar__actions {
    display: flex;
    flex: 1 1 100%;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--tk-c-border);
}

@media (max-width: 575.98px) {
    #tk-app:has(.tk-themesidebar) .tk-table-toolbar__bar > :not(.tk-table-toolbar__search) {
        flex: 1 1 auto;
    }

    #tk-app:has(.tk-themesidebar) .tk-table-toolbar__actions > * {
        width: 100%;
    }
}

/* ---------- List tables ----------
   Pages forced every cell to nowrap, so one long title or package name pushed an
   11-column table to 2100px and hid Amount/Status/Action off-screen. Text cells now
   wrap within a sane width; headers, badges and figures stay on one line. The
   wrapper still scrolls sideways when the screen is genuinely too narrow. */
#tk-app:has(.tk-themesidebar) .tk-table-responsive {
    overflow-x: auto;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    padding: 0 !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > thead > tr > th {
    padding: 12px 10px !important;
    white-space: normal !important;
    vertical-align: middle;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > tbody > tr > td {
    padding: 12px 10px !important;
    white-space: nowrap !important;
    vertical-align: middle;
}

/* Only the free-text cells wrap; dates, amounts and numbers like INV-000001(2)
   would otherwise split at their hyphens. */
#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > tbody > tr > :is(
    td:has(.tk-service-title-list, .tk-service-title, .tk-plan-list, .tk-plan-badge),
    td[class*="service"], td[class*="title"], td.tk-submitted-column, td.tk-col-text
) {
    min-width: 190px !important;
    max-width: 260px !important;
    white-space: normal !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > tbody > tr > :is(td[class*="service"], td[class*="title"]) * {
    white-space: normal !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table :is(
    .tk-project-tag, .tk-payment-type-badge, .tk-sample-badge, .tk-addon-badge, .tk-service-pay
) {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Long free text (service titles, package names) wraps instead of widening the table. */
#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table :is(.tk-service-title-list, .tk-service-title, .tk-plan-list) {
    min-width: 120px;
    max-width: 240px;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table .tk-plan-badge {
    white-space: normal;
    text-align: left;
    line-height: 1.4;
}

/* Row actions: keep the labels (they say what the button does) but compact. */
#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table :is(.tk-action-buttons, .tk-action-icon) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table .tk-btn-action {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 10px !important;
    gap: 4px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table :is(.tk-service-title, .tk-service-title-list) :is(span, a) {
    font-size: 14px !important;
}

/* One gap between a list card's title and its toolbar, whatever the page set. */
#tk-app:has(.tk-themesidebar) .tb-invoiceslist > :is(.tb-dhb-mainheading, .tk-dhb-mainheading):has(+ .tk-table-toolbar) {
    margin: 0 0 20px !important;
    padding: 0 !important;
}

/* When a wide table scrolls sideways, the row actions stay pinned on the right
   instead of disappearing past the edge. */
#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > :is(thead, tbody) > tr > :last-child {
    position: sticky;
    right: 0;
    z-index: 1;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > tbody > tr > td:last-child {
    background: #ffffff;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > tbody > tr:hover > td:last-child {
    background: #f7f7f7;
}



/* Gig meta row: the list was pulled left 8.5px to offset its text items' padding,
   so badges that wrapped to a second line stuck out past the title. */
#tk-app:has(.tk-themesidebar) .tk-rateviews2:has(.tk-meta-tag) {
    margin-left: 0 !important;
}

#tk-app:has(.tk-themesidebar) .tk-rateviews2:has(.tk-meta-tag) > li:not(.tk-meta-tag) {
    padding-left: 0 !important;
}

/* On phones a pinned action column ate half the table; let it scroll with the row. */
@media (max-width: 575.98px) {
    #tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > :is(thead, tbody) > tr > :last-child {
        position: static;
        box-shadow: none !important;
    }
}

/* main.css hides <thead> sr-only style on small screens for a stacked-card layout
   the pages never finished (they force rows back to table rows), which left
   phone tables with no column names. Show the header; the table scrolls. */
#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > thead {
    display: table-header-group !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > tbody > tr > td::before {
    content: none !important;
}

/* ---------- Order activity: header + form + order chat are ONE card ----------
   Each section rounded its own corners (and only the chat had a border), so the
   joins showed notches. The wrapper is the card now; sections are flat and split
   by a hairline. */
#tk-app:has(.tk-themesidebar) .tk-gigactivitywrap {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--tk-c-border);
    border-radius: var(--tk-radius, 10px);
}

#tk-app:has(.tk-themesidebar) .tk-gigactivitywrap :is(.tk-checkoutinfo, .tk-form-submission-integrated, .tk-project-box) {
    border: 0 !important;
    border-radius: 0 !important;
}

#tk-app:has(.tk-themesidebar) .tk-gigactivitywrap > :is(.tk-checkoutinfo, .tk-form-submission-integrated, div) + :is(.tk-form-submission-integrated, div) {
    border-top: 1px solid var(--tk-c-border) !important;
}

/* ---------- Bordered boxes with inner panels ----------
   These had a radius but let their panels' square backgrounds and scrollbars
   poke through the rounded corners. Clip them to the box. */
#tk-app:has(.tk-themesidebar) :is(.tk-orders-timeline-layout, .tk-history-card, #chat-app .at-user-chat) {
    overflow: hidden !important;
}

/* ---------- Chat (laraguppy) ---------- */
#tk-app:has(.tk-themesidebar) #chat-app .at-user-chat {
    border: 1px solid var(--tk-c-border) !important;
    border-radius: var(--tk-radius, 10px) !important;
}

/* header / messages / composer read as one card split by hairlines */
#tk-app:has(.tk-themesidebar) #chat-app .at-userinfo {
    border-bottom: 1px solid var(--tk-c-border) !important;
}

#tk-app:has(.tk-themesidebar) #chat-app .at-replay {
    border-top: 1px solid var(--tk-c-border) !important;
}

#tk-app:has(.tk-themesidebar) #chat-app .at-chat_sidebar {
    border-right: 1px solid var(--tk-c-border) !important;
}

/* Send is the primary action: brand colour like every other primary button. */
#tk-app:has(.tk-themesidebar) #chat-app .at-sendmsg {
    background: var(--tk-c-primary) !important;
    border-color: var(--tk-c-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#tk-app:has(.tk-themesidebar) #chat-app .at-sendmsg:hover {
    background: var(--tk-c-primary-h) !important;
}

/* Invoice table: one line per item, so rows stay short and the box scrolls sideways
   instead (opt-in with .tk-table-oneline; other list tables keep wrapping). */
#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table.tk-table-oneline > tbody > tr > td,
#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table.tk-table-oneline > tbody > tr > td * {
    white-space: nowrap !important;
    max-width: none !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table.tk-table-oneline :is(.tk-service-title-list, .tk-plan-list) {
    max-width: none;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table.tk-table-oneline .tk-service-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Table edges ----------
   The theme rounds the first/last cell of every row (each row is a "pill") inside a
   wrapper that is already rounded, so header and row ends never met the box corners.
   Square cells, one header band, hairlines between rows; the wrapper does the rounding. */
#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > :is(thead, tbody) > tr > :is(th, td) {
    border-radius: 0 !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > thead > tr,
#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > thead > tr > th {
    background: #f8fafc !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > thead > tr > th {
    border-bottom: 1px solid var(--tk-c-border) !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table > tbody > tr + tr > td {
    border-top: 1px solid #eef1f5 !important;
}

/* ---------- Detail tables on phones ----------
   Invoice and form-detail tables switched to a "label: value" card on phones that
   broke titles one word per line. Keep them real tables with a header, scrolling
   sideways like every other table. */
@media (max-width: 991.98px) {
    #tk-app:has(.tk-themesidebar) .tk-scetiondb table:is(.tk-invoice-table, .tk-sample-table) {
        display: table !important;
        width: 100% !important;
        min-width: 560px;
    }

    #tk-app:has(.tk-themesidebar) .tk-scetiondb table:is(.tk-invoice-table, .tk-sample-table) > thead {
        display: table-header-group !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
    }

    #tk-app:has(.tk-themesidebar) .tk-scetiondb table:is(.tk-invoice-table, .tk-sample-table) > :is(thead, tbody) > tr {
        display: table-row !important;
    }

    #tk-app:has(.tk-themesidebar) .tk-scetiondb table:is(.tk-invoice-table, .tk-sample-table) > :is(thead, tbody) > tr > :is(th, td) {
        display: table-cell !important;
        width: auto !important;
        line-height: 1.5 !important;
    }

    #tk-app:has(.tk-themesidebar) .tk-scetiondb table:is(.tk-invoice-table, .tk-sample-table) > tbody > tr > td::before {
        content: none !important;
        display: none !important;
    }

    #tk-app:has(.tk-themesidebar) .tk-scetiondb :is(.tk-table-responsive, .tk-sample-table-wrapper):has(> table:is(.tk-invoice-table, .tk-sample-table)) {
        overflow-x: auto;
    }
}

/* ---------- Key/value side cards (Detail paket, status pembayaran, ringkasan) ----------
   Rows were 52px tall (32px line-height + 20px padding). */
#tk-app:has(.tk-themesidebar) :is(.tk-plan-detail-list > li, .tk-payment-row, .tk-summary-row) {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.5 !important;
}

#tk-app:has(.tk-themesidebar) :is(.tk-plan-detail-list > li, .tk-payment-row, .tk-summary-row) > * {
    line-height: 1.5 !important;
}

#tk-app:has(.tk-themesidebar) .tk-plan-detail-list > li.tk-total-row {
    margin-top: 4px !important;
    padding-top: 10px !important;
}

#tk-app:has(.tk-themesidebar) .tk-payment-status-section {
    margin-top: 12px !important;
    padding-top: 12px !important;
}

#tk-app:has(.tk-themesidebar) .tk-payment-status-header {
    margin-bottom: 6px !important;
}

#tk-app:has(.tk-themesidebar) .tk-table-responsive > .tb-table td :is(h5, h6, p):only-child {
    margin: 0 !important;
}

/* Invoice detail: the dark "Detail invoice" bar and the table under it are one
   block; the table no longer rounds its own top corners under the bar. */
#tk-app:has(.tk-themesidebar) .tk-invoice-items > .tk-items-header + .tk-table-responsive {
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

@media (max-width: 991.98px) {
    /* the phone "label: value" layout right-aligned every cell; read left to right */
    #tk-app:has(.tk-themesidebar) .tk-scetiondb table:is(.tk-invoice-table, .tk-sample-table) :is(th, td),
    #tk-app:has(.tk-themesidebar) .tk-scetiondb table:is(.tk-invoice-table, .tk-sample-table) td * {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    #tk-app:has(.tk-themesidebar) .tk-scetiondb table.tk-invoice-table > :is(thead, tbody) > tr > :last-child,
    #tk-app:has(.tk-themesidebar) .tk-scetiondb table.tk-invoice-table > tbody > tr > :last-child * {
        text-align: right !important;
    }

    #tk-app:has(.tk-themesidebar) .tk-scetiondb table.tk-invoice-table td :is(h5, h6, strong) {
        font-size: 14px !important;
    }
}