/* ==========================================================================
   md-dialog.css -- one Material 3 dialog for the whole platform (25.09.2026)
   ==========================================================================
   Greg: "passer en revue toutes les fenetres, toutes les modales et toutes
   les popups pour que le design et la mise en page soient identiques
   partout". His choices:
     - fields: white, fine outline, 40 px;
     - buttons: Material 3 -- the secondary action as a text button, the main
       one as a filled pill (red when it destroys);
     - closing: X, Escape and a click beside (js/modal-dismiss.js);
     - confirmations: pure Material 3 -- a headline, the text left aligned,
       no big centred icon (js/toast.js).

   Until now the look came from several places that did not agree:
   modal.css (legacy gold), md-pages.css (M3 for .ro-modal, not loaded on
   the plan), md-shell.css (M3 for the plan's own popups, loaded only there),
   admin.css (the create panel, gold border), staff-booking.css. This file is
   loaded LAST on every page and says it once, for every family:

     .ro-modal-overlay > .ro-modal         the windows of every page
     dialog.confirm-dialog                 confirmPopup and the plan's two
     .create-overlay > .create-panel       new room, evacuate the terrace
     .tpl-popup-overlay > .tpl-popup       table templates
     .edit-popup (not docked)              a table's quick edit
     dialog.sb-dialog, .sb-slots-dialog    walk-in, telephone, times

   Selectors carry :not(.md-x) to outrank the older sheets without having
   to know their exact specificity; !important only where an older sheet
   used it on the same property.
   ========================================================================== */

body.md-ui {
    --dlg-scrim: color-mix(in srgb, var(--md-scrim, #000) 32%, transparent);
    --dlg-bg: var(--md-surface-container-high);
    --dlg-radius: var(--md-shape-xl, 28px);
    --dlg-pad: 24px;
    --dlg-field-bg: var(--md-surface-container-lowest, #fff);
    --dlg-field-h: 40px;
}

/* ---------------------------------------------------------------- scrim */
body.md-ui .ro-modal-overlay:not(#modalLogo):not(.md-x),
body.md-ui .create-overlay:not(.md-x),
body.md-ui .tpl-popup-overlay:not(.md-x),
body.md-ui .edit-popup-overlay:not(.md-x) {
    background: var(--dlg-scrim) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.md-ui dialog.confirm-dialog::backdrop,
body.md-ui dialog.sb-dialog::backdrop,
body.md-ui dialog.sb-slots-dialog::backdrop {
    background: var(--dlg-scrim);
    backdrop-filter: none;
    opacity: 1;
}

/* ---------------------------------------------------------------- stacking */
/* Above the navigation rail (500), the top bar (450), the account menu
   (600) and the tonight drawer (950), so the veil covers the whole screen
   and a click anywhere beside the window is a click beside it. Not
   !important: the four windows opened above another one carry an inline
   z-index of 1100 and keep it. The logo window opens above the
   Informations window and keeps its transparent veil (modal.css): one
   veil, not two. */
body.md-ui .ro-modal-overlay:not(.md-x) {
    z-index: 1000;
}
body.md-ui #modalLogo:not(.md-x) {
    z-index: 1010;
}

/* ---------------------------------------------------------------- container */
body.md-ui .ro-modal:not(.md-x),
body.md-ui dialog.confirm-dialog:not(.md-x),
body.md-ui .create-panel:not(.md-x),
body.md-ui .tpl-popup:not(.md-x),
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x),
body.md-ui dialog.sb-dialog:not(.md-x),
body.md-ui dialog.sb-slots-dialog:not(.md-x) {
    background: var(--dlg-bg) !important;
    color: var(--md-on-surface) !important;
    border: 0 !important;
    border-radius: var(--dlg-radius) !important;
    box-shadow: var(--md-elevation-3) !important;
    backdrop-filter: none !important;
}

/* The windows take the height of what they hold, up to 85 % of the screen
   (their body scrolls beyond). They were a fixed 85vh, so a two-field window
   was mostly empty panel; and a minimum of 900 px wide overrode the narrower
   width several of them ask for. Two windows keep their full height: the
   widget editor and the services editor lay out inner scrolling panes. */
body.md-ui .ro-modal:not(.md-x) {
    min-width: 0 !important;
    height: auto !important;
    max-height: min(85vh, calc(100vh - 48px)) !important;
}
body.md-ui .ro-modal:not(.md-x) > .ro-modal-body {
    flex: 1 1 auto;
    min-height: 0;
}
body.md-ui #modalWidget .ro-modal:not(.md-x),
body.md-ui #modalServices .ro-modal:not(.md-x) {
    height: 85vh !important;
}

body.md-ui dialog.confirm-dialog:not(.md-x) {
    padding: var(--dlg-pad) !important;
    min-width: 280px;
    max-width: min(560px, calc(100vw - 48px));
}
body.md-ui .create-panel:not(.md-x),
body.md-ui .tpl-popup:not(.md-x) {
    padding: var(--dlg-pad) !important;
}
body.md-ui dialog.sb-dialog:not(.md-x),
body.md-ui dialog.sb-slots-dialog:not(.md-x) {
    padding: 0 !important;
}
body.md-ui dialog.sb-dialog:not(.md-x) .sb-form {
    padding: var(--dlg-pad);
    gap: 16px;
}
body.md-ui dialog.sb-slots-dialog:not(.md-x) {
    padding: var(--dlg-pad) !important;
}

/* ---------------------------------------------------------------- headline */
body.md-ui .ro-modal:not(.md-x) .ro-modal-title,
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-title,
body.md-ui .create-panel:not(.md-x) .create-panel-title,
body.md-ui .tpl-popup:not(.md-x) .tpl-popup-title,
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) h4,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-title,
body.md-ui dialog.sb-slots-dialog:not(.md-x) .sb-title {
    margin: 0;
    font-family: var(--md-font-sans) !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--md-on-surface) !important;
}

/* ---------------------------------------------------------------- close (X) */
body.md-ui .ro-modal:not(.md-x) .ro-modal-close,
body.md-ui .tpl-popup:not(.md-x) .tpl-popup-close,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-x,
body.md-ui dialog.sb-slots-dialog:not(.md-x) .sb-x {
    flex: 0 0 auto;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--md-on-surface-variant) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
body.md-ui .ro-modal:not(.md-x) .ro-modal-close:hover,
body.md-ui .tpl-popup:not(.md-x) .tpl-popup-close:hover,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-x:hover,
body.md-ui dialog.sb-slots-dialog:not(.md-x) .sb-x:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}

/* ---------------------------------------------------------------- fields */
body.md-ui .ro-modal:not(.md-x) input[type="text"],
body.md-ui .ro-modal:not(.md-x) input[type="email"],
body.md-ui .ro-modal:not(.md-x) input[type="number"],
body.md-ui .ro-modal:not(.md-x) input[type="date"],
body.md-ui .ro-modal:not(.md-x) input[type="password"],
body.md-ui .ro-modal:not(.md-x) input[type="tel"],
body.md-ui .ro-modal:not(.md-x) input[type="url"],
body.md-ui .ro-modal:not(.md-x) select,
body.md-ui dialog.confirm-dialog:not(.md-x) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.md-ui .create-panel:not(.md-x) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.md-ui .create-panel:not(.md-x) select,
body.md-ui .tpl-popup:not(.md-x) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.md-ui .tpl-popup:not(.md-x) select,
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) select,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-field input:not([type="hidden"]),
body.md-ui dialog.sb-dialog:not(.md-x) .sb-select,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-time-btn {
    box-sizing: border-box;
    height: var(--dlg-field-h) !important;
    min-height: var(--dlg-field-h) !important;
    padding: 0 12px !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: var(--md-shape-xs, 4px) !important;
    background: var(--dlg-field-bg) !important;
    color: var(--md-on-surface) !important;
    font-family: var(--md-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}
body.md-ui .ro-modal:not(.md-x) textarea,
body.md-ui .create-panel:not(.md-x) textarea,
body.md-ui .tpl-popup:not(.md-x) textarea,
body.md-ui dialog.sb-dialog:not(.md-x) textarea {
    box-sizing: border-box;
    min-height: 80px;
    padding: 10px 12px !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: var(--md-shape-xs, 4px) !important;
    background: var(--dlg-field-bg) !important;
    color: var(--md-on-surface) !important;
    font-family: var(--md-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}
/* Focus: the outline turns to the primary colour and thickens without the
   text moving (md-pages grew the border and shrank the padding). */
body.md-ui .ro-modal:not(.md-x) input[type="text"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="email"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="number"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="date"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="password"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="tel"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="url"]:focus,
body.md-ui .ro-modal:not(.md-x) select:focus,
body.md-ui .ro-modal:not(.md-x) textarea:focus,
body.md-ui dialog.confirm-dialog:not(.md-x) input:not([type="checkbox"]):not([type="radio"]):focus,
body.md-ui .create-panel:not(.md-x) input:not([type="checkbox"]):not([type="radio"]):focus,
body.md-ui .create-panel:not(.md-x) select:focus,
body.md-ui .create-panel:not(.md-x) textarea:focus,
body.md-ui .tpl-popup:not(.md-x) input:not([type="checkbox"]):not([type="radio"]):focus,
body.md-ui .tpl-popup:not(.md-x) select:focus,
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) input:not([type="checkbox"]):not([type="radio"]):focus,
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) select:focus,
body.md-ui dialog.sb-dialog:not(.md-x) input:not([type="checkbox"]):not([type="radio"]):focus,
body.md-ui dialog.sb-dialog:not(.md-x) select:focus,
body.md-ui dialog.sb-dialog:not(.md-x) textarea:focus,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-time-btn:focus-visible {
    outline: none !important;
    border-color: var(--md-primary) !important;
    box-shadow: inset 0 0 0 1px var(--md-primary) !important;
}
body.md-ui .ro-modal:not(.md-x) input[type="text"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="email"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="number"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="date"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="password"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="tel"]:focus,
body.md-ui .ro-modal:not(.md-x) input[type="url"]:focus,
body.md-ui .ro-modal:not(.md-x) select:focus {
    padding: 0 12px !important;
}
body.md-ui .ro-modal:not(.md-x) textarea:focus {
    padding: 10px 12px !important;
}
body.md-ui .ro-modal:not(.md-x) input::placeholder,
body.md-ui .ro-modal:not(.md-x) textarea::placeholder,
body.md-ui dialog.sb-dialog:not(.md-x) input::placeholder {
    color: var(--md-on-surface-variant) !important;
    opacity: .7;
}
body.md-ui .ro-modal:not(.md-x) input:disabled,
body.md-ui .ro-modal:not(.md-x) select:disabled,
body.md-ui .ro-modal:not(.md-x) textarea:disabled {
    opacity: .6;
}

