/* =====================================================================================================
   Activity pages (dashboard, transactions, consents panel, user audit, policy audit log) and the
   transaction modals: page styles on top of fk-theme.css (fk-* components are defined there, do not
   redefine them).

   Every rule is scoped: pages under their root (.fk-page-activity + .fk-page-dash | .fk-page-trx |
   .fk-page-consents | .fk-page-uaudit | .fk-page-plog), modals under their template class
   (.fk-trx-modal, .fk-trxstore-modal, .fk-decrypt-modal, .fk-apispecs-modal), so nothing leaks into
   other areas. The consents panel keeps its cp-* classes (Content/consents.css); the Gantt and the
   consent timeline of the user audit are in Content/user-audit.css.

   Contents
     1. Shared in the area: icon buttons, row actions, badges on labels, tables inside cards
     2. Dashboard
     3. Transactions
     4. Consents panel (alignment only)
     5. User audit
     6. Policy audit log (trail log)
     7. Modals: status of the time stamping, fill user data, decrypt sample, return API
     8. Responsive
   ===================================================================================================== */


/* -----------------------------------------------------------------------------------------------------
   1. Shared in the area
   ----------------------------------------------------------------------------------------------------- */

/* Square icon buttons (row actions, zoom controls): secondary look, same size everywhere */
body.fk .fk-page-activity .fk-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--fk-ink-2);
    font-size: .85rem;
    line-height: 1;
}

body.fk .fk-page-activity .fk-icon-btn:hover {
    color: var(--fk-accent);
}

/* Row actions: one cell, right aligned, never wrapped */
body.fk .fk-page-activity .fk-row-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

body.fk .fk-page-activity .fk-row-actions .btn + .btn {
    margin-left: 4px;
}

/* Status badges rendered on <label> elements (Bootstrap gives labels a bottom margin) */
body.fk .fk-page-activity label.fk-badge {
    margin: 0;
}

/* Tables flush inside a card: the card gives the border, the first/last cells align with the head */
body.fk .fk-page-activity .fk-card-table {
    border-radius: 0;
}

body.fk .fk-page-activity .fk-card > .fk-card-table:last-child {
    border-radius: 0 0 var(--fk-r) var(--fk-r);
}

body.fk .fk-page-activity .fk-card-table .table th:first-child,
body.fk .fk-page-activity .fk-card-table .table td:first-child {
    padding-left: 16px;
}

body.fk .fk-page-activity .fk-card-table .table th:last-child,
body.fk .fk-page-activity .fk-card-table .table td:last-child {
    padding-right: 16px;
}

body.fk .fk-page-activity .fk-card-table .table thead th {
    white-space: nowrap;
}

body.fk .fk-page-activity .fk-card-table .table tbody tr:last-child td {
    border-bottom: 0;
}

/* Card subtitle (muted line under a card title) */
body.fk .fk-page-activity .fk-dash-card-sub {
    margin-top: 2px;
    color: var(--fk-muted);
    font-size: .82rem;
}

/* Registrations table (dashboard, transactions) and user audit activities: ids in mono on two even
   lines of 18 characters (a GUID splits at its fourth hyphen), so the other columns keep their room */
body.fk .fk-page-activity .fk-trx-id {
    font-family: var(--fk-mono);
    font-size: .76rem;
    line-height: 1.45;
    color: var(--fk-ink-2);
}

body.fk .fk-page-activity .fk-trx-id a,
body.fk .fk-page-activity .fk-trx-id .fk-id-wrap {
    display: inline-block;
    width: 18ch;
    word-break: break-all;
}

body.fk .fk-page-activity .fk-trx-id a {
    color: var(--fk-accent);
}

body.fk .fk-page-activity .fk-trx-table .fk-trx-user {
    white-space: nowrap;
}

/* Pagination: nsite.css paints the active page teal with !important; the theme accent wins here */
body.fk .fk-page-activity .pagination > .active > a,
body.fk .fk-page-activity .pagination > .active > a:hover {
    background-color: var(--fk-accent) !important;
    border-color: var(--fk-accent) !important;
    color: #fff;
}

