/* Customizable client dashboard: widget grid, drag handle, drop placeholder, and the show/hide window. */

/* The grid: one column on a phone (heights follow the content); from a laptop up, 4 columns of fixed-height rows. */
.nf-dash-grid {
    --nf-row: 20px;
    --nf-gap: 1rem;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nf-gap);
}

.nf-dash-cell {
    position: relative;
    min-width: 0;
    border-radius: var(--ynex-radius, 0.5rem); /* the same as the cards inside (nero-sidebar.css), or their corners are clipped */
    touch-action: pan-y;
}

/* The windows after the grid (Widgets, delete dashboard ...) take no room: left in the flow each one added a 32px gap under the last
   widget, so the page ended well below it. They only hold overlays that open on top of the page. */
.fi-dashboard-page .nf-dash-grid ~ :not(.nf-dash-empty) { position: absolute; height: 0; margin: 0; padding: 0; }

.nf-dash-handle, .nf-dash-resize, .nf-dash-guides, .nf-dash-placeholder { display: none; }

@media (min-width: 1024px) {
    .nf-dash-grid {
        grid-template-columns: repeat(32, minmax(0, 1fr));
        grid-auto-rows: var(--nf-row);
        /* Dragging and releasing animates the grid's height, so the page never jumps. */
        transition: min-height 0.25s ease;
    }
    .nf-dash-cell {
        grid-column: calc(var(--x) + 1) / span var(--w);
        grid-row: calc(var(--y) + 1) / span var(--h);
        z-index: 2;
    }
    /* Editing (the edit button in the header): no drag icon - a press anywhere on a widget picks it up; only the resize corner shows. */
    .nf-dash-grid.is-editing .nf-dash-resize { display: inline-flex; }
    .nf-dash-grid.is-editing .nf-dash-cell { cursor: grab; touch-action: none; user-select: none; }
    .nf-dash-grid.is-editing .nf-dash-cell.is-lifted { cursor: grabbing; }
    .nf-dash-grid.is-editing .nf-dash-cell * { cursor: inherit; }
    .nf-dash-grid.is-editing .nf-dash-cell .nf-dash-resize { cursor: nwse-resize; }
    .nf-dash-guides, .nf-dash-placeholder { display: grid; }
}

/* The widget fills its cell and scrolls inside it if it is too small for its content. */
@media (min-width: 1024px) {
    .nf-dash-cell > .fi-wi-widget { height: 100%; min-height: 0; overflow: auto; border-radius: var(--ynex-radius, 0.5rem); }
    .nf-dash-cell > .fi-wi-widget > .fi-section,
    .nf-dash-cell > .fi-wi-widget > .fi-wi-stats-overview { min-height: 100%; }
    .nf-dash-cell > .fi-wi-widget { scrollbar-width: thin; }
}

/* Drag handle: appears when the pointer is over the widget (always on touch screens). */
.nf-dash-handle {
    position: absolute;
    top: 0.6rem;
    inset-inline-end: 0.6rem;
    z-index: 5;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    color: rgb(var(--gray-500));
    background: rgba(var(--gray-100), 0.92);
    cursor: grab;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.15s ease, color 0.15s ease;
    touch-action: none;
}
.nf-dash-handle svg { width: 1rem; height: 1rem; pointer-events: none; }
.nf-dash-cell:hover .nf-dash-handle,
.nf-dash-handle:focus-visible,
.nf-dash-cell.is-lifted .nf-dash-handle { opacity: 1; transform: scale(1); }
.nf-dash-handle:hover { color: rgb(var(--primary-600)); background: rgba(var(--primary-500), 0.18); }
.nf-dash-handle:active { cursor: grabbing; }
@media (hover: none) { .nf-dash-handle { opacity: 0.85; transform: none; } }
.dark .nf-dash-handle { background: rgb(255 255 255 / 0.12); color: rgb(var(--gray-300)); }

/* Resize handle in the bottom corner. */
.nf-dash-resize {
    position: absolute;
    bottom: 0.35rem;
    inset-inline-end: 0.35rem;
    z-index: 5;
    width: 1.25rem;
    height: 1.25rem;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.18s ease;
    touch-action: none;
    background:
        linear-gradient(135deg, transparent 0 55%, rgb(var(--gray-400)) 55% 62%, transparent 62% 72%, rgb(var(--gray-400)) 72% 79%, transparent 79%);
    border-radius: 0 0 0.5rem 0;
}
[dir="rtl"] .nf-dash-resize { cursor: nesw-resize; transform: scaleX(-1); }
.nf-dash-cell:hover .nf-dash-resize,
.nf-dash-cell.is-resizing .nf-dash-resize { opacity: 1; }

