/* ==========================================================================
   Simple polish (Felix, 16 Oct 2026, "Simple polish" design board).
   Same layouts, same buttons, same words. More separation:
   1. a darker page so cards stand out
   2. cards lift off the page with a soft shadow
   3. card titles and list toolbars sit in their own strip
   4. grouped details sit in a darker box inside the card
   5. amber when something is waiting on you
   6. money coming to you shows in green
   Booker and entertainer portals only (admin is untouched).
   ========================================================================== */
.nk-body:is(.portal-booker, .portal-entertainer) {
    --portal-page: #141414;
    --portal-card-border: #363636;
    --portal-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .35);
    --portal-card-head: #292929;
    --portal-card-line: #333333;
    --portal-well: #1C1C1C;
    --portal-well-border: #2E2E2E;
    --portal-table-head: #1E1E1E;
    --portal-turn-row: #2A2620;
    --portal-turn-row-hover: #342E25;
}

/* 1. Page */
body.nk-body:is(.portal-booker, .portal-entertainer) { background-color: var(--portal-page) !important; }

/* 2. Cards lift off the page. Cards inside cards or pop-ups stay flat. */
.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .nk-content :is(.card, .cx-reviews) {
    border-color: var(--portal-card-border) !important;
    box-shadow: var(--portal-card-shadow) !important;
}
.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.card, .modal) .card { box-shadow: none !important; }

/* 3. List toolbars (tabs and search) sit in their own strip; table headings sit in a darker band. */
.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .nk-content .cx-fin-tabbar {
    background: var(--portal-card-head);
    border-bottom: 1px solid var(--portal-card-line) !important;
    border-radius: 8px 8px 0 0;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-fin-table, .nk-tb-list) .nk-tb-head,
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-fin-table, .nk-tb-list) .nk-tb-head > .nk-tb-col { background: var(--portal-table-head) !important; }
/* Where lists show as a table (992px and up), the table starts right under the toolbar strip.
   Below that, record cards keep their normal spacing. */
@media (min-width: 992px) {
    .nk-body.nk-body:is(.portal-booker, .portal-entertainer) .card > .cx-fin-tabbar + .card-inner,
    .nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-fin-tabbar ~ .tab-content > .tab-pane:has(> .cx-fin-table-wrap) { padding-top: 0 !important; }
}

/* 4. Grouped details (the shared facts block). Felix 2026-10-17: each fact is its own small tile, so
   every piece of information reads on its own instead of one block of text. Same dark colours as the
   old box around them. Values never break oddly (portal-records.js facts()): dates stay on one line,
   times break only at "to", other values end in "..." with the full text on hover or tap. */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer, [data-page="Booking Payment"]) .portal-facts {
    gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; grid-auto-flow: row dense;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer, [data-page="Booking Payment"]) :is(.portal-facts, .cx-unified-event-detail-list) > div.is-wide { grid-column: 1 / -1; }
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer, [data-page="Booking Payment"]) .portal-facts > div {
    padding: 10px 12px; background: var(--portal-well, #1C1C1C);
    border: 1px solid var(--portal-well-border, #2E2E2E); border-radius: 8px;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer, [data-page="Booking Payment"]) :is(.portal-facts, .cx-unified-event-detail-list) dd:is(.is-clamp, .is-date) {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer, [data-page="Booking Payment"]) :is(.portal-facts, .cx-unified-event-detail-list) dd.is-time { overflow-wrap: normal; }
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer, [data-page="Booking Payment"]) :is(.portal-facts, .cx-unified-event-detail-list) dd.is-clamp.is-truncated { cursor: pointer; }
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer, [data-page="Booking Payment"]) :is(.portal-facts, .cx-unified-event-detail-list) dd.is-clamp.is-expanded { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

/* 5. Rows that are waiting on the person looking at them. */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-fin-table, .nk-tb-list) .nk-tb-item.is-your-turn:not(.nk-tb-head) { --portal-row-bg: var(--portal-turn-row); }
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-fin-table, .nk-tb-list) .nk-tb-item.is-your-turn:not(.nk-tb-head):is(:hover, :focus-within) { --portal-row-bg: var(--portal-turn-row-hover); }
/* One colour per row, hover included. Some lists (Bookings, Invoices) had their own hover rule
   that painted the row grey while the cells used the row colour, so an amber row showed grey
   bands above and below its shorter cells on hover. The row now always uses the same colour
   as its cells. */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .nk-content :is(.cx-fin-table, .nk-tb-list) .nk-tb-item:not(.nk-tb-head),
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .nk-content :is(.cx-fin-table, .nk-tb-list) .nk-tb-item:not(.nk-tb-head):is(:hover, :focus-within) {
    background: var(--portal-row-bg) !important;
}
/* The row faded to its hover colour over 0.15s while its cells changed at once, so for a moment
   the row showed the old colour around and beside the cells. Row and cells now fade together. */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .nk-content :is(.cx-fin-table, .nk-tb-list) .nk-tb-item:not(.nk-tb-head),
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .nk-content :is(.cx-fin-table, .nk-tb-list) .nk-tb-item:not(.nk-tb-head) > .nk-tb-col {
    transition: background-color .15s ease !important;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .nk-content :is(.cx-fin-table, .nk-tb-list) .nk-tb-item.nk-tb-head { transition: none !important; }
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-mobile-record-card, .cx-mobile-compact-record).is-your-turn {
    background: var(--portal-turn-row) !important;
    border-color: #4A4234 !important;
}

