/*
 * Home (OigWeb:FeatureFlags:HomeV2): design tokens from the approved design.
 * They are declared on the page root and on the widget picker dialog, which Syncfusion renders outside
 * the page, so every Home component reads the same values. Component styles live in the .razor.css
 * files next to each component. Styled here: the dialog, whose Syncfusion markup cannot be reached from
 * a scoped stylesheet, and the icon and scroll classes that several components share.
 */
.home-page {
    height: 100%;
}

.home-page,
.home-widget-picker,
.e-dlg-container:has(> .home-widget-picker) {
    --home-font: "Open Sans", sans-serif;

    /* Typography */
    --home-title-size: 14px;
    --home-title-line: 24px;
    --home-body-size: 14px;
    --home-body-line: 20px;
    --home-caption-size: 12px;
    --home-caption-line: 16px;
    --home-kpi-size: 22px;
    --home-kpi-line: 30px;
    --home-semibold: 600;

    /* Colours */
    --home-primary: #32A9FD;          /* Primary/Default */
    --home-primary-light: #5BBAFD;    /* Primary/Light */
    --home-primary-lighter: #ADDDFE;  /* Primary/Lighter */
    --home-primary-lightest: #EEF8FF; /* Primary/Lightest: selected option */
    --home-card: #FFFFFF;             /* Grey 50 */
    --home-page: #F3F7FA;             /* Grey 100: page and neutral inset panel */
    --home-disabled: #EDF2F7;         /* Grey 200: disabled button fill */
    --home-divider: #E2E8F0;          /* Grey 300: divider, scrollbar track, available licences */
    --home-other-status: #A0AEC0;
    --home-text-muted: #4A5568;       /* Grey 700: empty-position label and pencil */
    --home-text: #2D3748;             /* Grey 800: headings and current-activity text */
    --home-backdrop: rgba(45, 55, 72, 0.3);
    --home-success: #1AAA55;
    --home-success-bg: #E8F6EE;
    --home-scheduled: #9747FF;
    --home-scheduled-bg: #F4ECFF;
    --home-danger: #FE4149;
    --home-series-surveys: #32A9FD;
    --home-series-reports: #F5C506;
    --home-series-plans: #863CED;
    --home-empty-gradient: #D5EEFF;   /* Unfilled position, gradient stop 0 */

    /* Icon colours as filters, next to the --*-filter tokens of site.css, for the colours it lacks. */
    --home-text-filter: invert(16%) sepia(6%) saturate(3348%) hue-rotate(180deg) brightness(91%) contrast(82%);
    --home-muted-filter: invert(31%) sepia(10%) saturate(1032%) hue-rotate(179deg) brightness(97%) contrast(88%);
    --home-success-filter: invert(41%) sepia(100%) saturate(434%) hue-rotate(92deg) brightness(105%) contrast(80%);
    --home-scheduled-filter: invert(34%) sepia(82%) saturate(1154%) hue-rotate(239deg) brightness(95%) contrast(119%);

    font-family: var(--home-font);
    color: var(--home-text);
}

/*
 * One design pixel, set on each card's frame (HomeWidgetCard.razor.css). Registered as a length, so the
 * frame computes it once from the card's size and the header and widget inside inherit the result in px.
 */
@property --home-design-px {
    syntax: "<length>";
    inherits: true;
    initial-value: 1px;
}

/* Organisatie in cijfers fills the design body's full 374⅔ width, so its card has no scrollbar gutter. */
.home-page .home-card__body:has(.organization-figures) {
    padding-right: 0;
}

/*
 * The grid picks its column count from this width (HomeGrid.razor.css). The top padding separates the
 * first row from the organization header; the right padding keeps the cards clear of the page
 * scrollbar, which sits against them when the rows do not fit the window. At 1440 x 770 the three
 * rows plus the top padding still fill the main area exactly, without scrolling.
 */
.home-page {
    container: home-page / inline-size;
    padding: 16px 8px 0 0;
}

/*
 * The app's bootstrap.min.css styles every span as a heading (1.75rem, weight 500, line-height 1.2,
 * margin-bottom .5rem). Inside Home a span is plain text: it takes its size from its parent unless its
 * own component style sets one. :where() keeps this at the weight of bootstrap's bare span selector, so
 * it wins by load order and every class rule still wins over it.
 */
:where(.home-page, .home-widget-picker) span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
}

/*
 * Icons are the existing wwwroot/icons files, drawn as <img> and recoloured with a filter, as elsewhere in
 * the app. brightness(0) first turns any fill black, so each filter lands on its colour exactly. Without a
 * modifier an icon keeps its own fill.
 */
.home-icon {
    flex: none;
}

.home-icon--text {
    filter: brightness(0) saturate(100%) var(--home-text-filter);
}