/* ---------------------------------------------------------------- actions */
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot,
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-dialog-foot,
body.md-ui .create-panel:not(.md-x) .create-panel-actions,
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) .edit-popup-btns,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 0 !important;
    background: transparent !important;
}
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot {
    padding: 16px var(--dlg-pad) var(--dlg-pad) !important;
}
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-dialog-foot {
    justify-content: flex-end;
    padding: 0 !important;
    margin-top: 24px;
}
body.md-ui .create-panel:not(.md-x) .create-panel-actions,
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) .edit-popup-btns,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-foot {
    justify-content: flex-end;
    margin-top: 24px;
}
body.md-ui dialog.sb-dialog:not(.md-x) .sb-foot { margin-top: 8px; }

/* Every button of a dialog's action row: a 40 px pill. */
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .btn,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-logo-delete,
body.md-ui dialog.confirm-dialog:not(.md-x) .ro-modal-btn,
body.md-ui .create-panel:not(.md-x) .create-panel-actions .btn,
body.md-ui .tpl-popup:not(.md-x) .tpl-btn,
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) .edit-popup-btns button,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-cancel,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-submit {
    height: 40px !important;
    min-width: 64px;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--md-primary) !important;
    font-family: var(--md-font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: .1px !important;
    box-shadow: none !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}
/* The main action: filled. */
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn.primary,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn.accent,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .btn.primary,
body.md-ui dialog.confirm-dialog:not(.md-x) .ro-modal-btn.primary,
body.md-ui dialog.confirm-dialog:not(.md-x) .ro-modal-btn.warn,
body.md-ui .create-panel:not(.md-x) .create-panel-actions .btn.primary,
body.md-ui .tpl-popup:not(.md-x) .tpl-btn.tpl-btn-primary,
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) .edit-popup-btns .ep-save,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-submit {
    padding: 0 24px !important;
    background: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
}
/* A destructive action: red text in a window's row, a red pill as the
   answer of a confirmation. */
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn.danger,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .btn.danger,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-logo-delete,
body.md-ui .tpl-popup:not(.md-x) .tpl-btn.tpl-btn-danger {
    color: var(--md-error) !important;
}
body.md-ui dialog.confirm-dialog:not(.md-x) .ro-modal-btn.danger {
    padding: 0 24px !important;
    background: var(--md-error) !important;
    color: var(--md-on-error, #fff) !important;
}
/* States. */
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn:not(.primary):not(.accent):not(:disabled):hover,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .btn:not(.primary):not(:disabled):hover,
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-cancel:hover,
body.md-ui .create-panel:not(.md-x) .create-panel-actions .btn:not(.primary):hover,
body.md-ui .tpl-popup:not(.md-x) .tpl-btn:not(.tpl-btn-primary):hover,
body.md-ui .edit-popup:not(.edit-popup-docked):not(.md-x) .edit-popup-btns button:not(.ep-save):hover,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-cancel:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
}
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn.primary:not(:disabled):hover,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .btn.primary:not(:disabled):hover,
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-ok:hover,
body.md-ui .create-panel:not(.md-x) .create-panel-actions .btn.primary:hover,
body.md-ui .tpl-popup:not(.md-x) .tpl-btn.tpl-btn-primary:hover,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-submit:not(:disabled):hover {
    box-shadow: var(--md-elevation-1) !important;
}
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn:disabled,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .btn:disabled,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-submit:disabled {
    opacity: .38;
    cursor: default;
}
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn:focus-visible,
body.md-ui dialog.confirm-dialog:not(.md-x) .ro-modal-btn:focus-visible,
body.md-ui .create-panel:not(.md-x) .create-panel-actions .btn:focus-visible,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-cancel:focus-visible,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-submit:focus-visible {
    outline: 2px solid var(--md-primary) !important;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- confirmation */
/* js/toast.js: headline, supporting text left aligned, actions right. */
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-dialog-body {
    padding: 0 !important;
    text-align: left !important;
}
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-dialog-icon {
    display: none !important;
}
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-title {
    display: block;
    margin: 0 0 16px;
}
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-dialog-text {
    margin: 0;
    font: 400 14px/20px var(--md-font-sans) !important;
    letter-spacing: .25px;
    color: var(--md-on-surface-variant) !important;
    white-space: pre-line;
    text-align: left !important;
}
/* A confirmation that is its own headline has no supporting text. */
body.md-ui dialog.confirm-dialog:not(.md-x) .confirm-dialog-text:empty { display: none; }

/* ---------------------------------------------------------------- walk-in, times */
body.md-ui dialog.sb-dialog:not(.md-x) .sb-head,
body.md-ui dialog.sb-slots-dialog:not(.md-x) .sb-head {
    align-items: flex-start;
}
body.md-ui dialog.sb-dialog:not(.md-x) .sb-field input[name="guests"] {
    text-align: center;
}

/* ---------------------------------------------------------------- second pass */
/* One X everywhere. The close buttons were written with three different
   glyphs (x, the multiplication sign, the heavy x) or a drawn icon; the
   glyph is hidden and every one of them shows the same 24 px Material
   "close" icon, in the colour of the button. */
body.md-ui .ro-modal:not(.md-x) .ro-modal-close,
body.md-ui .tpl-popup:not(.md-x) .tpl-popup-close,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-x,
body.md-ui dialog.sb-slots-dialog:not(.md-x) .sb-x {
    font-size: 0 !important;
}
body.md-ui .ro-modal:not(.md-x) .ro-modal-close > *,
body.md-ui .tpl-popup:not(.md-x) .tpl-popup-close > *,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-x > *,
body.md-ui dialog.sb-slots-dialog:not(.md-x) .sb-x > * {
    display: none !important;
}
body.md-ui .ro-modal:not(.md-x) .ro-modal-close::after,
body.md-ui .tpl-popup:not(.md-x) .tpl-popup-close::after,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-x::after,
body.md-ui dialog.sb-slots-dialog:not(.md-x) .sb-x::after {
    content: none !important;
}
body.md-ui .ro-modal:not(.md-x) .ro-modal-close::before,
body.md-ui .tpl-popup:not(.md-x) .tpl-popup-close::before,
body.md-ui dialog.sb-dialog:not(.md-x) .sb-x::before,
body.md-ui dialog.sb-slots-dialog:not(.md-x) .sb-x::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    transform: none !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

/* The main action is the last button of its row, as in every Material
   dialog (a few windows had it before "Fermer"). */
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn.primary,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .ro-modal-btn.accent,
body.md-ui .ro-modal:not(.md-x) .ro-modal-foot .btn.primary {
    order: 10;
}

/* A field written without a type attribute is a text field (the
   Informations window). */
body.md-ui .ro-modal:not(.md-x) input:not([type]) {
    box-sizing: border-box;
    height: var(--dlg-field-h) !important;
    min-height: var(--dlg-field-h) !important;
    padding: 0 12px !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: var(--md-shape-xs, 4px) !important;
    background: var(--dlg-field-bg) !important;
    color: var(--md-on-surface) !important;
    font-family: var(--md-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}
body.md-ui .ro-modal:not(.md-x) input:not([type]):focus {
    outline: none !important;
    padding: 0 12px !important;
    border-color: var(--md-primary) !important;
    box-shadow: inset 0 0 0 1px var(--md-primary) !important;
}
/* The labels above the fields: the same 12 px label in every window (the
   password window wrote them in 16 px body text). */
body.md-ui .ro-modal:not(.md-x) .form-group > label:not(:has(input)) {
    display: block;
    margin: 0 0 4px !important;
    font-family: var(--md-font-sans) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    letter-spacing: .04em;
    color: var(--md-on-surface-variant) !important;
}

/* No coloured band under the headline: the head is the dialog's surface
   (the guest file painted it lighter). */
body.md-ui .ro-modal:not(.md-x) > .ro-modal-head {
    background: transparent !important;
    border-bottom: 0 !important;
}

/* ---------------------------------------------------------------- administration windows */
/* Users, Reports and System logs open a window like every other card of
   the administration page (26.09.2026). */
body.md-ui .ro-modal.soon-window:not(.md-x) {
    width: min(560px, calc(100vw - 48px)) !important;
}
body.md-ui .soon-window .soon-desc,
body.md-ui .users-window .users-window-sub {
    margin: 0 0 16px;
    color: var(--md-on-surface-variant);
    font: 400 14px/20px var(--md-font-sans);
}
body.md-ui .soon-window .soon-coming {
    margin: 0 0 8px;
    color: var(--md-on-surface);
    font: 500 14px/20px var(--md-font-sans);
}
body.md-ui .soon-window .soon-list {
    margin: 0;
    padding-left: 20px;
    color: var(--md-on-surface-variant);
    font: 400 14px/24px var(--md-font-sans);
}
body.md-ui .ro-modal.users-window:not(.md-x) {
    width: min(1200px, calc(100vw - 48px)) !important;
}
body.md-ui .users-window .ro-modal-title .users-count {
    margin-left: 12px;
    background: var(--md-surface-container-highest);
}
body.md-ui .users-window .users-layout > section { min-width: 0; }
/* The creation form as an outlined card, the list on the dialog itself. */
body.md-ui .users-window .users-create {
    padding: 16px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md, 12px);
}
body.md-ui .users-window .users-listcard .filters-bar #usersSearch {
    flex: 1 1 220px;
    min-width: 200px;
}
body.md-ui .users-window .users-listcard .user-row:hover {
    background: var(--md-surface-container-highest);
}

