/* Last file in the cascade. Signed-in pages (.tk-body--app and the
   customer, technician, and admin variants) and the public rhythm
   (.tk-portal--public) are restated here, so they beat earlier files
   including 06-responsive.css and 13-portals.css.
   When a page ignores an edit, the winning rule is usually here.
   Change it here. Do not add another stylesheet after this one. */

/* ==========================================================================
   Portal product system
   One language for every signed-in screen. The public site is not in
   .tk-body--app, so storefront type, heroes, and cyan stay as they are.
   Spacing: 4 8 12 16 24 32 48 64. Controls: 44px, radius 12, 160ms.
   ========================================================================== */

body.tk-body--app {
    --cyan: #00B4E6;
    --cyan-bright: #3AD0F7;
    --cyan-dim: rgba(0, 180, 230, .14);
    --cyan-line: rgba(0, 180, 230, .36);
    --focus-ring: rgba(0, 180, 230, .22);
    --radius: 12px;
    --radius-sm: 12px;
    --radius-lg: 12px;
    --tk-header-h: 64px;
    --tk-control: 40px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    background-image: none;
}

html[data-theme="light"] body.tk-body--app {
    --cyan: #007EA8;
    --cyan-bright: #0098C8;
    --cyan-dim: rgba(0, 126, 168, .12);
    --cyan-line: rgba(0, 126, 168, .32);
    --focus-ring: rgba(0, 126, 168, .22);
}

.tk-body--app .tk-container { padding-inline: 16px; }
.tk-body--app .tk-main { padding-block: 24px 32px; }

@media (min-width: 768px) {
    .tk-body--app .tk-container { padding-inline: 24px; }
}
@media (min-width: 1024px) {
    .tk-body--app .tk-container { padding-inline: 32px; }
    .tk-body--admin .tk-main > .tk-container { max-width: 1280px; }
}
@media (max-width: 720px) {
    .tk-body--app .tk-main { padding-block: 16px 32px; }
}

.tk-body--customer .tk-main > .tk-container,
.tk-body--tech .tk-main > .tk-container { max-width: 1120px; }

.tk-body--app h1,
.tk-body--app .tk-pagehead h1 {
    margin: 0;
    color: var(--text);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}
.tk-body--app h2,
.tk-body--app .tk-pagehead h2,
.tk-body--app .tk-account-layout__heading {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}
.tk-body--app .tk-muted,
.tk-body--app .tk-faint,
.tk-body--app .tk-help,
.tk-body--app .tk-pagehead__purpose {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.tk-body--app .tk-pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.tk-body--app .tk-pagehead__copy { min-width: 0; flex: 1 1 16rem; }
.tk-body--app .tk-pagehead__purpose {
    margin: 4px 0 0;
    max-width: 40rem;
    color: var(--silver-dim);
}
.tk-body--app .tk-pagehead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}
.tk-pagehead--together { justify-content: flex-start; }
.tk-pagehead--together .tk-pagehead__copy { flex: 0 1 auto; }

.tk-stack { display: grid; gap: 16px; }
.tk-unit__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.tk-unit__head h2 { margin: 0; font-size: 1.0625rem; }
.tk-unit__meta {
    display: grid;
    gap: 8px;
    margin: 16px 0 18px;
    max-width: 28rem;
}
.tk-unit__meta > div {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 8px 12px;
    align-items: baseline;
}
.tk-unit__meta dt {
    margin: 0;
    color: var(--silver-dim);
    font-size: .85rem;
    font-weight: 700;
}
.tk-unit__meta dd { margin: 0; font-weight: 600; }
.tk-unit__rename {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 28rem;
}
.tk-unit__rename .tk-field { flex: 1 1 auto; min-width: 0; margin: 0; }
.tk-unit__rename .tk-input { width: 100%; }
@media (max-width: 480px) {
    .tk-unit__meta > div { grid-template-columns: 1fr; gap: 2px; }
}
.tk-body--app .tk-pagehead > .tk-muted,
.tk-body--app .tk-pagehead > p {
    flex: 1 1 100%;
    margin: 0;
    max-width: 40rem;
}
.tk-body--app .tk-pagehead .tk-row--between {
    width: 100%;
    align-items: flex-start;
    gap: 16px;
}

.tk-body--app .tk-admin-section { margin-top: 24px; }
.tk-body--app .tk-admin-section:first-child { margin-top: 0; }
.tk-body--app .tk-field { margin-bottom: 16px; }
.tk-body--app .tk-filterbar { margin-bottom: 16px; gap: 12px; }