.home-icon--muted {
    filter: brightness(0) saturate(100%) var(--home-muted-filter);
}

.home-icon--primary {
    filter: brightness(0) saturate(100%) var(--primary-filter);
}

.home-icon--success {
    filter: brightness(0) saturate(100%) var(--home-success-filter);
}

.home-icon--scheduled {
    filter: brightness(0) saturate(100%) var(--home-scheduled-filter);
}

/*
 * A scrolling list inside a card body: the approved 4 px scrollbar, 10 px from the list, shown only when
 * the list overflows. Focusable, so a keyboard user can scroll it. Each widget sets the height.
 */
.home-scroll {
    overflow-y: auto;
    padding-right: calc(10 * var(--home-design-px));
    scrollbar-width: thin;
    scrollbar-color: var(--home-scroll-thumb) var(--home-scroll-track);
}

.home-scroll:focus-visible {
    outline: 2px solid var(--home-primary);
    outline-offset: 2px;
}

.home-scroll::-webkit-scrollbar {
    width: 4px;
}

.home-scroll::-webkit-scrollbar-track {
    background: var(--home-scroll-track);
    border-radius: 2px;
}

.home-scroll::-webkit-scrollbar-thumb {
    background: var(--home-scroll-thumb);
    border-radius: 2px;
}

/* The widget picker: 760 x 688, radius 16, padding 24, gap 12. */
.e-dlg-container:has(> .home-widget-picker) > .e-dlg-overlay {
    background-color: var(--home-backdrop);
    opacity: 1;
}

/* At high zoom the window can be smaller than 760 × 688; the dialog then shrinks and its list scrolls. */
.home-widget-picker.e-dialog {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 16px);
    border: 0;
    border-radius: 16px;
    background: var(--home-card);
}

/* site.css zeroes every dialog's content padding with !important, so the 24px sits on the inner wrapper. */
.home-widget-picker.e-dialog .e-dlg-content {
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: var(--home-card);
}

.home-widget-picker__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    height: 100%;
    padding: 24px;
}

.home-widget-picker__heading {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: 32px;
}

.home-widget-picker__title {
    margin: 0;
    font-size: var(--home-kpi-size);
    font-weight: var(--home-semibold);
    line-height: var(--home-kpi-line);
    color: var(--home-text);
}

.home-widget-picker__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--home-text);
    cursor: pointer;
}

.home-widget-picker__close:hover {
    background: var(--home-page);
}

.home-widget-picker__instruction {
    flex: none;
    margin: 0;
    font-size: var(--home-body-size);
    line-height: var(--home-body-line);
    color: var(--home-text);
}

/* The list scrolls, so more Operators than the nine example rows stay reachable. */
.home-widget-picker__options {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}

.home-widget-picker__option {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--home-divider);
    border-radius: 12px;
    background: var(--home-card);
    cursor: pointer;
}

/* A selectable row is the app's RadiobuttonComponent: its label carries the icon and text, and stretches so the whole
   row selects. */
.home-widget-picker__option > label {
    display: flex;
    flex: 1;
    align-self: stretch;
    align-items: center;
    gap: 12px;
    min-width: 0;
    cursor: inherit;
}

.home-widget-picker__option--selected {
    border-color: var(--home-primary);
    background: var(--home-primary-lightest);
}

.home-widget-picker__option--locked {
    opacity: 0.65;
    cursor: default;
}

.home-widget-picker__option:has(input:focus-visible) {
    outline: 2px solid var(--home-primary);
    outline-offset: 1px;
}

/* A 20 x 20 selection control; the locked rows show their lock in the same place. */
.home-widget-picker__control {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--home-primary);
    color: var(--home-text-muted);
    cursor: inherit;
}

.home-widget-picker__option-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--home-page);
    color: var(--home-text);
}

/* The small empty-card preview of the empty choice reuses the empty-position gradient. */
.home-widget-picker__empty-preview {
    flex: none;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 1px solid var(--home-divider);
    border-radius: 6px;
    background: linear-gradient(to top, var(--home-empty-gradient) 0%, var(--home-card) 50%);
}

.home-widget-picker__option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-widget-picker__option-name {
    font-size: var(--home-body-size);
    font-weight: var(--home-semibold);
    line-height: var(--home-body-line);
    color: var(--home-text);
}

.home-widget-picker__option-description {
    font-size: var(--home-caption-size);
    line-height: var(--home-caption-line);
    color: var(--home-text);
}

.home-widget-picker__loading {
    height: 52px;
}

.home-widget-picker__actions {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    height: 36px;
}

.home-widget-picker__error {
    margin-right: auto;
    font-size: var(--home-caption-size);
    line-height: var(--home-caption-line);
    color: var(--home-danger);
}