/* mdAutofill26 -- autofill in the Material 3 windows (26.09.2026).
   The field rules above set box-shadow: none !important with a longer
   selector than components.css, whose inset shadow hides Chrome's autofill
   tint: an autofilled field went pale blue with near-white text. Same
   selectors in the autofill state, the window's field colour. Two blocks per
   spelling: an unknown pseudo-class would void a whole shared list. */
body.md-ui .ro-modal:not(.md-x) input:-webkit-autofill,
body.md-ui .ro-modal:not(.md-x) textarea:-webkit-autofill,
body.md-ui .create-panel:not(.md-x) input:-webkit-autofill,
body.md-ui dialog.sb-dialog:not(.md-x) input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px var(--dlg-field-bg, var(--md-surface-container-high)) !important;
    box-shadow: inset 0 0 0 1000px var(--dlg-field-bg, var(--md-surface-container-high)) !important;
    -webkit-text-fill-color: var(--md-on-surface) !important;
    caret-color: var(--md-on-surface);
    transition: background-color 5000s ease-in-out 0s;
}
body.md-ui .ro-modal:not(.md-x) input:-webkit-autofill:focus,
body.md-ui .ro-modal:not(.md-x) textarea:-webkit-autofill:focus,
body.md-ui .create-panel:not(.md-x) input:-webkit-autofill:focus,
body.md-ui dialog.sb-dialog:not(.md-x) input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1px var(--md-primary), inset 0 0 0 1000px var(--dlg-field-bg, var(--md-surface-container-high)) !important;
    box-shadow: inset 0 0 0 1px var(--md-primary), inset 0 0 0 1000px var(--dlg-field-bg, var(--md-surface-container-high)) !important;
    -webkit-text-fill-color: var(--md-on-surface) !important;
    caret-color: var(--md-on-surface);
    transition: background-color 5000s ease-in-out 0s;
}
body.md-ui .ro-modal:not(.md-x) input:autofill,
body.md-ui .ro-modal:not(.md-x) textarea:autofill,
body.md-ui .create-panel:not(.md-x) input:autofill,
body.md-ui dialog.sb-dialog:not(.md-x) input:autofill {
    -webkit-box-shadow: inset 0 0 0 1000px var(--dlg-field-bg, var(--md-surface-container-high)) !important;
    box-shadow: inset 0 0 0 1000px var(--dlg-field-bg, var(--md-surface-container-high)) !important;
    -webkit-text-fill-color: var(--md-on-surface) !important;
    caret-color: var(--md-on-surface);
    transition: background-color 5000s ease-in-out 0s;
}
body.md-ui .ro-modal:not(.md-x) input:autofill:focus,
body.md-ui .ro-modal:not(.md-x) textarea:autofill:focus,
body.md-ui .create-panel:not(.md-x) input:autofill:focus,
body.md-ui dialog.sb-dialog:not(.md-x) input:autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1px var(--md-primary), inset 0 0 0 1000px var(--dlg-field-bg, var(--md-surface-container-high)) !important;
    box-shadow: inset 0 0 0 1px var(--md-primary), inset 0 0 0 1000px var(--dlg-field-bg, var(--md-surface-container-high)) !important;
    -webkit-text-fill-color: var(--md-on-surface) !important;
    caret-color: var(--md-on-surface);
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
   Lot 2 -- the old popups (28.09.2026)
   ==========================================================================
   Four families that were still drawn by their own sheets:
     .wk-edit-popup            the four popups of the week calendar (opening
                               hours, service, kitchen, copy a day) and the
                               toolbar and legend rows of the Services window
     .cp-*                     the closure editor of the restaurant page (its
                               frame is a .ro-modal, its inside a little
                               calendar and two fields)
     .sub-pop                  the column filter of the Restaurants window
                               (administration)
     .confirm-dialog--prompt   the name of a room (js/toast.js promptPopup,
                               it replaces the browser's prompt())
   ========================================================================== */

/* ---------------------------------------------------------------- week calendar popups */
/* The veil and the popup above the Services window: its overlay is at 1000,
   the popup's old 999/1000 left the window itself unveiled. */
body.md-ui .wk-edit-backdrop:not(.md-x) {
    z-index: 1100 !important;
    background: var(--dlg-scrim) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) {
    z-index: 1101 !important;
    box-sizing: border-box;
    width: min(400px, calc(100vw - 48px)) !important;
    max-height: min(85vh, calc(100vh - 48px)) !important;
    overflow-y: auto;
    padding: var(--dlg-pad) !important;
    gap: 16px !important;
    background: var(--dlg-bg) !important;
    color: var(--md-on-surface) !important;
    border: 0 !important;
    border-radius: var(--dlg-radius) !important;
    box-shadow: var(--md-elevation-3) !important;
    font-family: var(--md-font-sans);
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-title {
    margin: 0 !important;
    font-family: var(--md-font-sans) !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--md-on-surface) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-close {
    flex: none;
    width: 40px;
    height: 40px;
    margin: -4px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-close::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-close:hover {
    background: color-mix(in srgb, var(--md-on-surface-variant) 8%, transparent);
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-row {
    gap: 12px !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-field {
    gap: 4px !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-label {
    margin: 0 !important;
    font-family: var(--md-font-sans) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    letter-spacing: .04em;
    color: var(--md-on-surface-variant) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-input,
body.md-ui .wk-edit-popup:not(.md-x) select,
body.md-ui .wk-edit-popup:not(.md-x) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    box-sizing: border-box;
    width: 100%;
    height: var(--dlg-field-h) !important;
    min-height: var(--dlg-field-h) !important;
    padding: 0 12px !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: var(--md-shape-xs, 4px) !important;
    background: var(--dlg-field-bg) !important;
    color: var(--md-on-surface) !important;
    font-family: var(--md-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-input:focus,
body.md-ui .wk-edit-popup:not(.md-x) select:focus,
body.md-ui .wk-edit-popup:not(.md-x) input:not([type="checkbox"]):not([type="radio"]):focus {
    outline: none !important;
    border-color: var(--md-primary) !important;
    box-shadow: inset 0 0 0 1px var(--md-primary) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) label:has(> input[type="checkbox"]) {
    font-family: var(--md-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--md-on-surface) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--md-primary);
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-note {
    margin: 0 !important;
    font: 400 12px/16px var(--md-font-sans) !important;
    color: var(--md-on-surface-variant) !important;
    opacity: 1 !important;
}
/* Actions: text buttons and the filled pill last, on the right. Supprimer,
   when there is one, stands apart on the left, in the error colour. */
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px !important;
    margin-top: 8px !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-actions button {
    box-sizing: border-box;
    flex: none !important;
    height: 40px !important;
    min-width: 64px;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--md-primary) !important;
    font-family: var(--md-font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: .1px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer;
    white-space: nowrap;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-actions button:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-actions button.wk-btn-save {
    order: 10;
    padding: 0 24px !important;
    background: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-actions button.wk-btn-save:hover {
    background: var(--md-primary) !important;
    box-shadow: var(--md-elevation-1) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-actions button.wk-btn-delete {
    order: -1;
    margin-right: auto;
    color: var(--md-error) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-actions button.wk-btn-delete:hover {
    background: color-mix(in srgb, var(--md-error) 8%, transparent) !important;
}
body.md-ui .wk-edit-popup:not(.md-x) .wk-edit-actions button:disabled {
    opacity: .38 !important;
    cursor: default;
}

/* ---------------------------------------------------------------- Services window rows */
/* The toolbar: four Material assist chips, 32 px, a fine outline. The three
   "+" keep the colour of their column (the legend below says which), the
   label is ordinary text. */
body.md-ui .wk-calendar .wk-toolbar:not(.md-x) {
    gap: 8px !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--md-outline-variant) !important;
}
body.md-ui .wk-calendar .wk-sticky-header {
    background: var(--dlg-bg) !important;
}
body.md-ui .wk-calendar .wk-toolbar:not(.md-x) button {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 32px !important;
    padding: 0 16px 0 12px !important;
    border: 1px solid var(--md-outline-variant) !important;
    border-radius: var(--md-shape-sm, 8px) !important;
    background: transparent !important;
    color: var(--md-on-surface) !important;
    font-family: var(--md-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    letter-spacing: .1px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
body.md-ui .wk-calendar .wk-toolbar:not(.md-x) button:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}
body.md-ui .wk-calendar .wk-toolbar:not(.md-x) #wkBtnCopyDay {
    padding: 0 16px !important;
}
body.md-ui .wk-calendar .wk-toolbar .wk-chip-plus {
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
}
body.md-ui .wk-calendar .wk-btn-oh .wk-chip-plus { color: rgb(46, 140, 58); }
body.md-ui .wk-calendar .wk-btn-service .wk-chip-plus { color: rgb(56, 110, 220); }
body.md-ui .wk-calendar .wk-btn-kitchen .wk-chip-plus { color: rgb(196, 132, 20); }
body.md-ui .wk-calendar .wk-toolbar-info {
    margin-right: 0 !important;
    font: 400 12px/16px var(--md-font-sans) !important;
    color: var(--md-on-surface-variant) !important;
}
/* The legend: the same 12 px supporting text, a fine rule above it. */
body.md-ui .wk-calendar .wk-legend {
    gap: 16px !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--md-outline-variant) !important;
    flex-wrap: wrap;
}
body.md-ui .wk-calendar .wk-legend-item {
    gap: 8px !important;
    font: 400 12px/16px var(--md-font-sans) !important;
    color: var(--md-on-surface-variant) !important;
}

/* ---------------------------------------------------------------- closure editor */
/* The two dates read like two fields; the calendar is a Material date
   picker laid on the dialog: 40 px round days, the chosen ones filled, the
   days between on a band, today outlined. */
body.md-ui .ro-modal:not(.md-x) .cp-columns {
    gap: 24px !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-date-row {
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-date-label {
    box-sizing: border-box;
    height: var(--dlg-field-h);
    display: flex;
    align-items: center;
    padding: 0 12px !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: var(--md-shape-xs, 4px) !important;
    background: var(--dlg-field-bg) !important;
    color: var(--md-on-surface) !important;
    font: 400 14px/20px var(--md-font-sans) !important;
    text-align: left !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-date-label.empty {
    color: var(--md-on-surface-variant) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-date-arrow {
    color: var(--md-on-surface-variant) !important;
    font-size: 18px;
}
body.md-ui .ro-modal:not(.md-x) .cp-cal-wrapper {
    padding: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-cal-header {
    margin-bottom: 8px !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-cal-title {
    font: 500 14px/20px var(--md-font-sans) !important;
    letter-spacing: .1px;
    color: var(--md-on-surface-variant) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-cal-nav {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--md-on-surface-variant) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer;
}
body.md-ui .ro-modal:not(.md-x) .cp-cal-nav:hover {
    background: color-mix(in srgb, var(--md-on-surface-variant) 8%, transparent) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-weekday {
    font: 400 12px/16px var(--md-font-sans) !important;
    color: var(--md-on-surface) !important;
    padding: 4px 0 !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-weekdays-row,
body.md-ui .ro-modal:not(.md-x) .cp-days-grid {
    gap: 0 !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-days-grid {
    grid-template-rows: repeat(6, 40px) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-day {
    box-sizing: border-box;
    justify-self: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--md-on-surface) !important;
    font: 400 14px/20px var(--md-font-sans) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-day:not(.disabled):not(.selected):hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-day.disabled {
    color: color-mix(in srgb, var(--md-on-surface) 38%, transparent) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-day.today {
    border: 1px solid var(--md-primary) !important;
    color: var(--md-primary) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-day.in-range {
    justify-self: stretch;
    width: auto;
    border-radius: 0 !important;
    background: var(--md-secondary-container) !important;
    color: var(--md-on-secondary-container) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-day.has-closure {
    background: var(--md-error-container) !important;
    color: var(--md-on-error-container) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-day.selected,
body.md-ui .ro-modal:not(.md-x) .cp-day.selected.today {
    border: 0 !important;
    background: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
    font-weight: 500 !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-info {
    margin-top: 8px !important;
    font: 400 12px/16px var(--md-font-sans) !important;
    color: var(--md-on-surface-variant) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-form-group {
    margin-bottom: 0 !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-form-label {
    margin: 0 0 4px !important;
    font: 500 12px/16px var(--md-font-sans) !important;
    letter-spacing: .04em;
    color: var(--md-on-surface-variant) !important;
}
body.md-ui .ro-modal:not(.md-x) .cp-form-select,
body.md-ui .ro-modal:not(.md-x) .cp-form-input {
    width: 100%;
}
body.md-ui .ro-modal:not(.md-x) .cp-error-msg {
    margin-top: 16px !important;
    padding: 12px 16px !important;
    border-radius: var(--md-shape-sm, 8px) !important;
    background: var(--md-error-container) !important;
    color: var(--md-on-error-container) !important;
    font: 400 14px/20px var(--md-font-sans) !important;
}

/* ---------------------------------------------------------------- column filter */
/* Anchored under its column: a Material menu surface, 40 px field, text
   button and filled pill. It was at z-index 300, under the window it filters
   (1000): the filter opened unseen. */
body.md-ui .sub-pop:not(.md-x) {
    z-index: 1200 !important;
    box-sizing: border-box;
    min-width: 260px;
    padding: 16px !important;
    border: 0 !important;
    border-radius: var(--md-shape-lg, 16px) !important;
    background: var(--md-surface-container) !important;
    color: var(--md-on-surface) !important;
    box-shadow: var(--md-elevation-2) !important;
    font-family: var(--md-font-sans);
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-title {
    margin: 0 0 12px !important;
    font: 500 14px/20px var(--md-font-sans) !important;
    letter-spacing: .1px;
    color: var(--md-on-surface) !important;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-input,
body.md-ui .sub-pop:not(.md-x) input[type="date"] {
    box-sizing: border-box;
    height: var(--dlg-field-h) !important;
    padding: 0 12px !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: var(--md-shape-xs, 4px) !important;
    background: var(--dlg-field-bg) !important;
    color: var(--md-on-surface) !important;
    font: 400 14px/20px var(--md-font-sans) !important;
    box-shadow: none !important;
    outline: none;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-input { margin-bottom: 12px !important; }
body.md-ui .sub-pop:not(.md-x) .sub-pop-input:focus,
body.md-ui .sub-pop:not(.md-x) input[type="date"]:focus {
    border-color: var(--md-primary) !important;
    box-shadow: inset 0 0 0 1px var(--md-primary) !important;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-all,
body.md-ui .sub-pop:not(.md-x) .sub-pop-list label,
body.md-ui .sub-pop:not(.md-x) .sub-pop-range label {
    font: 400 14px/20px var(--md-font-sans) !important;
    color: var(--md-on-surface) !important;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-all {
    font-weight: 500 !important;
    border-bottom-color: var(--md-outline-variant) !important;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-list label {
    min-height: 32px;
    padding: 4px 8px !important;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-list label:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-range {
    border-top-color: var(--md-outline-variant) !important;
}
body.md-ui .sub-pop:not(.md-x) input[type="checkbox"],
body.md-ui .sub-pop:not(.md-x) input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--md-primary);
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-actions {
    gap: 8px !important;
    margin-top: 8px;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-btn {
    box-sizing: border-box;
    height: 40px !important;
    min-width: 64px;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--md-primary) !important;
    font: 500 14px/20px var(--md-font-sans) !important;
    letter-spacing: .1px;
    cursor: pointer;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-btn:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-btn.primary {
    padding: 0 24px !important;
    background: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
}
body.md-ui .sub-pop:not(.md-x) .sub-pop-btn.primary:hover {
    box-shadow: var(--md-elevation-1) !important;
}

/* ---------------------------------------------------------------- name prompt */
/* js/toast.js promptPopup: a confirmation with one field. */
body.md-ui dialog.confirm-dialog--prompt:not(.md-x) {
    width: min(400px, calc(100vw - 48px));
}
body.md-ui dialog.confirm-dialog--prompt:not(.md-x) .confirm-field {
    display: block;
    margin-top: 16px;
}
body.md-ui dialog.confirm-dialog--prompt:not(.md-x) .confirm-field-label {
    display: block;
    margin: 0 0 4px;
    font: 500 12px/16px var(--md-font-sans);
    letter-spacing: .04em;
    color: var(--md-on-surface-variant);
}
body.md-ui dialog.confirm-dialog--prompt:not(.md-x) .confirm-input {
    box-sizing: border-box;
    width: 100%;
    height: var(--dlg-field-h) !important;
    padding: 0 12px !important;
    border: 1px solid var(--md-outline) !important;
    border-radius: var(--md-shape-xs, 4px) !important;
    background: var(--dlg-field-bg) !important;
    color: var(--md-on-surface) !important;
    font: 400 14px/20px var(--md-font-sans) !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Planned week and bookings touched (28.09.2026)
   ========================================================================== */
/* The two weeks of the Services window, as Material secondary tabs. */
body.md-ui .wk-calendar .wk-versions {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--md-outline-variant);
}
body.md-ui .wk-calendar .wk-version-group {
    display: inline-flex;
    align-items: center;
}
body.md-ui .wk-calendar .wk-version-tab,
body.md-ui .wk-calendar .wk-version-add {
    box-sizing: border-box;
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--md-on-surface-variant);
    font: 500 14px/20px var(--md-font-sans);
    letter-spacing: .1px;
    cursor: pointer;
    white-space: nowrap;
}
body.md-ui .wk-calendar .wk-version-tab.active {
    color: var(--md-primary);
    border-bottom-color: var(--md-primary);
}
body.md-ui .wk-calendar .wk-version-tab:hover,
body.md-ui .wk-calendar .wk-version-add:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}
body.md-ui .wk-calendar .wk-version-add {
    color: var(--md-primary);
}
body.md-ui .wk-calendar .wk-version-sub {
    margin-left: 4px;
    font-weight: 400;
    color: var(--md-on-surface-variant);
}
body.md-ui .wk-calendar .wk-version-icon {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
body.md-ui .wk-calendar .wk-version-icon:hover {
    background: color-mix(in srgb, var(--md-on-surface-variant) 8%, transparent);
}

/* Seasons (28.09.2026): a tab each, with its days of the year, then the bar
   of the year. Four colours, one per season, in the order of the year. */
body.md-ui .wk-calendar .wk-seasons {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-wrap: wrap;
}
body.md-ui .wk-calendar .wk-season-group {
    display: inline-flex;
    align-items: center;
}
body.md-ui .wk-calendar .wk-season-tab {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 8px 0 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--md-on-surface-variant);
    font: 500 14px/20px var(--md-font-sans);
    letter-spacing: .1px;
    cursor: pointer;
    white-space: nowrap;
}
body.md-ui .wk-calendar .wk-season-tab.active {
    color: var(--md-on-surface);
    border-bottom-color: var(--md-primary);
}
body.md-ui .wk-calendar .wk-season-tab:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}
body.md-ui .wk-calendar .wk-season-dot {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--md-outline-variant);
    flex: none;
}
body.md-ui .wk-calendar .wk-season-now {
    padding: 0 8px;
    border-radius: 8px;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    font: 500 11px/18px var(--md-font-sans);
}
body.md-ui .wk-calendar .wk-season-range {
    font-weight: 400;
    color: var(--md-on-surface-variant);
}
body.md-ui .wk-calendar .wk-season-first {
    margin-left: auto;
}
body.md-ui .wk-season-c0 { background: var(--md-primary-container); }
body.md-ui .wk-season-c1 { background: var(--md-tertiary-container); }
body.md-ui .wk-season-c2 { background: var(--md-secondary-container); }
body.md-ui .wk-season-c3 { background: var(--md-surface-container-highest); }
body.md-ui .wk-calendar .wk-year {
    padding: 8px 16px 4px;
    border-bottom: 1px solid var(--md-outline-variant);
}
body.md-ui .wk-calendar .wk-year-track {
    position: relative;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--md-surface-container);
}
body.md-ui .wk-calendar .wk-year-band {
    position: absolute;
    top: 0;
    bottom: 0;
    box-shadow: inset -2px 0 0 var(--md-surface-container-high);
}
body.md-ui .wk-calendar .wk-year-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--md-on-surface);
}
body.md-ui .wk-calendar .wk-year-months {
    position: relative;
    height: 16px;
}
body.md-ui .wk-calendar .wk-year-month {
    position: absolute;
    top: 2px;
    text-align: center;
    color: var(--md-on-surface-variant);
    font: 400 11px/14px var(--md-font-sans);
}

/* The season window (js/schedule-seasons.js). */
body.md-ui dialog.ss-dialog:not(.md-x) {
    width: min(480px, calc(100vw - 48px));
}
body.md-ui dialog.ss-dialog .ss-block {
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
body.md-ui dialog.ss-dialog .ss-legend {
    padding: 0;
    margin-bottom: 4px;
    color: var(--md-on-surface);
    font: 500 14px/20px var(--md-font-sans);
}
body.md-ui dialog.ss-dialog .ss-field {
    display: grid;
    grid-template-columns: 10em 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
body.md-ui dialog.ss-dialog .ss-label {
    color: var(--md-on-surface-variant);
    font: 400 14px/20px var(--md-font-sans);
}
body.md-ui dialog.ss-dialog .ss-start {
    display: flex;
    gap: 8px;
}
body.md-ui dialog.ss-dialog .ss-day {
    width: 80px;
    flex: none;
}
body.md-ui dialog.ss-dialog .ss-month {
    flex: 1;
    min-width: 0;
}
body.md-ui dialog.ss-dialog .sg-note {
    margin: 16px 0 0;
    color: var(--md-on-surface-variant);
    font: 400 12px/16px var(--md-font-sans);
}
body.md-ui dialog.ss-dialog .ss-error {
    margin: 12px 0 0;
    color: var(--md-error);
    font: 400 14px/20px var(--md-font-sans);
}
body.md-ui dialog.ss-dialog .ss-foot-gap {
    flex: 1;
}

/* The bookings a change would touch (js/schedule-guard.js). */
body.md-ui dialog.sg-dialog:not(.md-x) {
    width: min(560px, calc(100vw - 48px));
}
body.md-ui dialog.sg-dialog .sg-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
    border-top: 1px solid var(--md-outline-variant);
}
body.md-ui dialog.sg-dialog .sg-list li {
    display: grid;
    grid-template-columns: 9em 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--md-outline-variant);
    font: 400 14px/20px var(--md-font-sans);
    color: var(--md-on-surface);
}
body.md-ui dialog.sg-dialog .sg-when { font-weight: 500; }
body.md-ui dialog.sg-dialog .sg-why {
    font-size: 12px;
    color: var(--md-error);
}
body.md-ui dialog.sg-dialog .sg-note {
    margin: 12px 0 0;
    font: 400 12px/16px var(--md-font-sans);
    color: var(--md-on-surface-variant);
}
body.md-ui dialog.sg-dialog .confirm-dialog-foot {
    flex-wrap: wrap;
}
/* A message of several lines in promptPopup. */
body.md-ui dialog.confirm-dialog--prompt:not(.md-x) .confirm-textarea {
    height: auto !important;
    min-height: 96px;
    padding: 10px 12px !important;
    resize: vertical;
}
/* The weekly hours window: they hold every week (28.09.2026). */
body.md-ui .ro-modal:not(.md-x) .oh-weekly-note {
    margin: 0 var(--dlg-pad) 8px;
    font: 400 14px/20px var(--md-font-sans);
    color: var(--md-on-surface-variant);
}
body.md-ui .ro-modal:not(.md-x) .oh-exception-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--md-primary);
    font: 500 14px/20px var(--md-font-sans);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Lot 3 (28.09.2026): the drop-down lists as Material 3 menus. Greg: "Toutes
   les listes". A browser that knows the customizable <select> (Chrome, Edge)
   opens it on a menu surface: 4 px corners, a level 2 shadow, 40 px lines,
   the chosen line on the secondary container, no tick. Firefox and Safari
   keep their own list; the field is the same in all of them. The public pages
   (the guest's phone) keep the list of the phone.
   --------------------------------------------------------------------------- */
@supports (appearance: base-select) {
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size]),
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }
    /* The field keeps its place: the text centred, the arrow at the end. A
       list kept hidden (history: the chips stand for it) stays hidden. */
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size]):not([hidden]) {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        cursor: pointer;
    }
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size])::picker-icon {
        margin-inline-start: auto;
    }
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size])::picker(select) {
        box-sizing: border-box;
        min-inline-size: anchor-size(width);
        max-block-size: min(360px, 60vh);
        margin-block: 4px;
        padding: 8px 0;
        overflow-y: auto;
        border: 0;
        border-radius: var(--md-shape-xs, 4px);
        background: var(--md-surface-container);
        color: var(--md-on-surface);
        box-shadow: var(--md-elevation-2);
    }
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size]) option {
        display: flex;
        align-items: center;
        min-block-size: 40px;
        padding: 0 16px;
        border: 0;
        background: transparent !important;
        color: var(--md-on-surface) !important;
        font: 400 14px/20px var(--md-font-sans);
        white-space: nowrap;
        cursor: pointer;
    }
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size]) option::checkmark {
        display: none;
    }
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size]) option:hover,
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size]) option:focus-visible {
        outline: none;
        background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
    }
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size]) option:checked {
        background: var(--md-secondary-container) !important;
        color: var(--md-on-secondary-container) !important;
    }
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size]) option:disabled {
        color: color-mix(in srgb, var(--md-on-surface) 38%, transparent) !important;
        cursor: default;
    }
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size])::picker-icon {
        color: var(--md-on-surface-variant);
        transition: rotate .15s ease;
    }
    body.md-ui:not(.md-public):not(.md-home) select:not([multiple]):not([size]):open::picker-icon {
        rotate: 180deg;
    }
    /* The restaurant of the top bar: its arrow a little apart from the name
       (it had none left: a sheet of the frame erased the drawn one). */
    body.md-ui .md-rsel-select {
        padding-right: 4px;
    }
    body.md-ui .md-rsel-select::picker-icon {
        margin-inline-start: 8px;
    }
}

/* ---------------------------------------------------------------------------
   Lot 4 (28.09.2026): the date, time and colour pickers (js/md-pickers.js).
   The browser's own calendar, clock and colour dialog give way to Material
   surfaces. html.md-pk-on is set by the script, so a page that does not load
   it keeps the browser's pickers untouched.
   --------------------------------------------------------------------------- */
html.md-pk-on body.md-ui:not(.md-public):not(.md-home) input[type="date"]::-webkit-calendar-picker-indicator,
html.md-pk-on body.md-ui:not(.md-public):not(.md-home) input[type="time"]::-webkit-calendar-picker-indicator {
    /* The icon stays as a sign; a click on it reaches the field. */
    pointer-events: none;
    opacity: .72;
}
html.md-pk-on body.md-ui:not(.md-public):not(.md-home) input[type="date"]:not([disabled]):not([readonly]),
html.md-pk-on body.md-ui:not(.md-public):not(.md-home) input[type="time"]:not([disabled]):not([readonly]),
html.md-pk-on body.md-ui:not(.md-public):not(.md-home) input[type="color"]:not([disabled]) {
    cursor: pointer;
}

/* The surface. A popover sits in the top layer, above every window; the UA
   frame of a popover (centred, bordered) is undone here. */
.md-pk {
    position: fixed;
    inset: auto;
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: var(--md-shape-lg, 16px);
    background: var(--md-surface-container-high);
    color: var(--md-on-surface);
    box-shadow: var(--md-elevation-2);
    font: 400 14px/20px var(--md-font-sans);
    overflow: visible;
    z-index: 2000;
}
.md-pk.md-pk-fixed { display: block; }
.md-pk button {
    box-sizing: border-box;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.md-pk button:disabled { cursor: default; }
.md-pk button:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }

/* Date: 304 px, like the date of the top bar (lot 3). */
.md-pk-date { width: 304px; padding: 8px 12px 4px; }
.md-pk-head { display: flex; align-items: center; height: 48px; padding: 0 0 0 4px; }
.md-pk-title {
    display: inline-flex; align-items: center; gap: 4px;
    height: 36px; padding: 0 8px !important; margin-right: auto !important;
    border-radius: var(--md-shape-full, 999px);
    color: var(--md-on-surface-variant) !important;
    font: 500 14px/20px var(--md-font-sans) !important;
    text-transform: capitalize;
}
.md-pk-caret {
    width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transition: rotate .15s ease;
}
.md-pk-title[aria-expanded="true"] .md-pk-caret { rotate: 180deg; }
.md-pk-nav {
    width: 40px; height: 40px;
    border-radius: 50%;
    color: var(--md-on-surface-variant) !important;
    font-size: 22px !important; line-height: 1 !important;
}
.md-pk-title:hover, .md-pk-nav:hover, .md-pk-text:hover:not(:disabled),
.md-pk-day:hover:not(:disabled):not(.is-sel), .md-pk-year:hover:not(:disabled):not(.is-sel),
.md-pk-opt:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}
.md-pk-week, .md-pk-days { display: grid; grid-template-columns: repeat(7, 40px); justify-content: space-between; }
.md-pk-week span {
    display: flex; align-items: center; justify-content: center;
    height: 40px; color: var(--md-on-surface); font: 400 12px/16px var(--md-font-sans);
}
.md-pk-day {
    width: 40px; height: 40px;
    border-radius: 50%;
    color: var(--md-on-surface) !important;
    font: 400 14px/20px var(--md-font-sans) !important;
    padding: 0 !important;
}
.md-pk-day.is-other { color: color-mix(in srgb, var(--md-on-surface) 38%, transparent) !important; }
.md-pk-day.is-today { box-shadow: inset 0 0 0 1px var(--md-primary); color: var(--md-primary) !important; }
.md-pk-day.is-sel { background: var(--md-primary) !important; color: var(--md-on-primary) !important; box-shadow: none; }
.md-pk-day:disabled { color: color-mix(in srgb, var(--md-on-surface) 38%, transparent) !important; }
.md-pk-years {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 0;
    max-height: 288px; overflow-y: auto; padding: 4px 0 8px;
}
.md-pk-year {
    justify-self: center; width: 72px; height: 36px;
    border-radius: var(--md-shape-full, 999px);
    color: var(--md-on-surface-variant) !important;
    font: 400 14px/20px var(--md-font-sans) !important;
}
.md-pk-year.is-sel { background: var(--md-primary) !important; color: var(--md-on-primary) !important; }
.md-pk-year:disabled { color: color-mix(in srgb, var(--md-on-surface) 38%, transparent) !important; }
.md-pk-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.md-pk-text {
    height: 40px; padding: 0 12px !important;
    border-radius: var(--md-shape-full, 999px);
    color: var(--md-primary) !important;
    font: 500 14px/20px var(--md-font-sans) !important;
}
.md-pk-text:disabled { color: color-mix(in srgb, var(--md-on-surface) 38%, transparent) !important; }

/* Time: a menu, like the lists of lot 3. */
.md-pk-time {
    max-height: min(280px, 50vh);
    overflow-y: auto;
    padding: 8px 0;
    border-radius: var(--md-shape-xs, 4px);
    background: var(--md-surface-container);
}
.md-pk-opt {
    display: flex; align-items: center; width: 100%;
    min-height: 40px; padding: 0 16px !important;
    color: var(--md-on-surface) !important;
    font: 400 14px/20px var(--md-font-sans) !important;
    font-variant-numeric: tabular-nums;
    text-align: left;
}
.md-pk-opt.is-sel { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; }

/* Colour: the palette, the code, the system dialog as the last resort. */
.md-pk-color { width: 248px; padding: 16px 16px 4px; }
.md-pk-swatches { display: grid; grid-template-columns: repeat(5, 32px); justify-content: space-between; gap: 12px 0; }
.md-pk-swatch {
    width: 32px; height: 32px; padding: 0 !important;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-on-surface) 24%, transparent);
}
.md-pk-swatch.is-sel { box-shadow: 0 0 0 2px var(--md-surface-container-high), 0 0 0 4px var(--md-primary); }
.md-pk-hexrow { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.md-pk-chip {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-on-surface) 24%, transparent);
}
.md-pk .md-pk-hex {
    flex: 1 1 auto; min-width: 0;
    box-sizing: border-box; height: 40px; margin: 0;
    padding: 0 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-xs, 4px);
    background: var(--md-surface-container-highest);
    color: var(--md-on-surface);
    font: 400 14px/20px var(--md-font-sans);
    text-transform: lowercase;
    outline: none;
}
.md-pk .md-pk-hex:focus { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); }
.md-pk .md-pk-hex.is-bad { border-color: var(--md-error); box-shadow: inset 0 0 0 1px var(--md-error); }
.md-pk-color .md-pk-foot { margin-top: 8px; }