body.fk .fk-page-activity .fk-trx-confirmed {
    margin-left: 2px;
    color: var(--fk-ok);
}


/* -----------------------------------------------------------------------------------------------------
   2. Dashboard
   ----------------------------------------------------------------------------------------------------- */

/* No page title on the dashboard: the KPI row opens the page with the page-head spacing */
body.fk .fk-page-dash .fk-dash-kpis {
    grid-template-columns: minmax(0, 1.25fr) repeat(5, minmax(0, 1fr));
    margin-top: 24px;
}

body.fk .fk-page-dash .fk-dash-trend {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 2px 0 0;
}

body.fk .fk-page-dash .fk-dash-trend .fa-sort-up {
    position: relative;
    top: 3px;
}

body.fk .fk-page-dash .fk-dash-trend.text-success {
    color: var(--fk-ok-ink) !important;
}

/* Chart + side column */
body.fk .fk-page-dash .fk-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

body.fk .fk-page-dash .fk-dash-grid .fk-card {
    margin-bottom: 0;
}

body.fk .fk-page-dash .fk-dash-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

body.fk .fk-page-dash .fk-dash-side > .fk-dash-trx {
    flex: 1 1 auto;
}

/* Chart: fixed height wrapper (Chart.js responsive, maintainAspectRatio false, reads it) */
body.fk .fk-page-dash .chartjs-wrapper {
    position: relative;
    height: 260px;
}

body.fk .fk-page-dash #performance-line-legend .chartjs-legend {
    margin: 0;
}

body.fk .fk-page-dash #performance-line-legend .chartjs-legend ul {
    flex-wrap: wrap;
    gap: 4px 16px;
}

body.fk .fk-page-dash #performance-line-legend .chartjs-legend ul li {
    margin: 0;
    color: var(--fk-muted);
    font-size: .8rem;
}

body.fk .fk-page-dash #performance-line-legend .chartjs-legend ul li span {
    width: 8px;
    height: 8px;
    margin-right: 6px;
}

/* Small stats (summary card and transactions card) */
body.fk .fk-page-dash .fk-dash-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.fk .fk-page-dash .fk-dash-stats .fk-dash-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.fk .fk-page-dash .fk-dash-stat {
    min-width: 0;
}

body.fk .fk-page-dash .fk-dash-stat-label {
    margin: 0;
    color: var(--fk-muted);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.35;
    text-transform: uppercase;
}

body.fk .fk-page-dash .fk-dash-stat-value {
    margin: 4px 0 0;
    color: var(--fk-ink);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

body.fk .fk-page-dash .fk-dash-stat-note {
    margin: 2px 0 0;
    color: var(--fk-muted);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

body.fk .fk-page-dash .fk-dash-stat-note.is-bad {
    color: var(--fk-bad-ink);
    font-weight: 600;
}

/* Transactions card: optional usage ring + used / remaining */
body.fk .fk-page-dash .fk-dash-trx-body {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
}

body.fk .fk-page-dash .fk-dash-trx-body > .fk-dash-ring {
    align-self: center;
}

body.fk .fk-page-dash .fk-dash-trx-body > .fk-dash-stat {
    flex: 1 1 100px;
}

body.fk .fk-page-dash .fk-dash-trx-body > .fk-dash-stat + .fk-dash-stat {
    padding-left: 16px;
    border-left: 1px solid var(--fk-line);
}

body.fk .fk-page-dash .fk-dash-ring {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
}

body.fk .fk-page-dash .fk-dash-ring .progressbar-js-circle,
body.fk .fk-page-dash .fk-dash-ring svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* -----------------------------------------------------------------------------------------------------
   3. Transactions
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-page-trx .fk-trx-search {
    display: flex;
    flex: 1 1 420px;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 640px;
    margin: 0;
}

body.fk .fk-page-trx .fk-trx-search .form-control {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
}

body.fk .fk-page-trx .fk-trx-search .btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
}

body.fk .fk-page-trx .fk-trx-pagesize {
    flex: 0 0 auto;
    width: auto;
    max-width: 240px;
}

body.fk .fk-page-trx .fk-trx-pager {
    justify-content: flex-end;
}


/* -----------------------------------------------------------------------------------------------------
   4. Consents panel (alignment only: the panel keeps its cp-* look, see consents.css)
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-page-consents .cp-card-title {
    margin-bottom: 14px;
}


/* -----------------------------------------------------------------------------------------------------
   5. User audit
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-page-uaudit .fk-ua-headmain {
    min-width: 0;
}

body.fk .fk-page-uaudit .fk-ua-who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
}

body.fk .fk-page-uaudit .fk-ua-name {
    color: var(--fk-ink-2);
    font-weight: 500;
}

body.fk .fk-page-uaudit .fk-ua-name .fa {
    margin-right: 2px;
    color: var(--fk-muted);
}

body.fk .fk-page-uaudit .fk-ua-id {
    font-family: var(--fk-mono);
    font-size: .76rem;
    overflow-wrap: anywhere;
}

/* Search toolbar */
body.fk .fk-page-uaudit .fk-ua-search {
    flex-wrap: wrap;
    margin-bottom: 16px;
}

body.fk .fk-page-uaudit .fk-ua-search .form-control {
    width: auto;
    min-width: 0;
}

body.fk .fk-page-uaudit .fk-ua-search .fk-ua-search-id {
    flex: 0 1 340px;
}

body.fk .fk-page-uaudit .fk-ua-search .fk-ua-search-mail {
    flex: 0 1 260px;
}

body.fk .fk-page-uaudit .fk-ua-search .fk-ua-search-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
}