/* While one is held: every row and column of the grid shows as a dotted box. */
.nf-dash-guides {
    position: absolute;
    inset: 0;
    z-index: 0;
    grid-template-columns: repeat(32, minmax(0, 1fr));
    grid-auto-rows: var(--nf-row);
    gap: var(--nf-gap);
    pointer-events: none;
    opacity: 0;
    animation: nf-dash-fade 0.2s ease forwards;
}
.nf-dash-guide {
    border: 2px dashed rgba(var(--primary-500), 0.28);
    border-radius: var(--ynex-radius, 0.5rem);
}
@keyframes nf-dash-fade { to { opacity: 1; } }

/* Where the held widget will land. */
.nf-dash-placeholder {
    z-index: 1;
    border: 2px dashed rgb(var(--primary-500));
    border-radius: var(--ynex-radius, 0.5rem);
    background: rgba(var(--primary-500), 0.1);
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* The lifted widget: raised, a little larger, soft shadow, follows the pointer. */
.nf-dash-cell.is-lifted {
    z-index: 30;
    cursor: grabbing;
    will-change: transform;
    user-select: none;
}
.nf-dash-cell.is-lifted > .fi-wi-widget {
    box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.38), 0 0 0 2px rgba(var(--primary-500), 0.55);
    transition: box-shadow 0.2s ease;
}
.nf-dash-cell.is-resizing { z-index: 30; user-select: none; }
.nf-dash-cell.is-resizing > .fi-wi-widget { box-shadow: 0 0 0 2px rgba(var(--primary-500), 0.6); }
.nf-dash-grid.is-holding { user-select: none; cursor: grabbing; }

.nf-dash-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 3rem 1rem;
    border: 2px dashed rgb(var(--gray-300));
    border-radius: var(--ynex-radius, 0.5rem);
    color: rgb(var(--gray-500));
}
.dark .nf-dash-empty { border-color: rgb(255 255 255 / 0.15); }

/* Header: the Customize button next to the period filter. */
.nf-dashboard-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.nf-customize-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    height: 2.25rem; padding: 0 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.875rem; font-weight: 500;
    color: rgb(var(--gray-700));
    background: #fff;
    box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.1);
    cursor: pointer;
    transition: box-shadow 0.15s ease, color 0.15s ease;
}
.nf-customize-btn svg { width: 1.1rem; height: 1.1rem; }
.nf-customize-btn:hover { color: rgb(var(--primary-600)); box-shadow: 0 0 0 1px rgba(var(--primary-500), 0.6); }
.dark .nf-customize-btn { color: rgb(var(--gray-200)); background: rgb(255 255 255 / 0.05); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1); }

/* The window. */
.nf-dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.nf-dash-item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.07);
    transition: background-color 0.15s ease;
}
.nf-dash-item:hover { background: rgb(var(--gray-50)); }
.dark .nf-dash-item { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); }
.dark .nf-dash-item:hover { background: rgb(255 255 255 / 0.04); }
.nf-dash-item-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.nf-dash-item-name { font-weight: 600; font-size: 0.9rem; color: rgb(var(--gray-950)); }
.dark .nf-dash-item-name { color: #fff; }
.nf-dash-item-desc { font-size: 0.8rem; color: rgb(var(--gray-500)); }

.nf-switch {
    position: relative; flex-shrink: 0;
    width: 2.75rem; height: 1.5rem;
    border-radius: 9999px;
    background: rgb(var(--gray-300));
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.dark .nf-switch { background: rgb(255 255 255 / 0.2); }
.nf-switch[aria-checked="true"] { background: rgb(var(--primary-600)); }
.nf-switch-knob {
    position: absolute; top: 0.125rem; inset-inline-start: 0.125rem;
    width: 1.25rem; height: 1.25rem;
    border-radius: 9999px; background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
    transition: inset-inline-start 0.2s ease;
}
.nf-switch[aria-checked="true"] .nf-switch-knob { inset-inline-start: 1.375rem; }

.nf-dash-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nf-dash-link { font-size: 0.875rem; font-weight: 500; cursor: pointer; color: rgb(var(--primary-600)); }
.nf-dash-link:hover { text-decoration: underline; }
.dark .nf-dash-link { color: rgb(var(--primary-400)); }

/* Several dashboards: the picker in the header and the list in the window. */
.nf-dash-select {
    height: 2.25rem; padding: 0 2rem 0 0.75rem;
    border-radius: 0.5rem; border: 0;
    font-size: 0.875rem; font-weight: 500; cursor: pointer;
    color: rgb(var(--gray-700)); background-color: #fff;
    box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.1);
}
.dark .nf-dash-select { color: rgb(var(--gray-200)); background-color: rgb(30 36 52); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1); }
.nf-dash-manage { margin-bottom: 1.25rem; }
.nf-dash-subhead { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.nf-dash-manage .nf-dash-list { margin-bottom: 0.75rem; }
.nf-dash-tab { padding: 0.5rem 0.75rem; }
.nf-dash-tab.is-active { box-shadow: 0 0 0 2px rgba(var(--primary-500), 0.7); }
.nf-dash-tab-name { display: flex; align-items: center; gap: 0.6rem; flex: 1; text-align: start; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.nf-dash-radio { width: 1rem; height: 1rem; border-radius: 9999px; box-shadow: inset 0 0 0 2px rgb(var(--gray-400)); transition: box-shadow 0.15s ease; }
.nf-dash-tab.is-active .nf-dash-radio { box-shadow: inset 0 0 0 5px rgb(var(--primary-600)); }
.nf-dash-del { display: inline-flex; padding: 0.35rem; border-radius: 0.5rem; color: rgb(var(--gray-400)); cursor: pointer; }
.nf-dash-del:hover { color: rgb(var(--danger-600)); background: rgba(var(--danger-500), 0.1); }
.nf-dash-del svg { width: 1.1rem; height: 1.1rem; }
.nf-dash-new { display: flex; gap: 0.5rem; }
.nf-dash-new input {
    flex: 1; min-width: 0; height: 2.25rem; padding: 0 0.75rem;
    border: 0; border-radius: 0.5rem; font-size: 0.875rem;
    color: inherit; background: transparent;
    box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.15);
}
.dark .nf-dash-new input { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15); }
.nf-dash-new input:focus { outline: none; box-shadow: 0 0 0 2px rgb(var(--primary-500)); }