/* ---------------------------------------------------------------------------
   Tooltips, lot 1 (28.09.2026, TASKS 4.7): the Material 3 "plain tooltip" of
   js/md-tooltip.js. Inverse surface, so it reads the same on a light and on
   a dark page. It sits in the top layer (a manual popover, above every
   window); the UA frame of a popover is undone here. It never takes the
   pointer: the element under it keeps its hover.
   --------------------------------------------------------------------------- */
.md-tip {
    position: fixed;
    inset: auto;
    margin: 0;
    box-sizing: border-box;
    width: max-content;
    min-height: 24px;
    max-width: 280px;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--md-shape-xs, 4px);
    background: var(--md-inverse-surface);
    color: var(--md-inverse-on-surface);
    font: 400 12px/16px var(--md-font-sans);
    letter-spacing: .4px;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    overflow: visible;
    pointer-events: none;
    z-index: 2100;
    transition: opacity .15s ease;
}
.md-tip.md-tip-fixed { display: block; }
@starting-style {
    .md-tip:popover-open { opacity: 0; }
}
/* A long press shows the tip: no text selection and no magnifier meanwhile. */
html.md-tip-press,
html.md-tip-press * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}
/* A bubble of several lines, built by a page (window.mdTipProviders; the
   summary of a table in service, 30.09.2026): a little wider. Words kept for
   screen readers only (an icon's meaning) take no room. */