.tk-body--app .tk-btn {
    min-height: var(--tk-control);
    padding: 0 16px;
    border-radius: 12px;
    font-size: 15px;
    transform: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.tk-body--app .tk-btn:hover,
.tk-body--app .tk-btn:active { transform: none; }
.tk-body--app .tk-btn--primary::after,
.tk-body--app .tk-btn--primary:hover::after { display: none; }
.tk-body--app .tk-btn--sm { min-height: 40px; padding: 0 12px; font-size: 13px; }
html[data-theme="light"] body.tk-body--app .tk-btn--primary,
html[data-theme="light"] body.tk-body--app .tk-btn--primary:hover { color: #fff; }

.tk-body--app .tk-input,
.tk-body--app .tk-select {
    min-height: var(--tk-control);
    border-radius: 12px;
}
.tk-body--app .tk-textarea { border-radius: 12px; }
.tk-body--app .tk-card,
.tk-body--app .tk-request-card,
.tk-body--app .tk-panel,
.tk-body--app .tk-stat,
.tk-body--app .tk-fieldset {
    border-radius: 12px;
    box-shadow: none;
}
.tk-body--app .tk-card { padding: 16px; }
.tk-body--app .tk-card--pad,
.tk-body--app .tk-card--pad-lg { padding: 20px; }

.tk-body--app .tk-earnings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.tk-body--app .tk-earnings--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tk-body--app .tk-earnings--fit {
    grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
}
.tk-earnings-note { margin: -8px 0 24px; }
.tk-body--tech .tk-profile-form { max-width: 760px; }
.tk-body--tech .tk-tech-extras { margin-top: 24px; }
.tk-body--tech .tk-filterbar { align-items: flex-end; }
.tk-body--tech .tk-filterbar > .tk-btn { align-self: flex-end; }

/* Staff shell: the sidebar is the product nav. The header keeps brand,
   language, notifications, and the account menu — not a second menu. */
.tk-body--admin .tk-nav { display: none; }
@media (max-width: 1100px) {
    .tk-body--admin .tk-header__auth { display: inline-flex; }
    .tk-body--admin .tk-burger__btn { display: none; }
        .tk-body--admin .tk-account__btn { min-height: 44px; }
    .tk-body--app.tk-body--sticky,
    .tk-body--app:has(.tk-stickybar) {
        padding-bottom: calc(var(--tk-tabs-h, 64px) + env(safe-area-inset-bottom, 0px) + 168px);
    }
    .tk-body--app.tk-body--sticky-trio,
    .tk-body--app:has(.tk-stickybar--trio) {
        padding-bottom: calc(var(--tk-tabs-h, 64px) + env(safe-area-inset-bottom, 0px) + 220px);
    }
}
.tk-filter-more { grid-column: 1 / -1; }

/* Public site rhythm. Scoped so the signed-in portals keep their own shell. */
.tk-portal--public {
    --radius: 12px;
    --radius-sm: 12px;
}
.tk-portal--public .tk-container { padding-inline: 16px; }
.tk-portal--public .tk-main,
.tk-portal--public .tk-section { padding-block: 32px; }
.tk-portal--public .tk-pagehead { margin-bottom: 16px; }
.tk-portal--public .tk-hero--photo .tk-btn--ghost { background: transparent; }
.tk-portal--public .tk-heat__copy { white-space: normal; }
.tk-portal--public .tk-heat__dismiss { width: 44px; height: 44px; }
.tk-portal--public .tk-pagehead h1,
.tk-portal--public .tk-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.25;
    font-weight: 800;
}
.tk-portal--public .tk-pagehead h2,
.tk-portal--public .tk-section h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 800;
}
.tk-portal--public .tk-hero__lead,
.tk-portal--public .tk-pagehead .tk-muted,
.tk-portal--public .tk-section .tk-muted {
    font-size: 16px;
    line-height: 1.6;
}
.tk-portal--public .tk-service,
.tk-portal--public .tk-step--card,
.tk-portal--public .tk-quote {
    border-radius: 12px;
    height: 100%;
}
.tk-portal--public .tk-btn { min-height: 40px; }
.tk-portal--public section,
.tk-portal--public .tk-pagehead,
.tk-portal--public .tk-pagehead h1,
.tk-portal--public .tk-pagehead h2 {
    scroll-margin-top: calc(var(--tk-header-h, 64px) + 16px);
}
.tk-portal--public .tk-coverage-more { margin-top: 24px; }
.tk-portal--public .tk-coverage-more > summary {
    cursor: pointer;
    font-weight: 700;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.tk-portal--public .tk-heat {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 24px;
}
@media (max-width: 900px) {
    .tk-portal--public .tk-hero--photo { padding-top: 16px; }
    .tk-portal--public .tk-hero--photo.tk-hero--multi { padding-bottom: 44px; }
    .tk-portal--public .tk-hero--photo .tk-banner__dots { bottom: 16px; }
}
@media (max-width: 1100px) {
    .tk-body.tk-portal--public:has(.tk-tabs) {
        padding-bottom: calc(var(--tk-tabs-h, 64px) + 32px + env(safe-area-inset-bottom, 0px));
    }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .tk-portal--public .tk-hero--photo .tk-banner__dots {
        bottom: calc(var(--tk-tabs-h, 64px) + 20px);
    }
}
@media (min-width: 768px) {
    .tk-portal--public .tk-container { padding-inline: 24px; }
    .tk-portal--public .tk-main,
    .tk-portal--public .tk-section { padding-block: 40px; }
}
@media (min-width: 1024px) {
    .tk-portal--public .tk-container { padding-inline: 32px; }
    .tk-portal--public .tk-main,
    .tk-portal--public .tk-section { padding-block: 48px; }
}
.tk-filter-more > summary {
    cursor: pointer;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--silver-dim);
    font-weight: 700;
}
.tk-filter-more__body {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-bottom: 4px;
}
.tk-pii-more { margin-top: 8px; }
.tk-pii-more > summary {
    cursor: pointer;
    color: var(--text);
    font-weight: 700;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.tk-body--tech .tk-filterbar .tk-field { margin: 0; min-width: 12rem; flex: 1 1 12rem; }
.tk-body--app .tk-stat {
    max-width: none;
    min-width: 0;
    gap: 4px;
    padding: 16px;
}
.tk-body--app .tk-stat span { font-size: 13px; }
.tk-body--app .tk-stat strong {
    color: var(--text);
    font-size: 1.375rem;
    line-height: 1.2;
}

.tk-queue {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-card);
}
.tk-queue li + li { border-top: 1px solid var(--line-soft); }
.tk-queue a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 12px 16px;
    color: var(--text);
}
.tk-queue a:hover { background: var(--bg-hover); color: var(--text); }
.tk-queue strong { font-size: 1.0625rem; }
.tk-queue__total { margin: 0 0 12px; }
.tk-queue__total strong { color: var(--text); margin-inline-start: 8px; }