/* Size pickers in the window. */
.nf-dash-size { display: flex; gap: 0.5rem; flex-shrink: 0; }
.nf-dash-size label { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(var(--gray-500)); }
.nf-dash-size select {
    height: 1.9rem; padding: 0 1.4rem 0 0.5rem; border: 0; border-radius: 0.5rem; font-size: 0.8rem; cursor: pointer;
    color: inherit; background-color: transparent; box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.15);
}
.dark .nf-dash-size select { background-color: rgb(30 36 52); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15); }

/* Stat cards share the height of their widget instead of leaving a gap under the last row. */
@media (min-width: 1024px) {
    .nf-dash-cell > .fi-wi-widget.fi-wi-stats-overview,
    .nf-dash-cell > .fi-wi-widget > .fi-wi-stats-overview-stats-ctn { height: 100%; grid-auto-rows: 1fr; }
}

/* The window's rows wrap on narrow screens: name, sizes, switch. */
.nf-dash-item { flex-wrap: wrap; }
.nf-dash-item-text { flex: 1 1 12rem; }

/* A single stat card fills its cell. */
@media (min-width: 1024px) {
    .nf-dash-cell .fi-wi-stats-overview-stats-ctn > div,
    .nf-dash-cell .fi-wi-stats-overview-stat { height: 100%; }
}

/* The dashboard picker in the header: a themed dropdown like the other top-bar menus (replaces the browser's select). */
.nf-dash-switch { max-width: 14rem; }
.nf-dash-switch > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-dash-switch-arrow { width: 1rem; height: 1rem; flex: none; opacity: 0.7; }

/* A spot that is already taken: the widget cannot go there. */
.nf-dash-placeholder.is-taken {
    border-color: rgb(var(--danger-500));
    background: rgba(var(--danger-500), 0.1);
}

/* Editing the layout: the icons are always visible, every widget shows a dotted frame. */
.nf-dash-grid.is-editing .nf-dash-handle { opacity: 1; transform: scale(1); }
.nf-dash-grid.is-editing .nf-dash-resize { opacity: 1; }
.nf-dash-grid.is-editing .nf-dash-cell { outline: 2px dashed rgba(var(--primary-500), 0.55); outline-offset: 3px; border-radius: 0.75rem; }
.nf-dash-grid.is-editing .nf-dash-cell.is-lifted { outline-color: rgba(var(--primary-500), 0.9); }