.md-tip.md-tip--rich {
    max-width: 320px;
    padding: 6px 10px;
}
.md-tip .md-tip-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* A room tied to a season (js/room-season.js, 30.09.2026): the bookings a
   new rule strands, and where "Reattribuer les convives" puts them. Same
   window as the schedule's (sg-dialog); the third column says where. */
body.md-ui dialog.rsn-dialog .rsn-ok {
    font-size: 12px;
    color: var(--md-tertiary);
}
body.md-ui dialog.rsn-dialog .rsn-fail {
    font-size: 12px;
    color: var(--md-error);
}

/* ---------------------------------------------------------------- tablet keyboard */
/* The on-screen keyboard of a tablet held landscape (js/md-keyboard.js,
   30.09.2026, Greg: "Remonter et retrecir"). It took almost half of the
   screen and covered the field being typed in; iPad Safari does not even
   resize the page, so a centred window stayed under it. While it is up,
   <html> carries kb-open and --md-vv-top / --md-vv-height give the part of
   the page still visible: every window moves to the top of that part and
   shrinks to it, its body scrolls, its head and its buttons stay in view.
   Without a keyboard none of this applies. */
html.kb-open body.md-ui .ro-modal-overlay:not(.md-x),
html.kb-open body.md-ui .create-overlay:not(.md-x),
html.kb-open body.md-ui .tpl-popup-overlay:not(.md-x) {
    align-items: flex-start !important;
    padding-top: calc(var(--md-vv-top, 0px) + 8px) !important;
    padding-bottom: 8px !important;
}
html.kb-open body.md-ui .ro-modal:not(.md-x),
html.kb-open body.md-ui .tpl-popup:not(.md-x) {
    max-height: calc(var(--md-vv-height, 100vh) - 16px) !important;
}
/* A window without a body of its own (the opening hours) scrolls as a whole
   rather than lose what no longer fits. */