.tk-body--app .tk-sidebar__label {
    margin: 16px 12px 4px;
    color: var(--silver-faint);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.tk-body--app .tk-sidebar__nav > .tk-sidebar__label:first-child { margin-top: 8px; }
.tk-body--app .tk-sidebar__link.is-active,
.tk-body--app .tk-nav > a.is-active {
    color: var(--text);
    background: var(--cyan-dim);
}
.tk-body--app .tk-sidebar__link.is-active {
    box-shadow: inset 3px 0 0 var(--cyan);
}
html[dir="rtl"] .tk-body--app .tk-sidebar__link.is-active {
    box-shadow: inset -3px 0 0 var(--cyan);
}
.tk-body--app .tk-nav > a.is-active {
    box-shadow: inset 0 -2px 0 var(--cyan);
}

.tk-body--app .tk-tabs__item { font-size: 12px; font-weight: 600; }
.tk-body--app .tk-feed-status { margin-bottom: 16px; }
.tk-body--customer .tk-main > .tk-container:has(.tk-book-step) {
    max-width: 800px;
}

@media (max-width: 720px) {
    .tk-price-table thead { display: none; }
    .tk-price-table,
    .tk-price-table tbody,
    .tk-price-table tr,
    .tk-price-table td { display: block; width: 100%; }
    .tk-price-table tr {
        padding: 16px;
        border-bottom: 1px solid var(--line);
    }
    .tk-price-table tr:last-child { border-bottom: 0; }
    .tk-price-table td { padding: 8px 0; border: 0; }
    .tk-price-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--silver-dim);
        font-size: 13px;
        font-weight: 600;
    }
    .tk-price-table .tk-input { width: 100%; }
    .tk-body--app .tk-logo__en { display: none; }
    .tk-body--app .tk-logo--workspace .tk-logo__ar {
        max-width: 9.5rem;
        overflow: visible;
        text-overflow: clip;
    }
    .tk-body--app .tk-pagehead__actions { width: 100%; }
    .tk-body--app .tk-pagehead__actions .tk-btn { flex: 1 1 auto; }
    .tk-body--app .tk-earnings:not(.tk-earnings--3) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.tk-body--app:has(.tk-tabs) {
        padding-bottom: calc(var(--tk-tabs-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
    }
    /* Price-only bar repeats the dock and has no action. Real action bars
       sit fully above the tab row, including the raised book button. */
    .tk-stickybar--price-only { display: none !important; }
    .tk-body--app .tk-stickybar {
        bottom: calc(var(--tk-tabs-h, 64px) + env(safe-area-inset-bottom, 0px) + 40px);
    }
}