/* Gantt card: legend on the left, zoom on the right, chart flush in the card */
body.fk .fk-page-uaudit .fk-ua-gantt > .fk-card-head {
    align-items: center;
}

body.fk .fk-page-uaudit .fk-ua-gantt .gantt-container {
    border: 0;
    border-radius: 0 0 var(--fk-r) var(--fk-r);
}

/* Status icons in the timeline cards and tables: palette colours */
body.fk .fk-page-uaudit .text-success {
    color: var(--fk-ok) !important;
}

body.fk .fk-page-uaudit .text-danger {
    color: var(--fk-bad) !important;
}

/* ... but small text (the "Active" / "Revoked" note of a subscription) uses the darker ink of the hue,
   readable on the soft background */
body.fk .fk-page-uaudit .event-trx-sub-header .text-success {
    color: var(--fk-ok-ink) !important;
}

body.fk .fk-page-uaudit .event-trx-sub-header .text-danger {
    color: var(--fk-bad-ink) !important;
}

/* Activities: below the desktop width the table scrolls inside its card instead of squeezing the
   source and policy columns into narrow, very tall rows (the minimums still fit the 1200px page with a
   notarization hash in the row) */
body.fk .fk-page-uaudit .fk-ua-activities {
    min-width: 1100px;
}

body.fk .fk-page-uaudit .fk-ua-activities .fk-ua-origin {
    min-width: 120px;
}

body.fk .fk-page-uaudit .fk-ua-activities .fk-ua-policy {
    min-width: 180px;
}

/* consent abbreviations stay readable chips */
body.fk .fk-page-uaudit .fk-ua-consents {
    min-width: 150px;
}

body.fk .fk-page-uaudit .fk-ua-consents .badge {
    margin-bottom: 2px;
}


