h1:focus {
    outline: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* MudBlazor pauses a snackbar while the pointer is over it; on a phone the pointer stays "over" after a tap and
   the snackbar never leaves. Only the buttons ("Annulla", close) still react, and they close it anyway. */
.mud-snackbar {
    pointer-events: none;
}

    .mud-snackbar button {
        pointer-events: auto;
    }

/* Read by screen readers, not shown. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The logo is as teal as the light app bar: a thin light ring keeps its shape visible. */
.appbar-logo {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 22%;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

/* "Esci" in the account menu is a form button, styled like the other menu items. */
.menu-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

    .menu-button:hover {
        background: var(--mud-palette-action-default-hover);
    }

/* Sign-in and error pages: one card in the middle of the screen. */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--mud-palette-background);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    padding: 36px 28px;
}

.auth-logo {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    background: lightyellow;
    color: #222;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

    #blazor-error-ui .dismiss {
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        cursor: pointer;
    }

/* Items and lists: one row each, the date on the right like the Todoist widget. */
.item-list {
    overflow: hidden;
}

.item-row,
.list-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding: 2px 12px 2px 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.list-row {
    gap: 8px;
    padding-left: 4px;
}

    .item-row:last-child,
    .list-row:last-child {
        border-bottom: 0;
    }

.item-readonly-icon {
    margin: 0 13px;
    color: var(--mud-palette-text-secondary);
}