/* Quote pop-up and record pop-ups (invoices, payments): each section gets a title strip, and the
   total sits in a green band. */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-quote-review-modal__body, .portal-record-overview .modal-body) > .card > .card-inner > .portal-section__title:first-child {
    display: block;
    margin: -16px -16px 16px !important;
    padding: 12px 16px;
    background: var(--portal-card-head);
    border-bottom: 1px solid var(--portal-card-line);
    border-radius: 7px 7px 0 0;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .modal .portal-quote-total {
    align-items: center;
    margin-top: 12px !important;
    padding: 12px 14px !important;
    background: #2D372F;
    border: 1px solid #3F5243 !important;
    border-radius: 8px;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .modal .portal-quote-total > strong:first-child { color: var(--portal-text, #EDEDED) !important; font-size: 16px; }
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .modal .portal-quote-total > strong:last-child { font-size: 20px; }

/* Dashboard number tiles turn amber when something is waiting (new enquiries, unread messages). */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-dash-card--attention .card-inner > div > div:first-child {
    background: #393329 !important;
    box-shadow: inset 0 0 0 1px #4A4234;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-dash-card--attention .card-inner > div > div:first-child .icon { color: #E8C98F !important; }

/* Entertainer enquiries: the table reaches both edges of its card, like every other list
   (a fixed 100% width plus the -24px side margins used to leave a gap on the right). */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-ent-enquiries .cx-fin-table-wrap { width: auto !important; max-width: none !important; }

/* Row lines belong to the whole row. Cells used to draw them, so a tall cell (the event name)
   hid the line and short cells (dates, buttons) showed it halfway down: the line stopped and
   started across the row. Now no cell draws a line; each row draws one full-width line on top
   of its cells, and the heading row does the same. The last row has none (the card edge is there). */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-fin-table, .nk-tb-list) .nk-tb-item > .nk-tb-col {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-fin-table, .nk-tb-list) .nk-tb-item { position: relative; }
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-fin-table, .nk-tb-list) .nk-tb-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #2E2E2E;
    pointer-events: none;
    z-index: 3;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-fin-table, .nk-tb-list) .nk-tb-item.nk-tb-head::after { background: #333333; }
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) :is(.cx-fin-table, .nk-tb-list) .nk-tb-item:last-child::after { content: none; }
/* Below 992px quote rows are separate cards with their own edge, so no line inside them. */
@media (max-width: 991.98px) {
    .nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-quotes-premium .cx-fin-table .nk-tb-item::after { content: none; }
}

/* Calendar: the toolbar is a strip like every list toolbar, the weekday row matches table headings. */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-calendar__card > .cx-calendar__toolbar {
    background: var(--portal-card-head);
    border-bottom: 1px solid var(--portal-card-line) !important;
    border-radius: 7px 7px 0 0;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-calendar__weekdays { background: var(--portal-table-head) !important; }

/* Phones and tablets: the quote record cards that are waiting on you are amber too. */
@media (max-width: 991.98px) {
    .nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .nk-content .cx-quotes-premium .cx-fin-table .cx-quote-record.is-your-turn,
    .nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .nk-content .portal-record-card.is-your-turn {
        background: var(--portal-turn-row) !important;
        border-color: #4A4234 !important;
    }
}

/* Dashboard batch (Felix 2026-10-21, U43 to U49). Bookers and acts only; admin is untouched. */
/* U43: "Find entertainers" and "Create event" sit top right of the booker's page header, green last. */
.nk-body.nk-body.nk-body.portal-booker .cx-ent-dashboard > .nk-block-head > .nk-block-between {
    flex-wrap: wrap;
    gap: 12px;
}
.nk-body.nk-body.nk-body.portal-booker .cx-ent-dashboard .cx-dashboard-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-end; /* stays on the right when it drops under the title (tablets) */
}
/* U47: a small arrow on the right of every number card, level with the number, so people can see
   the card opens something. It sits on the number's line so long labels keep their full width. */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-ent-dashboard .cx-dash-card { position: relative; }
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-ent-dashboard .cx-dash-card__arrow {
    position: absolute;
    bottom: 25px;
    right: 16px;
    color: #9A9A9A;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
    transition: color 0.15s ease;
}
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-ent-dashboard .cx-dash-card:is(:hover, :focus-visible) .cx-dash-card__arrow {
    color: var(--portal-text, #EDEDED);
}
/* U46: one "View reviews" button at a time. Top right of the Reviews card from tablets up,
   under the numbers on phones. */
.nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-ent-dashboard .cx-dashboard-reviews__link--below { display: none; }
@media (max-width: 575.98px) {
    .nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-ent-dashboard .cx-dashboard-reviews__link--top { display: none; }
    .nk-body.nk-body.nk-body:is(.portal-booker, .portal-entertainer) .cx-ent-dashboard .cx-dashboard-reviews__link--below {
        display: flex;
        width: 100%;
        margin-top: 12px;
    }
    /* The two header buttons share the full width under the title. An older phone rule
       (app-overrides.css) sets gap 0 on every header block, so the gap is set again here. */
    .nk-body.nk-body.nk-body.portal-booker .cx-ent-dashboard .cx-dashboard-head-actions {
        width: 100%;
        flex-wrap: nowrap;
        gap: 8px !important;
    }
    .nk-body.nk-body.nk-body.portal-booker .cx-ent-dashboard .cx-dashboard-head-actions > .btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
}