/* -----------------------------------------------------------------------------------------------------
   6. Policy audit log (trail log of a registration)
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-page-plog .fk-plog-headmain {
    min-width: 0;
}

body.fk .fk-page-plog .fk-plog-id {
    font-family: var(--fk-mono);
    font-size: .8rem;
    color: var(--fk-ink-2);
    overflow-wrap: anywhere;
}

body.fk .fk-page-plog .timeline {
    position: relative;
    padding: 4px 0;
}

body.fk .fk-page-plog .timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 15px;
    width: 2px;
    border-radius: 2px;
    background: var(--fk-line);
}

body.fk .fk-page-plog .timeline-item {
    position: relative;
    padding-left: 48px;
    padding-bottom: 12px;
}

body.fk .fk-page-plog .timeline-item:last-child {
    padding-bottom: 0;
}

body.fk .fk-page-plog .timeline-marker {
    position: absolute;
    top: 10px;
    left: 2px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fk-accent);
    box-shadow: 0 0 0 4px var(--fk-surface);
    color: #fff;
    font-size: .78rem;
}

body.fk .fk-page-plog .timeline-item.event-error .timeline-marker {
    background: var(--fk-bad);
}

body.fk .fk-page-plog .timeline-item.event-success .timeline-marker {
    background: var(--fk-ok);
}

body.fk .fk-page-plog .timeline-item.event-warning .timeline-marker {
    background: var(--fk-warn);
    color: #3d2e00;
}

body.fk .fk-page-plog .timeline-content {
    padding: 12px 16px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r);
}

body.fk .fk-page-plog .timeline-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fk-line);
}

body.fk .fk-page-plog .timeline-title {
    color: var(--fk-ink);
    font-weight: 600;
}

body.fk .fk-page-plog .timeline-date {
    margin-left: auto;
    color: var(--fk-muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.fk .fk-page-plog .timeline-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: .85rem;
}

body.fk .fk-page-plog .timeline-body > * {
    max-width: 100%;
}

body.fk .fk-page-plog .timeline-note {
    align-self: stretch;
    margin: 0;
    padding: 6px 10px;
    font-size: .82rem;
}

body.fk .fk-page-plog .timeline-data {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

body.fk .fk-page-plog .timeline-data .badge {
    border-radius: var(--fk-r-sm);
    font-family: var(--fk-mono);
    font-weight: 500;
    white-space: normal;
    word-break: break-all;
    text-align: left;
}

body.fk .fk-page-plog .timeline-meta {
    color: var(--fk-muted);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

body.fk .fk-page-plog .timeline-meta .fa {
    width: 14px;
    margin-right: 2px;
    text-align: center;
}


/* -----------------------------------------------------------------------------------------------------
   7. Modals (uib templates: the root container-fluid carries .fk-modal)
   ----------------------------------------------------------------------------------------------------- */

/* 7.1 Status of the time stamping (mod_trxstatus.html) ------------------------------------------ */
body.fk .fk-trx-modal .fk-trx-modal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fk-line);
}

body.fk .fk-modal.fk-trx-modal .fk-trx-modal-head .fk-modal-title {
    margin: 0;
}

body.fk .fk-trx-modal .fk-trx-modal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.fk .fk-trx-modal .fk-trx-modal-meta .fk-badge {
    white-space: normal;
}

/* Vertical stepper: marker + connecting line; complete = ok, current = warn */
body.fk .fk-trx-modal .fk-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.fk .fk-trx-modal .fk-step {
    position: relative;
    padding: 0 0 22px 44px;
}

body.fk .fk-trx-modal .fk-step:last-child {
    padding-bottom: 0;
}

body.fk .fk-trx-modal .fk-step::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 4px;
    left: 13px;
    width: 2px;
    border-radius: 2px;
    background: var(--fk-line);
}

body.fk .fk-trx-modal .fk-step:last-child::before {
    display: none;
}

body.fk .fk-trx-modal .fk-step.complete::before {
    background: var(--fk-ok);
}

body.fk .fk-trx-modal .fk-step-marker {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--fk-line-2);
    border-radius: 50%;
    background: var(--fk-surface);
    color: #fff;
    font-size: .75rem;
}

body.fk .fk-trx-modal .fk-step.complete .fk-step-marker {
    background: var(--fk-ok);
    border-color: var(--fk-ok);
}

body.fk .fk-trx-modal .fk-step.current .fk-step-marker {
    background: var(--fk-warn-bg);
    border-color: var(--fk-warn);
    box-shadow: 0 0 0 4px rgba(226, 179, 0, .16);
}

body.fk .fk-trx-modal .fk-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    min-height: 28px;
    padding-top: 3px;
}

body.fk .fk-trx-modal .fk-step-title {
    flex: 1 1 260px;
    min-width: 0;
    color: var(--fk-ink);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
}

body.fk .fk-trx-modal .fk-step-ok {
    margin-left: 4px;
    color: var(--fk-ok);
}