/* Header buttons: the small edit button, and Save / Cancel while editing. Editing needs the wide grid, so phones do not get them. */
.nf-edit-actions { display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 1024px) { .nf-edit-actions { display: inline-flex; } }
.nf-edit-btn { justify-content: center; }
.nf-customize-btn.nf-edit-save,
.dark .nf-customize-btn.nf-edit-save { color: #fff; background-color: rgb(var(--primary-600)); box-shadow: none; }
.nf-customize-btn.nf-edit-save:hover,
.dark .nf-customize-btn.nf-edit-save:hover { color: #fff; background-color: rgb(var(--primary-500)); box-shadow: none; }
.nf-customize-btn.nf-edit-save svg { color: #fff; }
.nf-customize-btn.nf-edit-save[disabled] { opacity: 0.6; cursor: wait; }

.nf-customize-btn.nf-edit-cancel,
.dark .nf-customize-btn.nf-edit-cancel { color: #fff; background-color: rgb(var(--danger-600)); box-shadow: none; }
.nf-customize-btn.nf-edit-cancel:hover,
.dark .nf-customize-btn.nf-edit-cancel:hover { color: #fff; background-color: rgb(var(--danger-500)); box-shadow: none; }
.nf-customize-btn.nf-edit-cancel svg { color: #fff; }
.nf-customize-btn.nf-edit-cancel[disabled] { opacity: 0.6; cursor: wait; }

/* Three cards per row from a laptop up; two on a tablet, one on a phone. */
@media (max-width: 1023px) { .nf-dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .nf-dash-cards { grid-template-columns: minmax(0, 1fr); } }

/* The customize window is wide: the widgets sit side by side in cards (3 per row) instead of one under another. */
.nf-dash-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1023px) { .nf-dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .nf-dash-cards { grid-template-columns: minmax(0, 1fr); } }
.nf-dash-cards .nf-dash-item { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0.75rem; margin: 0; }
.nf-dash-cards .nf-dash-item-text { flex: 0 0 auto; }
.nf-dash-cards .nf-dash-item-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }

/* "Manage dashboards" sits under the list of dashboards in the header menu. */
.nf-dash-manage-list { border-top: 1px solid rgba(var(--gray-950), 0.08); }
.dark .nf-dash-manage-list { border-top-color: rgba(255, 255, 255, 0.1); }
.nf-dash-manage { margin-bottom: 0; }

/* Columns / Rows pickers: logical padding so the arrow and the number never collide in right-to-left languages. */
.nf-dash-size { align-items: flex-end; }
.nf-dash-size label { align-items: flex-start; white-space: nowrap; }
.nf-dash-size select {
    min-width: 4rem;
    padding-block: 0;
    padding-inline: 0.65rem 1.9rem;
    text-align: start;
    text-align-last: start;
}

/* Charts fill their cell, so a taller cell gets a taller chart and not an empty band under it. */
@media (min-width: 1024px) {
    .nf-dash-cell > .fi-wi-chart > .fi-section { display: flex; flex-direction: column; }
    .nf-dash-cell > .fi-wi-chart .fi-section-content-ctn,
    .nf-dash-cell > .fi-wi-chart .fi-section-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .nf-dash-cell > .fi-wi-chart .fi-section-content > [data-chart-series] { flex: 0 0 auto; }
    .nf-dash-cell > .fi-wi-chart .fi-section-content > div:not([data-chart-series]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .nf-dash-cell > .fi-wi-chart .fi-section-content > div:not([data-chart-series]) > div { flex: 1 1 auto; min-height: 0; height: auto !important; position: relative; overflow: hidden; }
    .nf-dash-cell > .fi-wi-chart canvas { max-height: none !important; }
}

/* Less empty space under the last row of widgets. */
.fi-dashboard-page { row-gap: 1rem; }
.fi-main:has(.fi-dashboard-page) { padding-bottom: 0.75rem; }

/* Widgets a super admin designed (Dashboard widgets): the stat card and the table. --cw is the colour chosen for the widget. */
.nf-cw-stat { display: flex; align-items: center; gap: 0.9rem; }
.nf-cw-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; color: rgb(var(--cw)); background: rgba(var(--cw), 0.12); }
.nf-cw-icon svg { width: 1.4rem; height: 1.4rem; }
.nf-cw-text { display: flex; flex-direction: column; min-width: 0; }
.nf-cw-label { font-size: 0.8rem; font-weight: 500; color: rgb(var(--gray-500)); }
.nf-cw-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: rgb(var(--gray-950)); }
.dark .nf-cw-value { color: #fff; }
.nf-cw-note { font-size: 0.75rem; color: rgb(var(--gray-500)); }
.nf-cw-table-wrap { overflow-x: auto; }
.nf-cw-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.nf-cw-table th { text-align: start; padding: 0.4rem 0.6rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(var(--gray-500)); border-bottom: 2px solid rgba(var(--cw), 0.35); white-space: nowrap; }
.nf-cw-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid rgba(var(--gray-500), 0.15); }
.nf-cw-table tbody tr:hover { background: rgba(var(--cw), 0.06); }
.nf-cw-table .is-money { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nf-dash-cell > .nf-cw-widget > .fi-section { height: 100%; }