html.kb-open body.md-ui .ro-modal:not(.md-x):not(:has(> .ro-modal-body)) {
    overflow-y: auto !important;
}
/* The two windows that keep a fixed height (see above; widget-editor.css
   sets 95vh for the first) take the whole visible part instead. */
html.kb-open body.md-ui #modalWidget .ro-modal:not(.md-x),
html.kb-open body.md-ui #modalServices .ro-modal:not(.md-x) {
    height: calc(var(--md-vv-height, 100vh) - 16px) !important;
    max-height: calc(var(--md-vv-height, 100vh) - 16px) !important;
}
html.kb-open body.md-ui .create-panel:not(.md-x) {
    max-height: calc(var(--md-vv-height, 100vh) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Native windows: a modal <dialog> is centred by its auto margins. */
html.kb-open body.md-ui dialog.confirm-dialog[open]:not(.md-x),
html.kb-open body.md-ui dialog.sb-dialog[open]:not(.md-x),
html.kb-open body.md-ui dialog.sb-slots-dialog[open]:not(.md-x) {
    margin-top: calc(var(--md-vv-top, 0px) + 8px) !important;
    margin-bottom: auto !important;
    max-height: calc(var(--md-vv-height, 100vh) - 16px) !important;
}
/* Walk-in and telephone booking: the head, the two tabs and the buttons stay,
   the fields between them scroll. The small inner padding keeps the focus
   ring of the first and last field from being clipped. */
html.kb-open body.md-ui dialog.sb-dialog[open]:not(.md-x) {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}
html.kb-open body.md-ui dialog.sb-dialog:not(.md-x) .sb-form {
    flex: 0 1 auto;
    min-height: 0;
}
html.kb-open body.md-ui dialog.sb-dialog:not(.md-x) .sb-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: -4px;
    padding: 4px;
}

/* ==========================================================================
   The PIN of the floor tablet (30.09.2026)
   ==========================================================================
   Greg: a tablet declared once by the owner or a Manager; each person touches
   their first name and types their own four-digit PIN. The lock screen
   (js/tablet-lock.js) replaces the sign-in form on a declared tablet; its
   keypad is made of buttons, big enough for a finger on a landscape tablet,
   and never brings the system keyboard up. The three small windows
   (js/pin-dialog.js: declaring, "PIN oublie", "Mon code PIN") are
   confirmation dialogs with fields, so they move above the keyboard like the
   others (tablet keyboard section above). */

/* ---------------------------------------------------------------- lock screen */
body.md-ui.tl-mode .auth-page {
    display: none !important;
}
body.md-ui:not(.tl-mode) .tl-page {
    display: none;
}
body.md-ui .tl-page {
    box-sizing: border-box;
    min-height: calc(100vh - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px 16px;
    color: var(--md-on-surface);
    font-family: var(--md-font-sans);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
body.md-ui .tl-head {
    text-align: center;
    min-height: 56px;
}
body.md-ui .tl-restaurant {
    font: 400 28px/36px var(--md-font-sans);
}
body.md-ui .tl-tablet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 14px/20px var(--md-font-sans);
    color: var(--md-on-surface-variant);
}
body.md-ui .tl-tablet .md-icon {
    font-size: 18px;
}
/* The brand above the restaurant (01.10.2026, after Greg's lock-screen
   wallpaper): the logo, a short rule fading out at both ends, then the
   restaurant and the tablet. The page always lies on the night of the
   brand (md-public.css, whatever the theme) and the logo has its gold
   sheen. Decorative: the keypad says what the screen is. */
body.md-ui .tl-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
body.md-ui .tl-brand-logo {
    display: block;
    height: 64px;
    width: auto;
}
body.md-ui .tl-brand-rule {
    display: block;
    width: 140px;
    height: 1px;
    background: var(--md-brand-rule-line);
}
/* On the night, the restaurant reads like the line under the logo of the
   wallpaper (light, a little spaced, gold) and the tablet like its small
   spaced capitals. Only the look changes, never the words. */
body.md-ui .tl-page .tl-restaurant {
    font-weight: 300;
    letter-spacing: .04em;
    color: var(--md-brand-ink);
}
body.md-ui .tl-page .tl-tablet {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--md-brand-ink-muted);
}
body.md-ui .tl-page .tl-tablet .md-icon {
    font-size: 16px;
    letter-spacing: 0;
}
body.md-ui .tl-msg {
    margin: 0;
    min-height: 24px;
    font: 400 16px/24px var(--md-font-sans);
    color: var(--md-on-surface-variant);
    text-align: center;
}
body.md-ui .tl-msg.is-error {
    color: var(--md-error);
}
body.md-ui .tl-main {
    flex: 1 1 auto;
    width: min(960px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.md-ui .tl-who,
body.md-ui .tl-empty {
    margin: 0 0 16px;
    font: 400 16px/24px var(--md-font-sans);
    color: var(--md-on-surface-variant);
    text-align: center;
    max-width: 560px;
}
body.md-ui .tl-people {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
}
body.md-ui .tl-person {
    min-height: 112px;
    padding: 12px;
    border: 0;
    border-radius: var(--md-shape-lg, 16px);
    background: var(--md-surface-container-high);
    color: var(--md-on-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    touch-action: manipulation;
    font-family: var(--md-font-sans);
}
body.md-ui .tl-person:hover,
body.md-ui .tl-person:focus-visible {
    background: var(--md-surface-container-highest);
    outline: none;
}
/* The name cards and the keys in the dark glass of the sign-in card, with
   its gold hairline (Greg, 01.10.2026); pressed, they keep the tonal
   colour of Material, so a touch is seen. */
body.md-ui .tl-page .tl-person,
body.md-ui .tl-page .tl-key {
    background: var(--md-brand-glass-key);
    box-shadow: inset 0 0 0 1px var(--md-brand-hairline-key);
}
body.md-ui .tl-page .tl-person:hover,
body.md-ui .tl-page .tl-person:focus-visible,
body.md-ui .tl-page .tl-key:hover {
    background: var(--md-brand-glass-key-hover);
}
body.md-ui .tl-page .tl-person:focus-visible,
body.md-ui .tl-page .tl-key:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
}
body.md-ui .tl-page .tl-person:active,
body.md-ui .tl-page .tl-key:active {
    background: var(--md-secondary-container);
}
body.md-ui .tl-person:active {
    background: var(--md-secondary-container);
}
body.md-ui .tl-initial {
    width: 44px;
    height: 44px;
    border-radius: var(--md-shape-full, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font: 500 20px/1 var(--md-font-sans);
}
body.md-ui .tl-name {
    font: 500 18px/24px var(--md-font-sans);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.md-ui .tl-person-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 500 12px/16px var(--md-font-sans);
    color: var(--md-error);
}
body.md-ui .tl-person-state .md-icon {
    font-size: 16px;
}

/* The keypad: 3 x 4 keys of 96 x 72 px, 16 px apart. */
body.md-ui .tl-pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
body.md-ui .tl-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 12px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--md-primary);
    font: 500 14px/20px var(--md-font-sans);
    cursor: pointer;
}
body.md-ui .tl-back:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}
body.md-ui .tl-pad-name {
    font: 400 24px/32px var(--md-font-sans);
    text-align: center;
}
body.md-ui .tl-dots {
    display: flex;
    gap: 20px;
    padding: 6px 0;
}
body.md-ui .tl-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--md-outline);
    box-sizing: border-box;
}
body.md-ui .tl-dot.on {
    background: var(--md-primary);
    border-color: var(--md-primary);
}
body.md-ui .tl-dots.tl-shake {
    animation: tl-shake .4s ease-in-out;
}
@keyframes tl-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}
@media (prefers-reduced-motion: reduce) {
    body.md-ui .tl-dots.tl-shake { animation: none; }
}
body.md-ui .tl-keys {
    display: grid;
    grid-template-columns: repeat(3, 96px);
    grid-auto-rows: 72px;
    gap: 16px;
}
body.md-ui .tl-key {
    border: 0;
    border-radius: 36px;
    background: var(--md-surface-container-high);
    color: var(--md-on-surface);
    font: 400 32px/1 var(--md-font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
}
body.md-ui .tl-key:hover {
    background: var(--md-surface-container-highest);
}
body.md-ui .tl-key:active {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}
body.md-ui .tl-key:disabled {
    opacity: .5;
    cursor: default;
}
body.md-ui .tl-key--icon .md-icon {
    font-size: 28px;
}
body.md-ui .tl-forgot,
body.md-ui .tl-password,
body.md-ui .tl-back-to-pad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--md-primary);
    font: 500 14px/20px var(--md-font-sans);
    cursor: pointer;
}
body.md-ui .tl-forgot:hover,
body.md-ui .tl-password:hover,
body.md-ui .tl-back-to-pad:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}
body.md-ui .tl-back-to-pad {
    margin: 12px auto 0;
    display: flex;
}
/* login.html has no tooltips (a public page, a finger): the two secondary
   ways of the keypad say what they are for in a line under them (30.09.2026). */