.item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Sizes for a phone held in the hand: the title as large as the body text, the dates and details just below. */
.item-title {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.item-done {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
}

.item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

    .item-meta .mud-icon-root {
        font-size: 1rem;
        vertical-align: -3px;
    }

.item-shared {
    color: var(--mud-palette-primary);
}

.item-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.item-time {
    font-size: 0.8125rem;
}

/* The date that opens "Rimanda": on a grey chip, so it reads as something to tap, and as tall as the icon buttons. */
.item-date-button {
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 2px 10px;
    border: none;
    border-radius: 20px;
    background: var(--mud-palette-action-default-hover);
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
}

    .item-date-button:hover {
        background: var(--mud-palette-action-disabled-background);
    }

/* "Oggi" and the weekday at the two ends of the choice. */
.postpone-choice {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    min-width: 150px;
}

.postpone-day {
    color: var(--mud-palette-text-secondary);
}

.item-delete {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

    .item-delete:hover {
        color: var(--mud-palette-error);
    }

/* Green today, red when late, violet in the next seven days; later dates keep the grey of .item-date. */
.item-date-today {
    color: var(--mud-palette-success);
    font-weight: 500;
}

.item-date-late {
    color: var(--mud-palette-error);
    font-weight: 500;
}

.item-date-soon {
    color: var(--mud-palette-tertiary);
    font-weight: 500;
}

/* Tasks: a subtask sits one step in, under its task. */
.item-row-sub {
    padding-left: 34px;
}

/* "Riordina" on the Task page: the title and the arrows, nothing else to tap by mistake, and the arrows apart
   enough for a thumb to hit the one it means. */
.task-arrange-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 2px 6px 2px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .task-arrange-row.item-row-sub {
        padding-left: 44px;
    }

.task-arrange-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.item-section {
    padding: 7px 16px 3px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Beside the "Agenda" title, narrower on the phone so the title still fits. */
.agenda-search {
    flex: 0 1 280px;
    min-width: 0;
}

/* MudBlazor's own clear button is enough: Chrome would add a second ✕ to a search field. */
.agenda-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.item-notes {
    white-space: pre-wrap;
}

/* The add button, bottom right on every page; the content ends above it, so the last row stays reachable. */
.add-fab {
    position: fixed !important;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1100;
}

.mud-main-content {
    padding-bottom: 88px;
}

/* The bar of the main pages (BottomNav), only on a phone: the add button, the snackbars and the end of the content
   move up above it. */
.bottom-nav {
    display: none;
}

@media (max-width: 599px) {
    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        display: flex;
        height: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .add-fab {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .mud-snackbar-location-bottom-center {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    .mud-main-content {
        padding-bottom: 152px;
    }
}

.bottom-nav-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    text-decoration: none;
}

    .bottom-nav-link.active {
        color: var(--mud-palette-primary);
        font-weight: 500;
    }

/* The active page gets a pill behind its icon, as in the Android bars. */
.bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 30px;
    border-radius: 15px;
}

    .bottom-nav-link.active .bottom-nav-icon {
        background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    }

/* The add dialog: the suggestion menu opens below the field and must not be cut by the dialog. */
.mud-dialog.add-dialog,
.mud-dialog.add-dialog .mud-dialog-content {
    overflow: visible;
}

    .mud-dialog.add-dialog .mud-dialog-content {
        padding: 12px;
    }

    .mud-dialog.add-dialog .quick-add {
        margin-bottom: 0 !important;
        border: none;
    }

/* What a sentence was understood as, in chips coloured by kind: in the quick add and in the guide. */
.entry-preview .mud-chip.part-date,
.entry-preview .mud-chip.part-time {
    background: rgba(11, 114, 133, 0.28);
}

.entry-preview .mud-chip.part-recurrence {
    background: rgba(47, 158, 68, 0.28);
}

.entry-preview .mud-chip.part-reminder {
    background: rgba(245, 159, 0, 0.3);
}

.entry-preview .mud-chip.part-list,
.entry-preview .mud-chip.part-share {
    background: rgba(232, 89, 12, 0.26);
}

/* Guide: what to write beside what it becomes; on a phone one under the other. */
.guide-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 4px 16px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 599.98px) {
    .guide-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.guide-example {
    overflow-wrap: anywhere;
}

/* The words the app recognizes, in bold and in the full text colour also inside the grey explanations. */
.guide-section strong {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* The index: two columns, short enough for a phone. */
.guide-index {
    columns: 2;
    column-gap: 24px;
    margin: 0;
    padding-left: 22px;
}

    .guide-index li {
        break-inside: avoid;
        padding: 3px 0;
    }

.guide-rules {
    margin: 12px 0 0;
    padding-left: 20px;
}

    .guide-rules li + li {
        margin-top: 4px;
    }

/* A section reached from the chips at the top does not end up under the app bar. */
.guide-section {
    scroll-margin-top: 64px;
}
/* Calendar: a month of whole weeks, Monday first. */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.calendar-title {
    min-width: 170px;
    text-align: center;
}

.calendar-weekday {
    padding: 4px 0;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    min-height: 92px;
    padding: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

    .calendar-day:hover {
        background: var(--mud-palette-action-default-hover);
    }

.calendar-day-outside {
    opacity: 0.45;
}

.calendar-day-today .calendar-day-number {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.calendar-day-selected {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.calendar-day-number {
    align-self: flex-start;
    min-width: 24px;
    padding: 1px 6px;
    border-radius: 12px;
    font-size: 0.875rem;
    text-align: center;
}

.calendar-entries {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.calendar-entry {
    padding: 1px 4px;
    border-left: 3px solid var(--list-color);
    border-radius: 4px;
    background: color-mix(in srgb, var(--list-color) 18%, transparent);
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-more {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.calendar-dots {
    display: none;
    justify-content: center;
    gap: 3px;
}

.calendar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--list-color);
}

/* On a phone the cells only show dots: the agenda below has the details. */
@media (max-width: 599px) {
    /* The add dialog uses the whole width, at the very top: the keyboard takes the lower part of the screen. */
    .mud-dialog.add-dialog {
        margin: 8px;
        width: calc(100% - 16px);
        max-width: 100%;
    }

    /* The item dialog takes the whole phone screen: with the side margins the fields were too narrow. Only the
       part the keyboard leaves visible, though (--visible-height, from dialogs.js), so the last fields can still be
       scrolled into sight while typing; the dialog sits at the top, without the space MudBlazor leaves above a top
       dialog. */
    .mud-dialog-container:has(> .mud-dialog.item-dialog) {
        padding-top: 0;
    }

    .mud-dialog.item-dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
        height: var(--visible-height, 100%);
        max-height: var(--visible-height, 100%);
        border-radius: 0;
    }

        .mud-dialog.item-dialog .mud-dialog-content {
            padding-left: 16px;
            padding-right: 16px;
        }

        /* Editing: the sentence stays at the top, and only the fields under the line scroll. */
        .mud-dialog.item-dialog {
            display: flex;
            flex-direction: column;
        }

        .mud-dialog.item-dialog .item-edit-content {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        .mud-dialog.item-dialog .item-edit-fields {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

        /* MudBlazor's line grows in a flex column, and with a short item it pushed the fields down to the middle. */
        .mud-dialog.item-dialog .item-edit-content > .mud-divider {
            flex: none;
        }

    .calendar-day {
        min-height: 52px;
        align-items: center;
    }

    .calendar-day-number {
        align-self: center;
    }

    .calendar-entries {
        display: none;
    }

    .calendar-dots {
        display: flex;
    }
}

/* In the item dialog the sentence is one field among the others, without the box it has on the pages. */
.item-dialog .quick-add {
    padding: 0 !important;
    margin-bottom: 0 !important;
    border: none;
}

/* The top of the item dialog: the ✕, which brings its own room on the left, the title, then Elimina and Salva. */
.item-dialog-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mud-dialog.item-dialog .mud-dialog-title {
    padding: 8px 16px 8px 4px;
}

/* The fields of the item dialog, under the line: the room above keeps the labels of the first field in sight when
   they scroll by themselves on a phone. */
.item-edit-fields {
    padding-top: 8px;
}

/* The item dialog in rows: an icon on the left, the field or a line to open on the right. */
.edit-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.edit-row-icon {
    flex: none;
    margin-top: 8px;
    color: var(--mud-palette-text-secondary);
}

.edit-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* The buttons under the sentence of the item dialog: one line that scrolls sideways on a narrow phone, as in
   Todoist, rather than two lines that push the fields down. */
.item-extras-row {
    display: flex;
    flex: none;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px;
}

    .item-extras-row::-webkit-scrollbar {
        display: none;
    }

    .item-extras-row .mud-chip {
        flex: none;
        margin: 0;
        max-width: 220px;
    }

/* The choices of a small dialog listed one per line, radios or ticks, as in the dialogs of Android. */
.choice-list,
.choice-list .mud-input-control.mud-input-control-boolean-input .mud-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .choice-list .mud-radio,
    .choice-list .mud-checkbox {
        margin: 0;
        min-height: 44px;
    }

    .choice-list .list-dot {
        margin-right: 10px;
    }

/* Choices in a box with a line between them, as the groups of Android's settings: each one reads as a row of its own. */
.choice-list-boxed {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

    .choice-list-boxed,
    .choice-list-boxed .mud-input-control.mud-input-control-boolean-input .mud-radio-group {
        align-items: stretch;
    }

    .choice-list-boxed .mud-radio {
        width: 100%;
        padding-right: 12px;
    }

    /* Each radio comes wrapped in an input control of its own: the line goes between those. */
    .choice-list-boxed .mud-radio-group > .mud-input-control + .mud-input-control {
        border-top: 1px solid var(--mud-palette-lines-default);
    }

/* The calendar of the date dialog fills the dialog instead of keeping its own width and shadow. MudBlazor gives it
   at least 310px, more than a phone leaves inside the dialog's padding: the seven days need 280px, and less padding. */
.date-dialog-content.mud-dialog-content {
    padding-left: 12px;
    padding-right: 12px;
}

.date-dialog-calendar.mud-picker-static {
    width: 100%;
    min-width: 0;
    box-shadow: none;
}

    .date-dialog-calendar .mud-picker-calendar-container,
    .date-dialog-calendar .mud-picker-content {
        width: 100%;
        min-width: 0;
    }

/* The notes under the fields, read as text: a tap opens them to change them. */
.edit-row-tap {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.item-notes-preview {
    padding-top: 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The comments of an item: who and when on one line, the text under it, the field to write at the end. */
.comments-title {
    margin-top: 6px;
}

.comment {
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.comment-author {
    font-weight: 500;
}

.comment-time {
    flex: 1 1 auto;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.comment-delete {
    color: var(--mud-palette-text-secondary);
}

.comment-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.comment-new {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

/* An option of the settings page as in Android: title and description on the left, the switch on the right, the
   whole row tappable, stretched to the edges of its card so the tap highlight fills it. */
.setting-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    margin: 0 -16px;
    padding: 8px 8px 8px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Only with a mouse: on a phone the hover stays on the row after the tap. */
@media (hover: hover) {
    .setting-row:hover {
        background: var(--mud-palette-action-default-hover);
    }
}

.setting-row:focus-visible {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.setting-text {
    flex: 1 1 auto;
    min-width: 0;
}

.setting-title {
    font-size: 1rem;
}

.setting-description {
    margin-top: 2px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* A row that opens another page, with the arrow of Android's settings. */
.setting-link {
    color: inherit;
    text-decoration: none;
}

/* A row that opens a small dialog, such as the time of the daily summary: a button that looks like the others. */
.setting-button {
    width: calc(100% + 32px);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.setting-chevron {
    flex: none;
    margin-right: 8px;
    color: var(--mud-palette-text-secondary);
}

.setting-switch {
    flex: none;
    pointer-events: none;
}

.setting-switch .mud-switch {
    margin: 0;
}

/* "Ogni [2] [mesi]", "Avvisami [10] [giorni] prima": small fields on one line. */
.inline-number.mud-input-control {
    flex: 0 0 96px;
}

.inline-select {
    flex: 0 0 150px;
}

/* The fields of "Personalizzata…" inside its row of the box, lined up with the radios: under the text they would
   leave too little room for "settimane" on a phone. */
.repeat-custom-box {
    padding: 0 12px 6px 16px;
}

    .repeat-custom-box .mud-checkbox {
        margin-left: -17px;
    }

/* "Ogni [n] [unità]" in the repetition dialog: the unit takes what is left, so the row stays inside a phone's dialog. */
.repeat-custom {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .repeat-custom .inline-number.mud-input-control {
        flex: 0 0 52px;
    }

    /* Less padding in the two fields, so that "settimane" is read whole on a phone. */
    .repeat-custom .mud-input-outlined .mud-input-slot {
        padding-left: 10px;
        padding-right: 6px;
    }

    .repeat-custom .inline-select {
        flex: 1 1 0;
        min-width: 0;
    }

/* Quick-add suggestions: a row of chips under the field, or a menu over what follows. */
.quick-add-field {
    position: relative;
}

/* A sentence with only a date or a time: nothing to do yet. Also while typing, over the focus colour. */
.quick-add-field .missing-title .mud-input-outlined-border {
    border-color: var(--mud-palette-warning) !important;
}

.suggestion-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.suggestion-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 48px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.suggestion-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 14px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .suggestion-menu-item:hover,
    .suggestion-highlighted {
        background: var(--mud-palette-action-default-hover);
    }

    .suggestion-menu-item .mud-icon-root {
        color: var(--mud-palette-primary);
    }

/* The colours of the lists, Google Calendar's: each member picks their own (ListColors). They read on both themes. */
.list-color-red { --list-color: #d50000; }
.list-color-orange { --list-color: #f4511e; }
.list-color-yellow { --list-color: #f6bf26; }
.list-color-darkgreen { --list-color: #0b8043; }
.list-color-green { --list-color: #33b679; }
.list-color-lightblue { --list-color: #039be5; }
.list-color-blue { --list-color: #3f51b5; }
.list-color-purple { --list-color: #8e24aa; }
.list-color-pink { --list-color: #e67c73; }
.list-color-grey { --list-color: #757575; }

/* The items without a list keep the colour of the app. */
.list-color-none { --list-color: var(--mud-palette-primary); }

.list-dot {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--list-color);
}

.list-dot-large {
    width: 16px;
    height: 16px;
    margin-right: 0;
}

.item-list-name {
    display: inline-flex;
    align-items: center;
}

/* The dot that opens the colours: a 40px target, as the icon buttons beside it. */
.list-color-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

    .list-color-button:hover {
        background: var(--mud-palette-action-default-hover);
    }