body.fk .fk-trx-modal .fk-step-desc {
    display: block;
    margin-top: 2px;
    color: var(--fk-muted);
    font-size: .82rem;
    font-weight: 400;
    letter-spacing: 0;
}

body.fk .fk-trx-modal .fk-step-date {
    flex: 0 0 auto;
    color: var(--fk-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

/* Key / value rows of a step (fk-kv grid, compact) */
/* same key column on every step, so the three boxes line up */
body.fk .fk-trx-modal .fk-step-kv {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 6px 16px;
    align-items: baseline;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--fk-soft);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
}

/* a step whose rows are all switched off by ng-if leaves no empty box */
body.fk .fk-trx-modal .fk-step-kv:not(:has(> *)) {
    display: none;
}

body.fk .fk-trx-modal .fk-step-kv .fk-kv-k {
    font-size: .7rem;
    letter-spacing: .04em;
}

body.fk .fk-trx-modal .fk-step-kv .fk-kv-v {
    color: var(--fk-ink-2);
    font-family: var(--fk-mono);
    font-size: .78rem;
    word-break: break-all;
}

body.fk .fk-trx-modal .fk-step-kv .fk-step-badge {
    font-family: var(--fk-font);
    word-break: normal;
}

body.fk .fk-trx-modal .fk-step-kv .fk-step-badge .mono {
    font-family: var(--fk-mono);
    word-break: break-all;
}

/* TAG row: aligned on the same two columns as the key / value rows */
body.fk .fk-trx-modal .fk-step-tag {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 6px 16px;
    align-items: baseline;
}

body.fk .fk-trx-modal .fk-step-tag > a.fk-kv-v {
    font-family: var(--fk-font);
    font-size: .82rem;
}

body.fk .fk-trx-modal .fk-step-notag {
    grid-column: 2;
    color: var(--fk-muted);
    font-size: .8rem;
    font-style: italic;
}

/* 7.2 Fill user data (mod_trx_store.html) ----------------------------------------------------- */
body.fk .fk-trxstore-modal .form-group {
    margin-bottom: 14px;
}

body.fk .fk-trxstore-modal .fk-empty {
    padding: 20px 12px;
}

/* 7.3 Sample code to decrypt data (mod_howtodecrypt.html) ------------------------------------- */
body.fk .fk-decrypt-modal .fk-decrypt-block + .fk-decrypt-block {
    margin-top: 16px;
}

body.fk .fk-decrypt-modal .fk-decrypt-caption {
    margin: 0 0 6px;
    color: var(--fk-ink-2);
    font-size: .85rem;
    font-weight: 600;
}

body.fk .fk-decrypt-modal .fk-code-area {
    min-height: 270px;
    padding: 10px 12px;
    background: var(--fk-soft);
    color: var(--fk-ink);
    font-family: var(--fk-mono);
    font-size: .75rem;
    line-height: 1.5;
    white-space: pre;
    resize: vertical;
}

/* 7.4 Return API specifications (mod_returnapispecs.html): title only ------------------------- */
body.fk .fk-apispecs-modal > .fk-modal-title {
    margin-bottom: 0;
}


/* -----------------------------------------------------------------------------------------------------
   8. Responsive
   ----------------------------------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    body.fk .fk-page-dash .fk-dash-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    body.fk .fk-page-dash .fk-dash-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    body.fk .fk-trx-modal .fk-step-kv {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    body.fk .fk-trx-modal .fk-step-kv .fk-kv-v {
        margin-bottom: 8px;
    }

    body.fk .fk-trx-modal .fk-step-kv .fk-kv-v:last-child {
        margin-bottom: 0;
    }

    body.fk .fk-trx-modal .fk-step-notag {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    body.fk .fk-page-dash .fk-dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 16px;
    }

    body.fk .fk-page-dash .fk-dash-kpis .fk-kpi {
        padding: 12px 14px;
    }

    body.fk .fk-page-dash .fk-dash-kpis .fk-kpi-label {
        font-size: .72rem;
    }

    body.fk .fk-page-dash .fk-dash-kpis .fk-kpi-value {
        font-size: 1.45rem;
    }

    body.fk .fk-page-dash .chartjs-wrapper {
        height: 220px;
    }

    body.fk .fk-page-trx .fk-trx-pagesize {
        flex: 1 1 100%;
        max-width: none;
    }

    body.fk .fk-page-uaudit .fk-ua-search .fk-ua-search-id,
    body.fk .fk-page-uaudit .fk-ua-search .fk-ua-search-mail {
        flex: 1 1 100%;
    }

    body.fk .fk-page-uaudit .fk-ua-search .fk-ua-search-mail {
        flex-basis: calc(100% - 46px);
    }

    body.fk .fk-page-plog .timeline::before {
        left: 11px;
    }

    body.fk .fk-page-plog .timeline-item {
        padding-left: 36px;
    }

    body.fk .fk-page-plog .timeline-marker {
        left: 0;
        width: 24px;
        height: 24px;
        font-size: .7rem;
    }

    body.fk .fk-page-plog .timeline-content {
        padding: 10px 12px;
    }

    body.fk .fk-page-plog .timeline-date {
        margin-left: 0;
        white-space: normal;
    }

    body.fk .fk-trx-modal .fk-step {
        padding-left: 38px;
    }
}

/* ---------------------------------------------------------------------------------------------------
   Dashboard: accesso in evidenza al Pannello dei consensi (tutto il riquadro e' il collegamento)
   --------------------------------------------------------------------------------------------------- */
body.fk .fk-page-dash .fk-dash-consents {
    display: flex;
    align-items: center;
    gap: 20px 28px;
    padding: 18px 20px;
    margin-bottom: 16px;
    color: var(--fk-ink);
    text-decoration: none;
    border-left: 4px solid var(--fk-accent);
    transition: box-shadow .15s ease, border-color .15s ease;
}

body.fk .fk-page-dash .fk-dash-consents:hover {
    text-decoration: none;
    color: var(--fk-ink);
    box-shadow: var(--fk-shadow-2);
}

body.fk .fk-page-dash .fk-dash-consents:focus-visible {
    outline: 2px solid var(--fk-accent);
    outline-offset: 2px;
}

body.fk .fk-page-dash .fk-dash-consents-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 280px;
    min-width: 0;
}