body.md-ui .tl-hinted {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
body.md-ui .tl-hint {
    margin: 0;
    max-width: 320px;
    padding: 0 16px;
    color: var(--md-on-surface-variant);
    font: 400 12px/16px var(--md-font-sans);
    text-align: center;
}
body.md-ui .tl-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 420px;
    text-align: center;
}
body.md-ui .tl-locked > .md-icon {
    font-size: 40px;
    color: var(--md-error);
}
body.md-ui .tl-locked p {
    margin: 0;
    font: 400 16px/24px var(--md-font-sans);
}
body.md-ui .tl-forgot-main,
body.md-ui .tl-retry {
    height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 24px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font: 500 16px/20px var(--md-font-sans);
    cursor: pointer;
}
body.md-ui .tl-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 24px;
}
body.md-ui .tl-langs {
    display: inline-flex;
    gap: 4px;
}
body.md-ui .tl-lang {
    min-width: 40px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--md-outline-variant);
    border-radius: 16px;
    background: transparent;
    color: var(--md-on-surface-variant);
    font: 500 12px/1 var(--md-font-sans);
    cursor: pointer;
}
body.md-ui .tl-lang.on {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    border-color: transparent;
}
/* A low landscape screen (a tablet with its browser bars): the keypad
   tightens rather than push the way out below the fold. */
@media (max-height: 760px) {
    body.md-ui .tl-page { gap: 8px; padding-top: 12px; }
    body.md-ui .tl-keys { grid-auto-rows: 64px; gap: 12px; }
    body.md-ui .tl-pad { gap: 10px; }
    /* The keypad needs the height: the brand gives way to it. */
    body.md-ui .tl-page:has(.tl-pad) .tl-brand { display: none; }
    body.md-ui .tl-brand-logo { height: 52px; }
}
/* Lower still, held landscape (Greg's tablet, about 960x600 and less once
   the browser's bars are counted, 01.10.2026): stacked, the keypad ran
   130 px past the bottom and "PIN oublie" fell below the fold. The width is
   what such a screen has: the keys go to the right in their full size and
   glass, the way back, the name, the dots and "PIN oublie" stand to their
   left, centred on them. A locked person (no keys) keeps the column. */
@media (orientation: landscape) and (max-height: 700px) {
    body.md-ui .tl-pad:not(.is-locked) {
        display: grid;
        grid-template-columns: minmax(0, auto) auto;
        grid-template-rows: auto 1fr auto auto auto 1fr;
        column-gap: 56px;
        row-gap: 10px;
        align-items: center;
        justify-items: center;
    }
    body.md-ui .tl-pad:not(.is-locked) > .tl-back { grid-area: 1 / 1; justify-self: start; }
    body.md-ui .tl-pad:not(.is-locked) > .tl-pad-name { grid-area: 3 / 1; }
    body.md-ui .tl-pad:not(.is-locked) > .tl-dots { grid-area: 4 / 1; }
    body.md-ui .tl-pad:not(.is-locked) > .tl-hinted { grid-area: 5 / 1; }
    body.md-ui .tl-pad:not(.is-locked) > .tl-keys { grid-area: 1 / 2 / 7 / 3; }
}

/* ---------------------------------------------------------------- the windows */
body.md-ui dialog.pin-dialog:not(.md-x) {
    width: min(440px, calc(100vw - 48px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.md-ui dialog.pin-dialog:not(.md-x) .pin-dialog-form {
    margin: 0;
}
body.md-ui dialog.pin-dialog:not(.md-x) select.confirm-input {
    padding: 0 8px !important;
}
body.md-ui dialog.pin-dialog:not(.md-x) .pin-dialog-error {
    margin: 12px 0 0;
    min-height: 20px;
    font: 400 14px/20px var(--md-font-sans);
    color: var(--md-error);
}
body.md-ui dialog.pin-dialog:not(.md-x) .pin-dialog-error:empty {
    min-height: 0;
    margin: 0;
}
body.md-ui dialog.pin-dialog:not(.md-x) .confirm-dialog-foot {
    flex-wrap: wrap;
}
body.md-ui dialog.pin-dialog:not(.md-x) .pin-dialog-gap {
    flex: 1 1 auto;
}
body.md-ui dialog.pin-dialog:not(.md-x) .pin-dialog-extra--danger {
    color: var(--md-error) !important;
}
/* The advice on the browser of a floor tablet (tablet-declare.js). */
body.md-ui dialog.pin-dialog:not(.md-x) .pin-dialog-notice {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--md-shape-sm, 8px);
    background: var(--md-error-container);
    color: var(--md-on-error-container);
    font: 400 13px/1.4 var(--md-font-sans, sans-serif);
}
/* The tablet keyboard up: the headline and the buttons stay, the fields
   between them scroll (as the walk-in window does, section above), so the
   main button is never left under the keyboard. */
html.kb-open body.md-ui dialog.pin-dialog[open]:not(.md-x) {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}
html.kb-open body.md-ui dialog.pin-dialog:not(.md-x) .confirm-dialog-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: -4px;
    padding: 4px !important;
}
html.kb-open body.md-ui dialog.pin-dialog:not(.md-x) .confirm-dialog-foot {
    flex: none;
    margin-top: 16px;
}

/* ---------------------------------------------------------------- the top bar */
/* "Changer d'utilisateur", in a PIN session only (js/sidebar.js). */
body.md-ui .md-switch-user {
    order: 6;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 20px;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    font: 500 14px/20px var(--md-font-sans);
    cursor: pointer;
    white-space: nowrap;
}
body.md-ui .md-switch-user .md-icon {
    font-size: 20px;
}
body.md-ui .md-switch-user:hover {
    box-shadow: var(--md-elevation-1);
}
/* Below 1280 px the bar has no room for the words: the icon, its name kept
   for screen readers and in the tooltip. */
@media (max-width: 1279px) {
    body.md-ui .md-switch-user {
        width: 40px;
        padding: 0;
        justify-content: center;
        position: relative;
    }
    body.md-ui .md-switch-user > span:not(.md-icon) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------- Mon code PIN */
body.md-ui #cardPin .pin-state {
    font: 500 14px/20px var(--md-font-sans);
    color: var(--md-on-surface-variant);
}
body.md-ui #cardPin .pin-state--on {
    color: var(--md-tertiary);
}
body.md-ui #cardPin .pin-state--locked {
    color: var(--md-error);
}

/* ---------------------------------------------------------------- tablets (Team) */
body.md-ui .tab-card .tab-card-icon {
    font-size: 16px;
    vertical-align: -3px;
    color: var(--md-on-surface-variant);
}
body.md-ui .tab-card .tab-card-none {
    color: var(--md-on-surface-variant);
    font-style: italic;
}
body.md-ui .tab-card .tab-card-delay {
    margin-top: 6px;
}
body.md-ui #modalTablets .ro-modal:not(.md-x) {
    max-width: 640px;
}
body.md-ui #modalTablets .ro-modal-title .md-icon {
    font-size: 22px;
    color: var(--md-on-secondary-container);
}
body.md-ui #modalTablets .tab-intro,
body.md-ui #modalTablets .tab-delay-hint {
    margin: 0 0 12px;
    font: 400 14px/20px var(--md-font-sans);
    color: var(--md-on-surface-variant);
}
body.md-ui #modalTablets .tab-list {
    border-top: 1px solid var(--md-outline-variant);
}
body.md-ui #modalTablets .tab-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--md-outline-variant);
}
body.md-ui #modalTablets .tab-row-icon {
    color: var(--md-on-surface-variant);
}
body.md-ui #modalTablets .tab-row-text {
    flex: 1 1 auto;
    min-width: 0;
}
body.md-ui #modalTablets .tab-row-name {
    font: 500 16px/24px var(--md-font-sans);
    color: var(--md-on-surface);
}
body.md-ui #modalTablets .tab-row-sub {
    font: 400 12px/16px var(--md-font-sans);
    color: var(--md-on-surface-variant);
}
body.md-ui #modalTablets .tab-remove {
    flex: none;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--md-error);
    font: 500 14px/20px var(--md-font-sans);
    cursor: pointer;
}
body.md-ui #modalTablets .tab-remove:hover {
    background: color-mix(in srgb, var(--md-error) 8%, transparent);
}
body.md-ui #modalTablets .tab-none {
    margin: 12px 0;
    color: var(--md-on-surface-variant);
    font-style: italic;
}
body.md-ui #modalTablets .tab-delay {
    margin-top: 20px;
}
body.md-ui #modalTablets .tab-delay-label {
    display: block;
    margin: 0 0 6px;
    font: 500 12px/16px var(--md-font-sans);
    letter-spacing: .04em;
    color: var(--md-on-surface-variant);
}
body.md-ui #modalTablets .tab-delay-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
body.md-ui #modalTablets .tab-delay-row input {
    width: 88px !important;
}
body.md-ui #modalTablets .tab-delay-unit {
    flex: 1 1 auto;
    font: 400 14px/20px var(--md-font-sans);
    color: var(--md-on-surface);
}
body.md-ui #modalTablets .tab-delay-save {
    height: 40px;
    padding: 0 24px;
    border: 0;
    border-radius: 20px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font: 500 14px/20px var(--md-font-sans);
    cursor: pointer;
}