body.fk .fk-page-dash .fk-dash-consents-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--fk-r);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fk-accent-soft);
    color: var(--fk-accent);
    font-size: 1.25rem;
}

body.fk .fk-page-dash .fk-dash-consents-text .fk-card-title {
    font-size: 1.1rem;
    margin: 0 0 2px;
}

body.fk .fk-page-dash .fk-dash-consents-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, auto));
    gap: 4px 24px;
    flex: 0 1 auto;
}

body.fk .fk-page-dash .fk-dash-cstat-label {
    color: var(--fk-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.fk .fk-page-dash .fk-dash-cstat-value {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

body.fk .fk-page-dash .fk-dash-cstat.is-orange .fk-dash-cstat-value { color: var(--fk-orange-ink); }
body.fk .fk-page-dash .fk-dash-cstat.is-bad .fk-dash-cstat-value { color: var(--fk-bad-ink); }

body.fk .fk-page-dash .fk-dash-consents-cta {
    flex: 0 0 auto;
    white-space: nowrap;
}

body.fk .fk-page-dash .fk-dash-consents:hover .fk-dash-consents-cta {
    background: var(--fk-accent-2);
    border-color: var(--fk-accent-2);
}

@media (max-width: 1199.98px) {
    body.fk .fk-page-dash .fk-dash-consents {
        flex-wrap: wrap;
    }

    body.fk .fk-page-dash .fk-dash-consents-stats {
        order: 3;
        flex: 1 1 100%;
    }
}

@media (max-width: 575.98px) {
    body.fk .fk-page-dash .fk-dash-consents {
        padding: 16px;
    }

    body.fk .fk-page-dash .fk-dash-consents-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
    }

    body.fk .fk-page-dash .fk-dash-cstat-label {
        white-space: normal;
    }

    body.fk .fk-page-dash .fk-dash-consents-cta {
        order: 4;
        flex: 1 1 100%;
    }
}