/* ==========================================================================
1. VARIABLES & BASE
========================================================================== */
:root {
/* TOKENS */
--gap: 16px;
--gap-sm: 12px;
--content-x: 16px;
--card-pad: 20px;
--radius: 16px;
--hairline: 1px;
--btn-height: 36px;
--input-height: 36px;
--control-radius: 8px;
--switch-width: 46px;
--switch-height: 26px;
--switch-knob: 20px;
--switch-inset: 2px;
--icon-size: 20px;
--icon-size-lg: 24px;
--icon-weight: 400;
--text-primary: #1d1d1d;
--text-secondary: #4f6076;
--text-muted: #6f8096;
--fw-body: 400;
--fw-ui: 500;
--lh-ui: 1.4;
--color-accent: #2386c8;
--color-accent-dark: #1e74ad;
--color-ink: #1d1d1d;
--color-muted: #8b8b8b;
--color-soft: #b8b8b8;
--color-surface: #ffffff;
--color-day: #2a2a2a;
--color-service: #2f2f2f;
--color-time: #7a8298;
--color-duration: #5b8c5a;
--color-weekday: #2386c8;
--color-home-info: #2386c8;
--color-day-selected: #2386c8;
--color-day-button: #3a3a3a;
--color-btn-dark: var(--color-accent);
--bg-body: #e6ebf1;
--bg-card: #ffffff;
--card-border: #d2d8e1;
--card-shadow: 0 4px 12px rgba(18, 32, 56, 0.06);
--border-color: #d8e2ec;
--input-bg: #ffffff;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--radius-md: 10px;
--radius-lg: 16px;
--max-width-container: 1100px;
--max-width-content: 640px;
--safe-top: env(safe-area-inset-top);
--safe-bottom: env(safe-area-inset-bottom);
--safe-left: env(safe-area-inset-left);
--safe-right: env(safe-area-inset-right);
--app-vh: 1vh;
}
* {
box-sizing: border-box;
font-family:
"SF Pro Display",
"SF Pro Text",
-apple-system,
"Segoe UI",
"Trebuchet MS",
"Gill Sans",
"Candara",
sans-serif;
-webkit-tap-highlight-color: transparent;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
-webkit-text-size-adjust: 100%;
overscroll-behavior: none;
touch-action: none;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
body {
padding: 0;
background: var(--bg-body);
color: var(--text-primary);
font-weight: var(--fw-body);
overscroll-behavior: none;
}
/* Surfaces carte: blanc pur sur toutes les vues */
.home-main-card,
.settings-card,
.edit-panel,
.alarm-view .alarm-section,
.alarm-notice-modal,
.onboarding-modal,
.edit-day-view .edit-day-summary-block,
.legal-text,
.settings-period,
.update-banner {
background-color: var(--bg-card) !important;
border-color: var(--card-border) !important;
box-shadow: var(--card-shadow) !important;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 16px;
-webkit-appearance: none;
appearance: none;
}
:where(button) {
transition:
transform 100ms ease,
opacity 100ms ease,
filter 100ms ease;
}
button.ui-pressed {
transform: scale(0.985) !important;
opacity: 0.94;
}
button.ui-loading {
pointer-events: none;
opacity: 0.86;
}
button.ui-loading::after {
content: "";
width: 12px;
height: 12px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
margin-left: 8px;
display: inline-block;
animation: uiSpin 0.65s linear infinite;
}
@keyframes uiSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Bloque la sélection/callout natifs sur l'UI mobile.
On garde la sélection active dans les champs éditables. */
*:not(input):not(textarea):not([contenteditable="true"]) {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input,
textarea,
[contenteditable="true"] {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
input[type="date"],
input[type="month"] {
-webkit-appearance: auto;
appearance: auto;
height: var(--input-height);
min-height: var(--input-height);
border-radius: var(--control-radius);
padding: 0 10px;
line-height: 1.2;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
opacity: 1;
}
@supports (-webkit-touch-callout: none) {
input[type="date"],
input[type="month"] {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 18px;
padding-right: 36px;
}
}
/* ==========================================================================
2. SCROLL AUTORISÉ
========================================================================== */
#view-home {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
gap: var(--gap);
margin: 0 auto;
padding: 8px 12px calc((var(--gap) * 2) + var(--safe-bottom));
overflow-anchor: none;
}
.home-main-card {
flex: 0 0 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--gap);
background: #ffffff;
border: 1px solid #cfd7e2;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(18, 32, 56, 0.08);
}
/* ==========================================================================
3. HEADER FIXE (MENU + ÉDITER)
========================================================================== */
.home-header {
position: sticky;
top: 0;
z-index: 5;
display: flex;
justify-content: flex-end;
align-items: center;
background: transparent;
padding-top: 12px;
}
/* Bouton Éditer */
#edit-btn {
font-size: 1rem;
font-weight: 600;
background: transparent;
border: none;
color: var(--color-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
#edit-btn::after {
content: "";
width: 18px;
height: 18px;
display: inline-block;
background-color: var(--color-muted);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('data:image/svg+xml;utf8,');
}
/* ==========================================================================
4. NAVIGATION MOIS (FLÈCHES)
========================================================================== */
.month-nav {
display: flex;
align-items: center;
gap: 84px;
margin-top: 16px;
justify-content: center;
}
.month-nav-with-today {
gap: 18px;
}
.month-arrow {
width: 28px;
height: 28px;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
}
.month-arrow::before {
content: "";
width: 18px;
height: 18px;
display: block;
background-color: var(--color-accent);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.arrow-left::before {
mask-image: url('data:image/svg+xml;utf8,');
}
.arrow-right::before {
mask-image: url('data:image/svg+xml;utf8,');
}
.month-today-btn {
height: 28px;
padding: 0 6px;
border-radius: 0;
border: none;
background: transparent;
color: var(--color-accent);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
position: relative;
}
.month-today-btn:active {
transform: scale(0.98);
}
.month-today-btn::after {
content: "";
position: absolute;
left: 6px;
right: 6px;
bottom: -2px;
height: 1px;
background: var(--color-accent);
opacity: 0.45;
}
.month-today-btn:focus-visible {
color: var(--color-ink);
}
.month-today-btn:focus-visible::after {
opacity: 0.85;
}
.month-today-btn:active::after {
opacity: 1;
}
/* ==========================================================================
5. HEADER JOUR ACTIF — MAQUETTE
========================================================================== */
.day-header {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(20px, 5vw, 56px);
align-items: start;
margin: 0;
max-width: none;
width: 100%;
}
/* Colonne gauche */
.day-header-left {
display: flex;
flex-direction: column;
gap: 6px;
max-width: clamp(140px, 38vw, 280px);
}
.day-header-day {
font-size: clamp(6rem, calc(7vh + 2vw), 11rem);
line-height: 0.95;
font-weight: 800;
color: var(--color-day);
letter-spacing: -0.02em;
text-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.day-header-month {
font-size: 1.4rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-muted);
opacity: 0.85;
}
.day-header-year {
font-size: 1.1rem;
color: var(--color-muted);
opacity: 0.8;
}
/* Colonne droite */
.day-header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
justify-self: end;
}
.day-header-nav {
display: inline-flex;
align-items: center;
gap: 12px;
}
.day-header-service {
font-size: 2.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-service);
}
.day-header-time-row.rest-warning {
align-items: baseline;
column-gap: 8px;
}
.day-header-time-row.rest-warning::before {
content: "";
width: 2em;
height: 2em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 5 100 79'%3E%3Cpath d='M50 5 L95 84 H5 Z' fill='%23fff200' stroke='%231f1f1f' stroke-width='8' stroke-linejoin='round'/%3E%3Crect x='45' y='30' width='10' height='30' rx='5' fill='%231f1f1f'/%3E%3Ccircle cx='50' cy='71' r='6' fill='%231f1f1f'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center bottom;
flex: 0 0 auto;
}
.day-header-service.repos {
color: #3a3a3a;
font-weight: 700;
}
.day-header-service.conges {
color: #3a3a3a;
font-weight: 700;
}
.day-header-time {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-home-info);
font-variant-numeric: tabular-nums;
line-height: 1.3;
}
.day-header-time-row {
display: flex;
align-items: baseline;
justify-content: flex-end;
width: 100%;
}
.day-extra-label {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-muted);
white-space: nowrap;
text-align: right;
margin-top: 4px;
}
.day-holiday-label {
font-size: 0.75rem;
font-weight: 700;
color: #b25a5a;
text-align: right;
margin-top: 4px;
}
.day-time-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 6px;
margin: 2px 0;
}
.day-time-start {
text-align: right;
}
.day-time-sep {
text-align: center;
}
.day-time-end {
text-align: left;
}
.day-header-duration {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-home-info);
margin-top: 2px;
}
.day-header-panier {
font-size: 1rem;
font-weight: 700;
color: var(--color-home-info);
margin-top: 2px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.day-header-panier[hidden] {
display: none !important;
}
.alarm-resync-actions {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-end;
}
.alarm-resync-actions[hidden] {
display: none !important;
}
.alarm-resync-btn {
height: 32px;
border-radius: 999px;
border: 1px solid #d2d2d2;
background: #ffffff;
color: var(--color-ink);
font-size: 0.8rem;
font-weight: 600;
padding: 0 12px;
cursor: pointer;
white-space: nowrap;
}
.alarm-resync-btn:active {
transform: scale(0.98);
}
.alarm-resync-dismiss {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid #c8c8c8;
background: #ffffff;
color: var(--color-muted);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.alarm-resync-dismiss::before,
.alarm-resync-dismiss::after {
content: "";
position: absolute;
width: 12px;
height: 1.8px;
background: #676767;
border-radius: 2px;
top: 50%;
left: 50%;
}
.alarm-resync-dismiss::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.alarm-resync-dismiss::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.alarm-resync-dismiss:active {
transform: scale(0.96);
}
.panier-icon {
width: 34px;
height: 34px;
display: inline-block;
background-image: url("../assets/images/breakfast.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.home-tax-real-sheet {
position: fixed;
left: 50%;
bottom: calc(10px + var(--safe-bottom));
transform: translateX(-50%);
width: calc(100% - 20px);
max-width: 560px;
z-index: 980;
pointer-events: none;
}
.home-tax-real-notice {
margin: 0;
padding: 12px 12px 10px;
border: 1px solid rgba(35, 134, 200, 0.28);
border-left: 4px solid var(--color-accent);
border-radius: 12px;
background: #f6fbff;
box-shadow: 0 12px 24px rgba(18, 32, 56, 0.14);
display: flex;
flex-direction: column;
gap: 6px;
pointer-events: auto;
position: relative;
}
.home-tax-real-close-btn {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
border: none;
border-radius: 999px;
background: transparent;
cursor: pointer;
}
.home-tax-real-close-btn::before,
.home-tax-real-close-btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 1.8px;
background: #5e6b79;
border-radius: 3px;
}
.home-tax-real-close-btn::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.home-tax-real-close-btn::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.home-tax-real-close-btn:active {
transform: scale(0.96);
}
.home-tax-real-notice-title {
margin: 0;
padding-right: 26px;
font-size: 0.9rem;
font-weight: 700;
color: #14395a;
}
.home-tax-real-notice-text {
margin: 0;
font-size: 0.76rem;
line-height: 1.3;
color: #3b4f63;
}
.home-tax-real-notice-actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.home-tax-real-discover-btn {
height: 28px;
border-radius: 8px;
border: none;
background: var(--color-accent);
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.2px;
padding: 0 10px;
cursor: pointer;
}
.home-tax-real-discover-btn:active {
transform: scale(0.98);
}
.home-tax-real-later-btn {
height: 28px;
border-radius: 8px;
border: 1px solid #c9d7e8;
background: #ffffff;
color: #51667b;
font-size: 0.76rem;
font-weight: 600;
padding: 0 10px;
cursor: pointer;
}
.home-tax-real-later-btn:active {
transform: scale(0.98);
}
.home-tax-real-hide-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.76rem;
color: #526579;
align-self: flex-end;
}
.home-tax-real-hide-checkbox {
width: 16px;
height: 16px;
margin: 0;
}
/* ==========================================================================
5bis. ÉDITION JOUR — PANNEAU DE SUGGESTIONS
========================================================================== */
.edit-panel {
margin: 8px 18px 0;
padding: 16px;
background: #ffffff;
border-radius: 6px;
border: 1px solid #c9c9c9;
box-shadow: none;
}
.edit-panel-label {
font-size: 0.9rem;
color: var(--color-muted);
margin-bottom: 8px;
}
.edit-panel-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.edit-panel-label-row .guided-back-btn {
margin: 0;
padding: 4px 8px;
width: auto;
font-size: 0.85rem;
height: 30px;
}
.edit-panel-input {
width: 100%;
height: 44px;
border-radius: 6px;
border: 1px solid #c8c8c8;
background: var(--input-bg);
background-image: none;
padding: 0 12px;
font-size: 1rem;
color: var(--color-ink);
outline: none;
}
.edit-panel-input:focus {
border-color: #1f1f1f;
box-shadow: none;
}
.edit-panel-suggestions {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
max-height: 40vh;
overflow-y: auto;
padding-right: 4px;
-webkit-overflow-scrolling: touch;
}
.suggest-btn {
width: 100%;
height: 44px;
border-radius: 12px;
border: 1px solid #cfcfcf;
background: #ffffff;
font-size: 1rem;
font-weight: 600;
color: var(--color-ink);
cursor: pointer;
}
.suggest-btn:active {
transform: scale(0.98);
}
/* ==========================================================================
6. GUIDED MONTH — SAISIE DU PLANNING
========================================================================== */
#view-guided-month {
display: flex;
flex-direction: column;
min-height: 0;
gap: var(--gap);
padding: calc(84px + var(--safe-top)) var(--content-x) calc((var(--gap) * 2) + var(--safe-bottom));
box-sizing: border-box;
}
.guided-root {
display: flex;
flex-direction: column;
flex: 0 0 auto;
min-height: 0;
gap: var(--gap);
}
.saisie-content {
flex: 0 0 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--gap);
padding-top: 0;
}
.guided-header {
display: flex;
flex-direction: column;
gap: 6px;
}
.guided-month-label {
font-size: 0.85rem;
color: var(--color-muted);
text-transform: none;
}
.guided-day-number {
font-size: 5.2rem;
font-weight: 800;
color: var(--color-day);
line-height: 1;
}
.guided-day-number.guided-day-complete {
width: 104px;
height: 104px;
border-radius: 50%;
background: #111;
color: #fff;
font-size: 4rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto;
text-align: center;
}
.guided-weekday {
font-size: 0.9rem;
color: var(--color-muted);
}
.guided-services {
display: flex;
flex-direction: column;
flex: 0 0 auto;
min-height: 0;
padding-top: 0;
gap: 14px;
align-items: stretch;
}
.guided-rest-warning {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
margin-top: 14px;
padding: 16px 18px;
border-radius: 10px;
border: 1.5px solid rgba(0, 0, 0, 0.35);
background: #fff7b8;
color: #121212;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
white-space: pre-line;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.guided-rest-warning[hidden] {
display: none !important;
}
.guided-rest-warning-main {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 auto;
min-width: 0;
}
.guided-rest-warning-title {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.25;
color: #121212;
}
.guided-rest-warning-summary {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
color: #1f1f1f;
}
.guided-rest-warning-toggle {
margin-top: 2px;
padding: 0;
border: none;
background: transparent;
text-align: left;
font-size: 0.9rem;
font-weight: 700;
color: #2a2a2a;
cursor: pointer;
}
.guided-rest-warning-details {
margin-top: 2px;
white-space: pre-line;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.35;
color: #2a2a2a;
}
.guided-rest-warning::before {
content: "";
display: block;
width: 52px;
min-width: 52px;
height: 46px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 5 L95 84 H5 Z' fill='%23fff7b8' stroke='%231f1f1f' stroke-width='6' stroke-linejoin='round'/%3E%3Crect x='45' y='30' width='10' height='30' rx='5' fill='%231f1f1f'/%3E%3Ccircle cx='50' cy='71' r='6' fill='%231f1f1f'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex: 0 0 auto;
margin-top: 0;
}
.guided-cancel-slot {
margin-top: 112px;
width: 100%;
}
.guided-root.guided-complete-mode .guided-day-number.guided-day-complete {
margin-top: 28px;
}
.guided-root.guided-complete-mode .saisie-content {
padding-top: 72px;
}
.guided-root.guided-complete-mode .guided-stats + .guided-action {
margin-top: 55px;
}
.guided-root.guided-complete-mode .guided-stats {
margin: 20px auto 0;
}
.guided-primary-grid,
.guided-lines-grid {
display: grid;
gap: 6px;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.guided-primary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.guided-lines-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.edit-day-view .edit-day-suggestions-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
max-width: 420px;
}
#view-guided-month .guided-lines-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.guided-section-label {
font-size: 0.7rem;
letter-spacing: 2px;
color: #959595;
margin-top: 14px;
}
.guided-btn {
min-height: 30px;
width: 100%;
border-radius: 4px;
border: 1px solid #bfbfbf;
background: #ffffff;
background-image: none;
font-size: 0.8rem;
font-weight: 600;
color: #2a2a2a;
cursor: pointer;
padding: 3px 6px;
min-width: 0;
box-shadow: none;
}
.guided-btn-primary {
background: #ffffff;
border-color: #b5b5b5;
font-weight: 700;
}
.guided-btn-secondary {
background: #ffffff;
border-color: #cdcdcd;
color: #3a3a3a;
}
.guided-btn.active {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
.guided-btn.ghost {
background: var(--color-btn-dark);
border-color: var(--color-btn-dark);
color: #fff;
}
.guided-back-btn {
width: 100%;
margin: 0;
}
.guided-cancel-btn {
min-height: 32px;
width: 100%;
border-radius: 4px;
border: 1px solid #c8c8c8;
background: transparent;
color: var(--color-muted);
font-weight: 600;
cursor: pointer;
padding: 4px 8px;
}
.guided-complete-title {
font-size: 1.42rem;
font-weight: 700;
text-align: center;
margin-top: 0;
transform: translateY(-26px);
}
.guided-complete-subtitle {
font-size: 1.12rem;
color: var(--color-muted);
text-align: center;
margin-top: 0;
margin-bottom: 0;
transform: translateY(-24px);
}
.guided-stats {
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
padding: 12px 0;
width: 100%;
max-width: 340px;
}
.guided-stat-row {
display: flex;
justify-content: space-between;
font-size: 0.95rem;
color: #2d2d2d;
gap: 28px;
}
.guided-stat-row strong {
font-size: 1rem;
}
.guided-action {
height: 48px;
width: 100%;
border-radius: 4px;
border: 1px solid #bfbfbf;
background: #ffffff;
font-size: 0.95rem;
font-weight: 600;
color: #2a2a2a;
cursor: pointer;
}
.guided-action.primary {
background: var(--color-btn-dark);
color: #fff;
border-color: var(--color-btn-dark);
}
.guided-action.ghost {
background: transparent;
color: var(--color-muted);
border-color: #c8c8c8;
}
.guided-action.alarm-sync-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.guided-action.alarm-sync-action .menu-badge {
margin-left: 0;
}
@media (hover: none) and (pointer: coarse) {
.guided-action {
height: 48px;
min-height: 48px;
font-size: 0.98rem;
font-weight: 700;
padding: 0 12px;
}
}
@media (hover: none) and (pointer: coarse) and (max-width: 430px) {
.guided-action {
height: 44px;
min-height: 44px;
padding: 0 10px;
}
.guided-root.guided-complete-mode .guided-services {
gap: 8px;
}
.guided-complete-title {
margin-top: 8px;
transform: none;
}
.guided-complete-subtitle {
margin-top: 4px;
transform: none;
}
.guided-root.guided-complete-mode .guided-day-number.guided-day-complete {
margin-top: 10px;
}
.guided-root.guided-complete-mode .saisie-content {
padding-top: 24px;
}
.guided-root.guided-complete-mode .guided-stats {
margin-top: 10px;
}
.guided-root.guided-complete-mode .guided-stats + .guided-action {
margin-top: 20px;
}
}
/* ==========================================================================
6bis. VUES OUTILS (CONGES / SAISON / TELEPHONE)
========================================================================== */
.settings-view {
/* LAYOUT */
display: flex;
flex-direction: column;
gap: var(--gap);
padding: calc(84px + var(--safe-top)) var(--content-x) calc(var(--gap) * 2);
}
.settings-view.compact {
padding: 0 0 calc(var(--gap) * 2);
}
.settings-page-variant .settings-subtitle {
margin-top: 12px;
}
.settings-page-variant .settings-header + .settings-card {
margin-top: 0;
}
.settings-card-spacing-md .settings-card {
padding: var(--card-pad);
gap: var(--gap-sm);
}
.settings-card-spacing-md .settings-actions {
gap: var(--gap-sm);
}
.settings-card-spacing-lg .settings-card {
padding: var(--card-pad);
gap: var(--gap-sm);
}
.settings-card-spacing-lg .settings-actions {
gap: var(--gap-sm);
}
.phone-change-view .settings-note {
line-height: 1.55;
margin-top: -2px;
}
.phone-change-view .settings-note + .settings-btn {
margin-top: -6px;
}
.phone-change-view .settings-btn + .settings-note {
margin-top: 24px;
}
.phone-change-view .settings-subtitle {
margin-top: 12px;
}
.phone-change-view .settings-btn.primary {
background: var(--color-btn-dark);
border-color: var(--color-btn-dark);
}
.settings-header + .tabs-bar {
margin-top: 0;
}
.reset-view .settings-note {
font-size: 0.92rem;
line-height: 1.45;
}
.conges-periods-view .settings-periods {
gap: 16px;
}
.conges-periods-view .settings-period {
gap: 12px;
padding: 12px;
}
.conges-periods-view .settings-period-grid {
gap: 12px;
}
.conges-periods-view .settings-btn.primary {
background: var(--color-btn-dark);
border-color: var(--color-btn-dark);
}
.conges-periods-view .tabs-bar {
display: flex;
justify-content: center;
gap: 40px;
border-bottom: none;
padding-bottom: 2px;
}
.conges-periods-view .tabs-btn {
height: auto;
min-height: 38px;
padding: 8px 2px 10px;
border: none;
border-radius: 0;
background: transparent;
color: #5f6c7f;
font-size: 1.2rem;
font-weight: 600;
text-align: left;
}
.conges-periods-view .tabs-btn.active {
background: transparent;
color: var(--color-accent);
border: none;
box-shadow: none;
background-image: linear-gradient(var(--color-accent), var(--color-accent));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 2px;
}
.alarm-view .settings-note {
line-height: 1.45;
}
.alarm-view .settings-card {
gap: 14px;
}
.alarm-view .alarm-section {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border-radius: 10px;
border: 1px solid #d4d4d4;
background: #ffffff;
}
.alarm-view .alarm-section-title {
margin: 0 0 2px;
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-muted);
}
.alarm-view .alarm-section .settings-toggle {
margin: 0;
}
.alarm-view .alarm-section .settings-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.alarm-view .alarm-section-settings .settings-btn.primary {
background: var(--color-btn-dark);
border-color: var(--color-btn-dark);
}
.alarm-view .alarm-check-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.alarm-view .alarm-diagnostics-toggle,
.alarm-view .alarm-install-toggle,
.alarm-view .alarm-checks-toggle,
.alarm-view .alarm-settings-toggle {
align-self: flex-start;
margin-top: 2px;
padding: 0;
border: none;
background: transparent;
color: var(--color-muted);
font-size: 0.85rem;
text-decoration: underline;
cursor: pointer;
}
.alarm-view .alarm-settings-panel {
display: flex;
flex-direction: column;
gap: 8px;
}
.alarm-view .alarm-settings-panel[hidden] {
display: none;
}
.alarm-view .alarm-install-panel {
display: flex;
flex-direction: column;
gap: 8px;
}
.alarm-view .alarm-install-panel[hidden] {
display: none;
}
.alarm-view .alarm-checks-panel {
display: flex;
flex-direction: column;
gap: 8px;
}
.alarm-view .alarm-checks-panel[hidden] {
display: none;
}
.alarm-view .alarm-diagnostics-panel {
display: flex;
flex-direction: column;
gap: 8px;
}
.alarm-view .alarm-diagnostics-panel[hidden] {
display: none;
}
.alarm-view .alarm-footer-actions {
padding-top: 6px;
border-top: 1px solid #d6d6d6;
}
.alarm-view .alarm-footer-actions .settings-btn {
width: 100%;
}
.alarm-help-btn {
background: transparent;
color: var(--color-muted);
border-color: #c8c8c8;
}
.alarm-notice-overlay {
position: fixed;
inset: 0;
z-index: 1300;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right))
calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));
}
.alarm-notice-modal {
width: min(100%, 420px);
background: #ffffff;
border: 1px solid #d0d0d0;
border-radius: 10px;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.alarm-notice-title {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: var(--color-ink);
}
.alarm-notice-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.alarm-notice-body p {
margin: 0;
font-size: 0.9rem;
line-height: 1.45;
color: #2d2d2d;
}
body.onboarding-lock {
overscroll-behavior: none;
}
.onboarding-overlay {
position: fixed;
inset: 0;
z-index: 10100;
background: rgba(20, 24, 31, 0.14);
display: flex;
align-items: flex-end;
justify-content: center;
padding: calc(18px + var(--safe-top)) calc(18px + var(--safe-right))
calc(18px + var(--safe-bottom)) calc(18px + var(--safe-left));
pointer-events: none;
}
.onboarding-modal {
pointer-events: auto;
width: min(100%, 520px);
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 14px;
box-shadow: 0 20px 36px rgba(0, 0, 0, 0.24);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.onboarding-badge {
margin: 0;
font-size: 0.75rem;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--color-muted);
}
.onboarding-title {
margin: 0;
font-size: 1.15rem;
color: var(--color-ink);
}
.onboarding-body {
margin: 0;
font-size: 0.95rem;
line-height: 1.45;
color: #3f4b61;
}
.onboarding-actions {
margin-top: 4px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.onboarding-spotlight {
position: relative;
z-index: 1;
border-radius: 12px;
outline: 2px solid rgba(255, 255, 255, 0.95);
box-shadow:
0 0 0 4px rgba(243, 112, 30, 0.36),
0 14px 28px rgba(0, 0, 0, 0.35);
}
/* TABS */
.tabs-view {
height: 100%;
display: flex;
flex-direction: column;
padding: calc(84px + var(--safe-top)) var(--content-x) calc(var(--gap) * 2);
gap: var(--gap);
overflow-x: hidden;
box-sizing: border-box;
}
.tabs-header {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 12px;
}
.tabs-back {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #ffffff;
color: #1d1d1d;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
}
.tabs-title {
font-size: 1.35rem;
font-weight: 700;
color: var(--color-ink);
}
.tabs-bar {
position: sticky;
top: calc(64px + var(--safe-top));
z-index: 3;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0;
border: none;
background: transparent;
}
.tabs-btn {
min-height: 40px;
height: 40px;
padding: 0 10px;
border-radius: 0;
border: none;
background: transparent;
font-size: 0.95rem;
font-weight: 600;
color: #5f6c7f;
cursor: pointer;
}
.tabs-btn.active {
background: transparent;
color: var(--color-accent);
border: none;
box-shadow: none;
background-image: linear-gradient(var(--color-accent), var(--color-accent));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 2px;
}
.tabs-content {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
width: 100%;
box-sizing: border-box;
margin-top: 0;
scrollbar-width: none;
}
.tabs-track {
height: 100%;
display: flex;
transition: transform 0.25s ease;
box-sizing: border-box;
}
.tabs-track.dragging {
transition: none;
}
.tab-page {
display: flex;
flex-direction: column;
gap: var(--gap);
width: 100%;
flex: 0 0 auto;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
padding-top: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
scrollbar-width: none;
}
.tabs-content::-webkit-scrollbar,
.tab-page::-webkit-scrollbar {
width: 0;
height: 0;
}
.tab-page .settings-card {
margin-top: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.tabs-view .settings-card {
padding: var(--card-pad);
}
.tab-page .settings-actions {
width: 100%;
}
.tab-page .settings-actions button {
width: 100%;
}
.settings-header {
display: flex;
flex-direction: column;
gap: 6px;
}
.settings-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-ink);
}
.settings-subtitle {
font-size: 0.9rem;
color: var(--color-muted);
}
/* CARDS */
.settings-card {
display: flex;
flex-direction: column;
gap: var(--gap-sm);
padding: var(--card-pad);
background: #ffffff;
border: var(--hairline) solid var(--card-border);
border-radius: var(--radius);
box-shadow: var(--card-shadow);
}
.settings-card :is(h1, h2, h3, .summary-card-title, .tax-real-card-title) {
line-height: 1.2;
margin: 0 0 var(--gap-sm);
}
.settings-card .settings-subtitle {
line-height: 1.35;
margin: 0 0 var(--gap-sm);
}
.legal-card {
gap: 12px;
}
.legal-summary {
font-size: 0.85rem;
color: var(--color-muted);
}
.legal-link {
font-size: 0.85rem;
color: var(--color-ink);
text-decoration: underline;
}
.legal-text {
white-space: pre-wrap;
font-size: 0.8rem;
line-height: 1.65;
background: #ffffff;
border: 1px solid #d6d6d6;
border-radius: 8px;
padding: 10px;
max-height: 50vh;
overflow: auto;
}
.settings-periods {
display: flex;
flex-direction: column;
gap: 12px;
}
.settings-period {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
border-radius: 10px;
border: 1px solid #d6d6d6;
background: #ffffff;
}
.settings-period-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.settings-period-title {
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-muted);
}
.settings-period-remove {
height: 28px;
border-radius: 6px;
border: 1px solid #d3d3d3;
background: #ffffff;
font-size: 0.8rem;
cursor: pointer;
}
.settings-period-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.settings-date-range {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.settings-date-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.settings-date-field input[type="date"] {
width: 100%;
max-width: 190px;
}
.settings-card label {
font-size: 0.85rem;
color: var(--color-muted);
}
.settings-card input {
height: var(--input-height);
min-height: var(--input-height);
border-radius: var(--control-radius);
border: 1px solid #d6d6d6;
padding: 0 10px;
background: var(--input-bg);
background-image: none;
line-height: 1.2;
}
.settings-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.edit-day-view .settings-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 6px;
}
.edit-day-view .edit-day-card {
gap: 14px;
}
.edit-day-view .edit-day-summary-block {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #d6d6d6;
background: #ffffff;
}
.edit-day-view .edit-day-summary-line {
margin: 0;
line-height: 1.35;
}
.edit-day-view .edit-day-summary-line-primary {
font-size: 0.95rem;
font-weight: 700;
color: #1f2a3d;
}
.edit-day-view .edit-day-summary-line-meta {
font-size: 0.82rem;
color: #3f4b61;
}
.edit-day-view .edit-day-section {
display: flex;
flex-direction: column;
gap: 14px;
}
.edit-day-view .edit-day-disclosure {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px;
border: 1px solid #d6dce5;
border-radius: 10px;
background: #f9fbfe;
}
.edit-day-view .edit-day-disclosure-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
margin: 0;
padding: 0;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
}
.edit-day-view .edit-day-disclosure-title {
margin: 0;
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-muted);
}
.edit-day-view .edit-day-disclosure-state {
font-size: 0.8rem;
color: #5f6c7f;
text-decoration: underline;
}
.edit-day-view .edit-day-disclosure-panel {
display: flex;
flex-direction: column;
gap: 10px;
}
.edit-day-view .edit-day-disclosure-panel[hidden] {
display: none;
}
.edit-day-view .edit-day-section-title {
margin: 0 0 2px;
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-muted);
}
.edit-day-view .edit-day-label {
font-size: 0.85rem;
color: var(--color-muted);
}
.edit-day-view .edit-day-help {
margin: 0;
font-size: 0.85rem;
color: var(--color-muted);
}
.edit-day-view .settings-card .edit-day-section input.settings-input {
height: var(--input-height);
min-height: var(--input-height);
}
.edit-day-view .edit-day-extra-type {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 40px;
border: 0 !important;
border-bottom: none;
background: transparent !important;
box-shadow: none !important;
padding-bottom: 2px;
margin-bottom: 2px;
}
.edit-day-view .edit-day-chip-input {
display: none !important;
appearance: none;
-webkit-appearance: none;
opacity: 0;
pointer-events: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
.edit-day-view .edit-day-chip {
all: unset;
min-height: 34px;
padding: 6px 2px 8px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent !important;
appearance: none !important;
-webkit-appearance: none !important;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.2;
color: #5f6c7f;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: flex-start;
box-shadow: none !important;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.edit-day-view .edit-day-chip::before,
.edit-day-view .edit-day-chip::after {
content: none !important;
display: none !important;
}
.edit-day-view .edit-day-chip:hover,
.edit-day-view .edit-day-chip:active {
background: transparent !important;
}
.edit-day-view .edit-day-chip.is-selected,
.edit-day-view .edit-day-chip-input:checked + .edit-day-chip {
border: 0;
border-bottom-color: transparent !important;
background: transparent !important;
color: var(--color-accent) !important;
box-shadow: none !important;
background-image: linear-gradient(var(--color-accent), var(--color-accent)) !important;
background-repeat: no-repeat !important;
background-position: 0 100% !important;
background-size: 100% 2px !important;
}
.edit-day-view .edit-day-chip:focus,
.edit-day-view .edit-day-chip:focus-visible,
.edit-day-view .edit-day-chip-input:focus + .edit-day-chip,
.edit-day-view .edit-day-chip-input:focus-visible + .edit-day-chip {
outline: none !important;
background: transparent !important;
}
.edit-day-view .edit-day-chip.is-disabled {
opacity: 0.45;
pointer-events: none;
}
@media (max-width: 430px) {
.edit-day-view .edit-day-extra-type,
.edit-day-view .edit-day-extra-type * {
background: transparent !important;
box-shadow: none !important;
}
.edit-day-view .edit-day-chip {
appearance: none !important;
-webkit-appearance: none !important;
border: 0 !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
outline: none !important;
text-shadow: none !important;
}
.edit-day-view .edit-day-chip.is-selected,
.edit-day-view .edit-day-chip-input:checked + .edit-day-chip {
border-bottom-color: transparent !important;
box-shadow: none !important;
color: var(--color-accent) !important;
background-image: linear-gradient(var(--color-accent), var(--color-accent)) !important;
background-repeat: no-repeat !important;
background-position: 0 100% !important;
background-size: 100% 2px !important;
}
}
.edit-day-view .edit-day-panier-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 38px;
}
.switch {
position: relative;
display: inline-block;
width: var(--switch-width);
height: var(--switch-height);
flex: 0 0 auto;
}
.switch input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.switch .slider {
position: absolute;
inset: 0;
border-radius: 999px;
border: 1px solid #d0d0d0;
background: #ffffff;
box-sizing: border-box;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.switch .slider::before {
content: "";
position: absolute;
top: var(--switch-inset);
left: var(--switch-inset);
width: var(--switch-knob);
height: var(--switch-knob);
border-radius: 50%;
background: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.switch input:checked + .slider {
background: var(--color-accent);
border-color: var(--color-accent);
}
.edit-day-view .settings-actions .settings-btn.primary {
background: var(--color-btn-dark);
border-color: var(--color-btn-dark);
}
.switch input:checked + .slider::before {
transform: translateX(calc(var(--switch-width) - var(--switch-knob) - (var(--switch-inset) * 2)));
}
.switch input:disabled + .slider {
opacity: 0.55;
}
.edit-day-view .edit-day-panier-help {
display: none;
margin-top: 2px;
}
.edit-day-view .edit-day-panier-help[data-panier-on="true"] {
display: none;
}
.edit-day-view .settings-actions .settings-btn {
min-height: 40px;
}
.settings-btn {
height: var(--btn-height);
min-height: var(--btn-height);
border-radius: var(--control-radius);
border: 1px solid #d3d3d3;
background: #ffffff;
font-size: 0.9rem;
font-weight: 600;
line-height: 1;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.settings-btn.primary {
border-color: var(--color-btn-dark);
background: var(--color-btn-dark);
color: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}
.settings-note {
font-size: 0.8rem;
color: var(--color-muted);
}
.settings-status {
font-size: 0.85rem;
color: var(--color-ink);
}
/* Swaps UI */
.swaps-page {
width: 100%;
--swaps-space-8: 8px;
--swaps-space-16: 16px;
--swaps-space-24: 24px;
--swaps-field-height: 48px;
--swaps-field-radius: 10px;
--swaps-field-padding-x: 12px;
--swaps-field-border: #c8d3df;
--swaps-field-border-focus: var(--color-accent);
--swaps-field-bg: #ffffff;
--swaps-field-text: #1f2d3d;
--swaps-label-color: #4f6076;
--swaps-placeholder-color: #9aa8b7;
--swaps-focus-ring: rgba(35, 134, 200, 0.22);
--swaps-disabled-bg: #f1f4f8;
--swaps-disabled-text: #8d99a6;
--swaps-calendar-icon-opacity: 0.58;
}
.swaps-root {
height: 100dvh;
height: calc(var(--app-vh, 1vh) * 100);
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.swaps-root .settings-header {
flex: 0 0 auto;
}
.swaps-accordion {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
}
.swaps-dashboard-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.swaps-dashboard-label {
margin: 2px 2px 0;
color: var(--color-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.swaps-global-status {
margin-top: 2px;
color: #3f6485;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.35;
}
.swaps-new-offers-since-visit {
margin-top: 2px;
color: #4f6f8f;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.3;
}
.swaps-last-activity {
margin-top: 2px;
color: #6f8096;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
}
.swaps-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.swaps-search-toggle {
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid #d7e0ea;
background: #fbfdff;
color: #6a7d90;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.swaps-search-toggle-icon {
width: 16px;
height: 16px;
display: block;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('data:image/svg+xml;utf8,');
}
.swaps-search-panel {
margin-top: 6px;
padding: 8px 10px;
border: 1px solid #dee6ef;
border-radius: 10px;
background: #fcfdff;
display: flex;
flex-direction: column;
gap: 6px;
}
.swaps-search-panel-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.swaps-search-panel label {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
color: #6f8096;
}
.swaps-search-clear {
border: 0;
background: transparent;
color: #7f8fa3;
font-size: 0.76rem;
font-weight: 600;
padding: 0;
cursor: pointer;
}
.swaps-search-feedback {
margin: 0;
color: #6f8096;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.35;
}
.swaps-panel-nav {
flex: 0 0 auto;
display: flex;
}
.swaps-panel-nav .settings-btn {
width: auto;
}
.swaps-card {
gap: 10px;
}
.swaps-card.swaps-card-priority {
background: #f4f8fd;
border-color: #bfd2e6;
box-shadow: 0 8px 18px rgba(18, 32, 56, 0.1);
}
.swaps-card.swaps-card-secondary {
background: #fbfcfe;
border-color: #d7dee7;
box-shadow: 0 3px 8px rgba(18, 32, 56, 0.045);
}
.swaps-section-title {
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--color-ink);
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.swaps-section-title-text {
color: inherit;
font-weight: inherit;
}
.swaps-section-title-count {
color: var(--color-muted);
font-weight: 600;
}
.swaps-collapsible-toggle {
width: 100%;
border: 0;
background: transparent;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: left;
cursor: pointer;
}
.swaps-collapsible-toggle:focus {
outline: none;
}
.swaps-collapsible-toggle:focus-visible {
outline: none;
border-radius: 10px;
box-shadow: 0 0 0 4px var(--swaps-focus-ring);
}
.swaps-collapsible-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.swaps-collapsible-priority-label {
display: inline-flex;
align-items: center;
margin-top: -2px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid #c6d7e9;
background: #eef5fc;
color: #4b6784;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
}
.swaps-collapsible-title-row {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.swaps-collapsible-trailing {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
align-self: center;
}
.swaps-collapsible-notify-slot {
width: 28px;
min-width: 28px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.swaps-collapsible-badge {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 5px 10px;
border-radius: 10px;
border: 1px solid #d5e1ec;
background: #f4f8fc;
color: #4f6076;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
white-space: normal;
}
.swaps-collapsible-badge.is-error {
border-color: #efcece;
background: #fff6f6;
color: #8a5a5a;
}
.swaps-collapsible-notify {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex: 0 0 auto;
}
.swaps-collapsible-notify::before {
content: "";
width: 16px;
height: 16px;
display: block;
background-color: var(--color-accent-dark);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('data:image/svg+xml;utf8,');
}
.swaps-collapsible-notify-count {
min-width: 14px;
height: 14px;
padding: 0 3px;
position: absolute;
top: -2px;
right: -2px;
border-radius: 999px;
background: var(--color-accent);
color: #ffffff;
font-size: 0.62rem;
font-weight: 700;
line-height: 14px;
text-align: center;
}
.swaps-collapsible-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
border: 0;
background: transparent;
color: #6f8096;
font-size: 0;
font-weight: 600;
line-height: 1;
flex: 0 0 auto;
opacity: 0.9;
transform: rotate(0deg);
transition: transform 160ms ease;
}
.swaps-collapsible-icon::before {
content: "";
width: 18px;
height: 18px;
display: block;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('data:image/svg+xml;utf8,');
}
.swaps-collapsible-toggle[aria-expanded="true"] .swaps-collapsible-icon:not(.is-back) {
transform: rotate(90deg);
}
.swaps-collapsible-icon.is-back {
transform: none;
}
.swaps-collapsible-icon.is-back::before {
mask-image: url('data:image/svg+xml;utf8,');
}
.swaps-collapsible-section {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
gap: 0;
}
.swaps-collapsible-section.is-open {
flex: 1 1 auto;
}
.swaps-collapsible-section.is-closed {
flex: 0 0 auto;
}
.swaps-collapsible-section.is-closed .swaps-collapsible-body {
display: none;
}
.swaps-collapsible-section.is-open .swaps-collapsible-body {
display: block;
}
.swaps-collapsible-body {
margin-top: 0;
flex: 0 0 auto;
min-height: 0;
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-2px);
pointer-events: none;
transition:
opacity 140ms ease,
transform 140ms ease;
}
.swaps-collapsible-body.is-open {
margin-top: 14px;
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow: auto;
-webkit-overflow-scrolling: touch;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: opacity 180ms ease, transform 180ms ease;
}
.card-title {
font-size: 22px;
font-weight: 700;
}
.swaps-form-row {
display: flex;
flex-direction: column;
gap: var(--swaps-space-8);
}
.swaps-form-row + .swaps-form-row {
margin-top: var(--swaps-space-16);
}
.swaps-create-form {
display: flex;
flex-direction: column;
}
.swaps-create-field {
display: flex;
flex-direction: column;
gap: var(--swaps-space-8);
}
.swaps-create-field + .swaps-create-field {
margin-top: var(--swaps-space-16);
}
.swaps-card label {
margin: 0;
font-size: 0.88rem;
font-weight: 600;
color: var(--swaps-label-color);
}
.swaps-card input,
.swaps-card select {
width: 100%;
max-width: none;
height: var(--swaps-field-height);
min-height: var(--swaps-field-height);
border-radius: var(--swaps-field-radius);
border: 1px solid var(--swaps-field-border);
padding: 0 var(--swaps-field-padding-x);
background: var(--swaps-field-bg);
color: var(--swaps-field-text);
line-height: 1.2;
flex: none;
transition:
border-color 120ms ease,
box-shadow 120ms ease,
background-color 120ms ease,
color 120ms ease;
}
.swaps-card input::placeholder {
color: var(--swaps-placeholder-color);
opacity: 1;
}
.swaps-card input:focus,
.swaps-card input:focus-visible,
.swaps-card select:focus,
.swaps-card select:focus-visible {
outline: none;
border-color: var(--swaps-field-border);
box-shadow: none;
}
.swaps-card input:disabled,
.swaps-card select:disabled {
background: var(--swaps-disabled-bg);
color: var(--swaps-disabled-text);
border-color: #d7dee8;
cursor: not-allowed;
}
.swaps-card input[readonly],
.swaps-card select[readonly] {
background: var(--swaps-disabled-bg);
color: var(--swaps-disabled-text);
border-color: #d7dee8;
cursor: default;
}
.swaps-card .settings-btn:disabled {
opacity: 0.56;
cursor: not-allowed;
box-shadow: none;
}
.swaps-card input[type="number"] {
-moz-appearance: textfield;
}
.swaps-card input[type="number"]::-webkit-outer-spin-button,
.swaps-card input[type="number"]::-webkit-inner-spin-button {
margin: 0;
}
.swaps-card input[type="date"] {
padding-right: 48px;
color-scheme: light;
}
.swaps-card input[type="date"]::-webkit-calendar-picker-indicator {
width: 20px;
height: 20px;
padding: 14px;
margin-right: -10px;
cursor: pointer;
opacity: var(--swaps-calendar-icon-opacity);
filter: saturate(0) brightness(0.6);
}
.swaps-card input[type="date"]:disabled::-webkit-calendar-picker-indicator {
cursor: not-allowed;
opacity: 0.35;
}
.swaps-card input,
.swaps-card select,
.swaps-create-field #swaps-create-service-code,
.swaps-create-field #swaps-create-give-date,
.swaps-create-field #swaps-create-give-rest-date,
.swaps-create-field #swaps-create-give-rest-date-alt {
-webkit-appearance: auto;
appearance: auto;
}
.swaps-create-actions {
margin-top: var(--swaps-space-24);
}
.swaps-create-toggle-row {
margin-top: var(--swaps-space-8);
}
.alt-block {
margin-top: var(--swaps-space-16);
}
.alt-toggle {
border: 0;
background: transparent;
color: #6b7280;
padding: 0;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
text-align: left;
text-decoration: none;
margin-bottom: 16px;
}
.alt-toggle:focus,
.alt-toggle:focus-visible {
outline: none;
border-radius: 6px;
box-shadow: 0 0 0 4px var(--swaps-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
.alt-toggle:hover {
color: #4b5563;
}
}
#swaps-create-give-rest-date-alt::placeholder {
color: var(--swaps-placeholder-color);
opacity: 0.45;
}
#swaps-create-give-rest-date-alt:focus::placeholder {
opacity: 0.25;
}
.swaps-create-actions .settings-btn {
width: 100%;
min-height: var(--swaps-field-height);
}
.swaps-inline-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
min-width: 0;
}
.swaps-inline-row label {
margin: 0;
flex: 0 0 auto;
}
.swaps-inline-row input {
min-width: 0;
}
.swaps-inline-row #swaps-create-service-code {
flex: 0 0 112px;
width: 112px;
max-width: 112px;
-webkit-appearance: auto;
appearance: auto;
}
.swaps-inline-row #swaps-create-give-date {
flex: 1 1 0;
width: 0;
max-width: 154px;
-webkit-appearance: auto;
appearance: auto;
}
@media (max-width: 420px) {
.swaps-inline-row {
gap: 4px;
}
.swaps-inline-row #swaps-create-service-code {
flex-basis: 96px;
width: 96px;
max-width: 96px;
}
.swaps-inline-row #swaps-create-give-date {
max-width: 124px;
}
}
.swaps-actions-inline {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.swaps-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--color-muted);
box-shadow: none;
}
.swaps-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.swaps-item {
border: 1px solid #d6d6d6;
border-radius: 10px;
background: #ffffff;
padding: 10px;
display: flex;
flex-direction: column;
gap: 12px;
}
.swaps-offer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.swaps-offer-title {
margin: 0;
font-size: 1.02rem;
font-weight: 700;
color: var(--color-ink);
}
.swaps-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
border: 1px solid #d6d6d6;
color: #5f6c7f;
background: #f4f6f8;
}
.swaps-status-pill.is-pending {
color: #6b4a00;
border-color: rgba(240, 210, 139, 0.40);
background: rgba(255, 247, 223, 0.45);
}
.swaps-status-pill.is-open {
color: #1f5f3d;
border-color: #b9ddc8;
background: #e9f8ef;
}
.swaps-status-pill.is-validated {
color: #1f5f3d;
border-color: #b9ddc8;
background: #e9f8ef;
font-size: 0.78rem;
opacity: 0.85;
}
.swaps-status-pill.is-new {
color: #2f6385;
border-color: #c8dced;
background: #eef6fc;
font-size: 0.72rem;
}
.swaps-offer-rows {
display: flex;
flex-direction: column;
gap: 0;
}
.swaps-offer-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.swaps-offer-row:last-child {
margin-bottom: 0;
}
.swaps-offer-key {
color: var(--color-muted);
font-size: 0.86rem;
font-weight: 600;
flex: 0 0 42%;
}
.swaps-offer-value {
color: var(--color-ink);
font-size: 0.92rem;
font-weight: 700;
text-align: right;
flex: 0 1 190px;
max-width: 190px;
white-space: normal;
overflow-wrap: anywhere;
}
.swaps-transform {
background: #f7f9fc;
border: 1px solid #dfe7f0;
border-radius: 10px;
padding: 10px;
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 8px;
}
.swaps-create-preview {
margin-top: 12px;
}
.swaps-create-preview-section {
display: flex;
flex-direction: column;
gap: 6px;
}
.swaps-create-preview-section + .swaps-create-preview-section {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #dfe7f0;
}
.swaps-create-preview-section-title {
margin: 0;
color: #4f6076;
font-size: 0.84rem;
font-weight: 700;
}
.swaps-create-preview-note {
margin: 0;
color: #6f8096;
font-size: 0.82rem;
font-weight: 600;
}
.swaps-create-preview-choice-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.swaps-create-preview-single-line {
margin: 0;
display: grid;
grid-template-columns: 90px 24px 1fr;
align-items: center;
column-gap: 6px;
color: var(--color-ink);
font-size: 0.86rem;
line-height: 1.3;
}
.swaps-create-preview-choice-line {
margin: 0;
display: grid;
grid-template-columns: 12px 90px 24px 1fr;
align-items: center;
column-gap: 6px;
color: var(--color-ink);
font-size: 0.86rem;
line-height: 1.3;
}
.swaps-create-preview-bullet {
color: var(--color-muted);
text-align: center;
}
.swaps-create-preview-choice-date {
color: #4f6076;
font-weight: 600;
}
.swaps-create-preview-choice-arrow {
color: var(--color-muted);
font-weight: 600;
text-align: center;
}
.swaps-create-preview-choice-target {
font-weight: 600;
}
.swaps-transform-title {
margin: 0;
color: #4f6076;
font-size: 0.84rem;
font-weight: 700;
}
.swaps-transform-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.swaps-transform-row {
display: grid;
grid-template-columns: 90px 1fr 24px 1fr;
align-items: center;
column-gap: 8px;
}
.swaps-transform-date {
color: #4f6076;
font-size: 0.84rem;
font-weight: 600;
}
.swaps-transform-before,
.swaps-transform-after {
color: var(--color-ink);
font-size: 0.88rem;
line-height: 1.3;
min-width: 0;
}
.swaps-transform-before {
opacity: 1;
font-weight: 500;
}
.swaps-transform-after {
font-weight: 700;
}
.swaps-transform-arrow {
color: var(--color-muted);
font-size: 0.9rem;
font-weight: 600;
text-align: center;
}
.swaps-transform-muted {
color: var(--color-muted);
font-weight: 500;
}
.swaps-transform-rest {
color: #2f7a52;
}
.swaps-transform-rest-before {
color: #2f7a52;
opacity: 0.65;
}
.swaps-transform-rest-after {
color: #2f7a52;
}
.swaps-offer-proposal {
margin-top: 8px;
background: #f6f9fc;
border: 1px solid #dbe6f1;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.swaps-offer-proposal-title {
margin: 0;
color: #6f8096;
font-size: 0.82rem;
font-weight: 600;
}
.swaps-offer-proposal-text {
margin: 0;
color: var(--color-ink);
font-size: 0.9rem;
line-height: 1.35;
}
.swaps-offer-proposal-peer {
font-weight: 700;
}
.swaps-offer-final {
margin-top: 16px;
padding-top: 8px;
border-top: 1px solid rgba(223, 230, 238, 0.55);
color: #465569;
font-size: 0.9rem;
font-weight: 700;
}
.swaps-taken .swaps-offer-final {
margin-top: 12px;
}
.swaps-offer-final.is-success {
color: #1f5f3d;
}
.swaps-offer-action {
margin-top: 16px;
}
.swaps-open-offer-action {
margin-top: 14px;
width: 100%;
}
.swaps-open-offer-action .take-btn {
display: block;
width: 100%;
}
.swaps-open-offer .swaps-offer-title {
margin-bottom: 4px;
}
.swaps-open-offer-new-since-visit {
background: #f8fbff;
border-color: #cddff0;
box-shadow: 0 6px 14px rgba(18, 32, 56, 0.08);
}
.swaps-open-offer-age {
margin: 2px 0 8px;
color: var(--color-muted);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
}
.swaps-open-impact {
display: flex;
flex-direction: column;
gap: 6px;
}
.swaps-open-section + .swaps-open-section {
margin-top: 14px;
}
.swaps-open-section-label {
margin: 0 2px 8px;
color: var(--color-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.swaps-open-impact + .swaps-open-impact {
margin-top: 10px;
}
.swaps-open-impact-title {
margin: 0;
font-size: 0.84rem;
font-weight: 700;
color: #4f6076;
}
.swaps-open-impact-primary .swaps-open-impact-title {
color: var(--color-ink);
}
.swaps-open-impact-secondary {
opacity: 0.76;
}
.swaps-open-choices {
margin-top: 8px;
}
.swaps-open-choices-title {
margin: 0;
color: #6f8096;
font-size: 0.82rem;
font-weight: 600;
}
.swaps-open-choices-list {
margin: 4px 0 0 18px;
padding: 0;
color: var(--color-ink);
font-size: 0.86rem;
line-height: 1.35;
}
.swaps-open-choices-list li {
margin: 0;
}
.swaps-item-line {
margin: 0;
line-height: 1.35;
}
.swaps-item-label {
font-weight: 700;
}
.swaps-log-line {
margin: 0;
line-height: 1.4;
}
.swaps-log-time {
color: var(--color-muted);
}
.swaps-empty {
margin: 0;
color: var(--color-muted);
}
.swaps-note-error {
margin: 0;
color: #9b4b4b;
font-weight: 600;
}
.swaps-status-line {
white-space: pre-wrap;
}
.settings-card .settings-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
font-size: 0.95rem;
color: #000000;
font-weight: 600;
}
.settings-toggle:last-of-type {
border-bottom: none;
}
.settings-toggle input[type="checkbox"] {
all: unset;
position: relative;
width: var(--switch-width);
height: var(--switch-height);
inset: auto;
display: inline-block;
flex: 0 0 auto;
border-radius: 999px;
border: 1px solid #d0d0d0;
background: #ffffff;
box-sizing: border-box;
cursor: pointer;
padding: 0;
margin: 0;
transition:
background 0.2s ease,
border-color 0.2s ease;
appearance: none;
-webkit-appearance: none;
outline: none;
}
.settings-toggle input[type="checkbox"]::before {
content: "";
position: absolute;
top: var(--switch-inset);
left: var(--switch-inset);
width: var(--switch-knob);
height: var(--switch-knob);
border-radius: 50%;
background: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
pointer-events: none;
}
.settings-toggle input[type="checkbox"]:checked {
background: var(--color-accent);
border-color: var(--color-accent);
}
.settings-toggle input[type="checkbox"]:checked::before {
transform: translateX(calc(var(--switch-width) - var(--switch-knob) - (var(--switch-inset) * 2)));
}
.settings-toggle input[type="checkbox"]:disabled {
opacity: 0.55;
}
.summary-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 0.95rem;
color: #2d2d2d;
gap: 12px;
}
.summary-row strong {
font-size: 1rem;
}
.summary-row.summary-total {
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid #d2d2d2;
}
.summary-row.summary-total span,
.summary-row.summary-total strong {
font-weight: 700;
}
.summary-card-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--color-muted);
margin-bottom: 8px;
}
#summary-results {
background: #ffffff;
border-color: #c8c8c8;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
}
#summary-results .summary-card-title {
font-size: 1.2rem;
font-weight: 700;
color: #1d1d1d;
}
#summary-results .summary-row {
font-size: 1rem;
}
.summary-view .settings-btn.primary {
background: var(--color-btn-dark);
border-color: var(--color-btn-dark);
}
.tax-real-stack {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
min-height: 0;
}
.tax-real-recap-host {
display: flex;
flex-direction: column;
gap: 8px;
}
.tax-real-view .settings-view.compact {
padding-top: 0;
}
.tax-real-card {
border-radius: var(--radius);
border-width: var(--hairline);
box-shadow: var(--card-shadow);
padding: var(--card-pad);
}
.tax-real-card-title {
margin: 0;
font-size: 1.55rem;
font-weight: 700;
color: #2b3a52;
}
.tax-real-year-row {
margin-top: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.tax-real-year-text {
font-size: inherit;
color: inherit;
font-weight: inherit;
}
.tax-real-list {
display: flex;
flex-direction: column;
margin-top: 4px;
}
.tax-real-row {
display: grid;
grid-template-columns: 30px 1fr auto;
align-items: center;
column-gap: 8px;
padding: 8px 0;
border-top: 1px solid #e1e6ee;
font-size: 0.95rem;
color: #3b4a61;
}
.tax-real-label {
min-width: 0;
}
.tax-real-value {
font-size: 1.05rem;
color: #1f2d3f;
white-space: nowrap;
}
.tax-real-value-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
justify-self: end;
}
.tax-real-distance-stepper {
display: inline-flex;
flex-direction: column;
gap: 2px;
}
.tax-real-step-btn {
width: 15px;
height: 11px;
border: none;
background: transparent;
color: #8b96a8;
font-size: 9px;
line-height: 1;
padding: 0;
cursor: pointer;
}
.tax-real-icon {
width: 20px;
height: 20px;
background-color: var(--color-accent);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
.tax-real-icon-pin {
mask-image: url('data:image/svg+xml;utf8,');
}
.tax-real-icon-calendar {
mask-image: url('data:image/svg+xml;utf8,');
}
.tax-real-icon-car {
mask-image: url('data:image/svg+xml;utf8,');
}
.tax-real-footnote {
margin: 5px 0 0;
text-align: center;
font-style: italic;
font-size: 0.86rem;
color: #72839c;
}
.tax-real-projection-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
color: #2b3a52;
font-size: 1rem;
}
.tax-real-projection-row strong {
font-size: 1.45rem;
color: #1f2d3f;
}
.tax-real-progress-title {
margin-top: 6px;
font-size: 0.95rem;
font-weight: 700;
color: #2b3a52;
}
.tax-real-progress-row {
margin-top: 4px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 8px;
}
.tax-real-progress-track {
height: 8px;
border-radius: 999px;
background: #d8e0ec;
overflow: hidden;
}
.tax-real-progress-fill {
height: 100%;
border-radius: inherit;
background: var(--color-accent);
}
.tax-real-progress-value {
font-size: 1.4rem;
color: var(--color-accent);
line-height: 1;
}
.tax-real-updated {
margin: 2px 2px 0;
font-size: 0.82rem;
color: #4b5c74;
}
.tax-real-recap-host + .tax-real-updated {
margin-top: 32px;
}
.tax-real-card-bottom {
gap: 0;
}
.tax-real-view {
height: 100%;
min-height: 0;
overflow: hidden;
padding-bottom: 10px;
}
.tax-real-view .tab-page {
overflow: hidden;
}
.suggestions-view .settings-btn.primary {
background: var(--color-btn-dark);
border-color: var(--color-btn-dark);
}
.hidden {
display: none !important;
}
/* Toast premium (messages rapides) */
.toast-notification {
position: fixed;
left: 50%;
bottom: calc(20px + var(--safe-bottom));
transform: translateX(-50%) translateY(6px) scale(0.98);
max-width: min(calc(100vw - 32px), 360px);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 250, 255, 0.93));
color: #19314a;
border: 1px solid rgba(181, 201, 224, 0.9);
box-shadow:
0 14px 28px rgba(18, 32, 56, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 11px 14px;
border-radius: 14px;
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0.15px;
text-align: center;
opacity: 0;
transition:
opacity 0.16s ease,
transform 0.16s ease;
z-index: 12000;
pointer-events: none;
}
.toast-notification.visible {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
/* ==========================================================================
6. CALENDRIER MENSUEL (HOME)
========================================================================== */
#home-calendar-anchor {
margin-top: 62px;
flex: 0 0 auto;
min-height: 0;
display: flex;
}
/* =========================
HOME — CALENDRIER CIRCULAIRE
========================= */
.home-month {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 auto;
min-height: 0;
width: 100%;
}
.day-circle {
width: clamp(37px, calc(4.35vh + 1.72vw), 53px);
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
font-size: clamp(1.28rem, calc(1.58vh + 0.64vw), 2.02rem);
font-weight: 600;
line-height: 1;
background: var(--color-day-button);
color: #ffffff;
cursor: pointer;
transform: scaleY(0.88);
}
.day-circle.holiday {
box-shadow: 0 0 0 2px #b25a5a;
}
.day-circle.empty {
background: #ffffff;
color: #2b2b2b;
border: 1px solid #d8d8d8;
}
.day-circle.rest {
background: #707070;
border: 1px solid #686868;
color: #ffffff;
}
.day-circle.rest.active {
background: var(--color-day-selected);
border-color: var(--color-day-selected);
color: #ffffff;
}
.day-circle.active {
background: var(--color-day-selected);
color: #ffffff;
}
.day-circle.out {
visibility: hidden;
}
.home-top {
flex: 0 0 auto;
padding-top: clamp(16px, 5vh, 56px);
}
.home-main-card.home-edit-active {
flex: 0 0 auto;
min-height: auto;
gap: 10px;
}
.home-main-card.home-edit-active .home-top {
padding-top: 10px;
}
.home-bottom {
flex: 0 0 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: var(--gap-sm);
padding: 0 18px 16px;
}
.home-main-card.home-edit-active #home-calendar-anchor {
margin-top: 18px;
}
/* ==========================================================================
MENU LATÉRAL — ISOLATION STRICTE (CORRECTION)
========================================================================== */
/* Overlay */
#menu-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1000;
display: none;
}
#menu-overlay.open {
display: block;
}
/* Menu */
#side-menu {
position: fixed;
top: 0;
left: 0;
width: 78vw;
max-width: 340px;
height: 100dvh;
height: calc(var(--app-vh, 1vh) * 100);
background: #ffffff;
z-index: 1001;
transform: translateX(-100%);
transition: transform 0.25s ease;
overflow: hidden;
--long-press-duration: 1.2s;
}
#side-menu::before {
content: "";
position: absolute;
inset: 0;
background: #ffffff;
z-index: 0;
pointer-events: none;
}
/* Force un blanc pur sur toute la zone menu */
#side-menu,
#side-menu-scroll,
#side-menu .menu-section,
#side-menu .menu-form,
#side-menu #menu-footer,
#side-menu .menu-legal {
background-color: #ffffff !important;
}
#side-menu.open {
transform: translateX(0);
}
#side-menu.open.opening-swipe {
transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#menu-close {
position: absolute;
top: calc(0.75rem + var(--safe-top));
right: calc(1.1rem + var(--safe-right));
width: 44px;
height: 44px;
border: none;
border-radius: 0;
background: transparent;
cursor: pointer;
z-index: 5;
display: grid;
place-items: center;
opacity: 0;
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.16s ease,
box-shadow 0.2s ease;
box-shadow: none;
}
#menu-close::before {
content: "";
position: absolute;
inset: 0;
width: 22px;
height: 22px;
margin: auto;
background-color: var(--color-accent);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('data:image/svg+xml;utf8,');
z-index: 2;
}
#side-menu.open #menu-close,
#side-menu.opening #menu-close {
opacity: 1;
pointer-events: auto;
}
#menu-close:active {
transform: scale(0.96);
}
/* Scroll interne menu */
#side-menu-scroll {
position: relative;
z-index: 2;
height: 100%;
overflow-y: auto;
background: #ffffff;
-ms-overflow-style: none;
scrollbar-width: none;
padding: calc(56px + var(--safe-top)) calc(22px + var(--safe-right))
calc(24px + var(--safe-bottom)) calc(22px + var(--safe-left));
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
}
#side-menu-scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
#side-menu-scroll::-webkit-scrollbar-track {
background: transparent;
}
#side-menu-scroll::-webkit-scrollbar-thumb {
background: transparent;
}
.menu-title {
font-family:
"SF Pro Display",
"SF Pro Text",
-apple-system,
"Segoe UI",
"Trebuchet MS",
"Gill Sans",
"Candara",
sans-serif;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #111;
position: relative;
top: -42px;
margin-bottom: 4px;
}
.menu-subtitle {
margin-top: 42px;
font-size: 0.85rem;
color: #7d7d7d;
margin-bottom: 26px;
}
.menu-section {
margin-bottom: 24px;
}
.menu-section h3 {
margin: 0 0 10px;
font-size: 0.7rem;
letter-spacing: 3px;
text-transform: uppercase;
color: #9a9a9a;
}
.menu-section button {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 8px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
background: #ffffff;
color: #222;
font-size: 1rem;
font-weight: 500;
text-align: left;
cursor: pointer;
}
.menu-badge {
margin-left: auto;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #a07b5f;
border: 1px solid rgba(160, 123, 95, 0.45);
padding: 2px 6px;
border-radius: 999px;
}
.menu-notify-badge {
margin-left: auto;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--color-accent);
color: #ffffff;
font-size: 0.66rem;
font-weight: 700;
line-height: 18px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
.menu-notify-badge.is-hidden {
display: none;
}
.menu-section button.active {
color: var(--color-accent);
position: relative;
}
.menu-section button.active::before {
content: "";
position: absolute;
left: -22px;
top: 0;
bottom: 0;
width: 4px;
background: var(--color-accent);
}
.menu-icon {
width: 22px;
height: 22px;
flex: 0 0 auto;
background-color: var(--color-accent);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.icon-day {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-guided {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-game {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-consult {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-conges {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-season {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-phone {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-summary {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-tax-real {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-legal {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-sliders {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-feedback {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-exchanges {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-alarm {
mask-image: url('data:image/svg+xml;utf8,');
}
.icon-reset {
mask-image: url('data:image/svg+xml;utf8,');
}
.menu-form {
padding: 8px 8px 14px 36px;
display: flex;
flex-direction: column;
gap: 8px;
}
#reset-panel .reset-title {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 500;
color: #222;
}
#reset-panel button:not(#reset-all):not(#reset-confirm-month) {
font-size: 1rem;
font-weight: 500;
color: #222;
}
#reset-month {
background: transparent;
border-color: #d0d0d0;
color: var(--color-muted);
}
#reset-month:active {
background: rgba(0, 0, 0, 0.04);
border-color: #c2c2c2;
color: #2a2a2a;
}
.menu-form label {
font-size: 0.85rem;
color: var(--color-muted);
}
.menu-form input {
height: var(--input-height);
min-height: var(--input-height);
border-radius: var(--control-radius);
border: 1px solid #c8c8c8;
padding: 0 10px;
background: var(--input-bg);
background-image: none;
line-height: 1.2;
}
.menu-form button {
height: var(--btn-height);
min-height: var(--btn-height);
border-radius: var(--control-radius);
border: 1px solid #d3d3d3;
background: #ffffff;
font-size: 0.9rem;
line-height: 1;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#consult-date-submit {
width: fit-content;
padding: 0 14px;
align-self: flex-start;
}
#reset-all,
#reset-confirm-month {
background: transparent;
color: #9b4b4b;
border-color: rgba(155, 75, 75, 0.45);
font-weight: 600;
}
#reset-all {
background: #a33f3f;
color: #ffffff;
border-color: #a33f3f;
box-shadow: 0 10px 20px rgba(163, 63, 63, 0.25);
}
#reset-all::before {
content: "!";
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-weight: 800;
margin-right: 8px;
}
#reset-all.holding,
#reset-confirm-month.holding {
background: #b25a5a;
color: #fff;
border-color: #b25a5a;
}
#reset-all.holding {
background: #8f2f2f;
border-color: #8f2f2f;
}
.settings-btn.danger {
background: transparent;
color: #9b4b4b;
border-color: rgba(155, 75, 75, 0.4);
}
.settings-btn.holdable {
position: relative;
overflow: hidden;
}
.settings-btn.holdable .hold-progress {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 0%;
background: #b25a5a;
pointer-events: none;
}
.settings-btn.holdable.holding .hold-progress {
animation: longPressFill var(--long-press-duration, 1.2s) linear forwards;
}
.settings-btn.holding {
background: #b25a5a;
color: #fff;
border-color: #b25a5a;
}
.settings-btn.danger:active {
background: rgba(155, 75, 75, 0.08);
border-color: rgba(155, 75, 75, 0.6);
}
#reset-all:active,
#reset-confirm-month:active {
background: rgba(155, 75, 75, 0.08);
border-color: rgba(155, 75, 75, 0.6);
}
.menu-long-press {
--long-press-duration: 1.2s;
}
.menu-long-press-bar {
position: absolute;
left: 0;
bottom: 0;
height: 8px;
width: 0%;
background: #e53935;
pointer-events: none;
z-index: 2;
}
#side-menu.long-pressing .menu-long-press-bar {
animation: longPressFill var(--long-press-duration) linear forwards;
}
@keyframes longPressFill {
from {
width: 0%;
}
to {
width: 100%;
}
}
.reset-month-nav {
display: grid;
grid-template-columns: 28px 1fr 28px;
align-items: center;
gap: 8px;
margin: 6px 0;
}
.reset-month-nav button {
width: 28px;
height: 28px;
padding: 0;
border: none;
background: transparent;
border-radius: 50%;
cursor: pointer;
}
.reset-month-nav button::before {
content: "";
display: block;
width: 18px;
height: 18px;
margin: 0 auto;
background-color: var(--color-accent);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.reset-month-nav .arrow-left::before {
background-color: #2a2a2a;
mask-image: url('data:image/svg+xml;utf8,');
}
.reset-month-nav .arrow-right::before {
background-color: var(--color-accent);
mask-image: url('data:image/svg+xml;utf8,');
}
#reset-month-label {
text-align: center;
font-size: 0.95rem;
color: var(--color-ink);
}
.menu-form-label {
font-size: 0.75rem;
color: var(--color-muted);
margin: 0;
}
#menu-footer {
margin-top: 28px;
font-size: 0.75rem;
color: #9c9c9c;
text-align: center;
display: flex;
flex-direction: column;
gap: 6px;
}
.menu-legal {
display: flex;
flex-direction: column;
gap: 4px;
}
.menu-legal a {
color: inherit;
text-decoration: underline;
}
/* ==========================================================
NOTIFICATION MISE À JOUR (TOP FLOATING)
========================================================== */
.update-banner {
position: fixed;
top: calc(16px + var(--safe-top));
left: 50%;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 520px;
background: #ffffff;
border-radius: 18px;
border: 1px solid #dedede;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
z-index: 10050;
animation: slideDown 0.25s ease;
}
.update-content {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px;
}
.update-text strong {
display: block;
font-size: 0.95rem;
font-weight: 700;
}
.update-text span {
font-size: 0.82rem;
color: var(--color-muted);
}
.update-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.update-actions button {
height: var(--btn-height);
min-height: var(--btn-height);
padding: 0 16px;
border-radius: var(--control-radius);
border: none;
font-weight: 600;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.update-actions .btn-primary {
background: var(--color-accent);
color: #fff;
}
.update-actions .btn-secondary {
background: #ffffff;
color: var(--color-ink);
border: 1px solid #d2d2d2;
}
.update-actions #version-reload,
.update-actions #update-reload {
background: var(--color-day-selected);
color: #ffffff;
border: 1px solid var(--color-day-selected);
}
.update-actions #version-dismiss {
background: var(--color-btn-dark);
color: #ffffff;
border: 1px solid var(--color-btn-dark);
}
.update-actions button:active {
transform: scale(0.96);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translate(-50%, -10px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
.home-month-grid {
display: grid;
grid-template-columns: repeat(7, 44px);
column-gap: clamp(10px, calc(1.5vh + 0.58vw), 18px);
row-gap: clamp(13px, calc(1.9vh + 0.68vw), 23px);
justify-content: center;
max-width: 100%;
flex: 0 0 auto;
min-height: 0;
align-content: start;
}
.home-weekdays {
display: grid;
grid-template-columns: repeat(7, 44px);
gap: clamp(10px, calc(1.5vh + 0.8vw), 18px);
justify-content: center;
margin-top: 14px;
margin-bottom: 10px;
font-size: clamp(0.88rem, calc(1.4vh + 0.5vw), 1.22rem);
font-weight: 600;
color: #8f8f8f;
text-align: center;
}
#app-root {
min-height: 100dvh;
height: 100dvh;
min-height: calc(var(--app-vh, 1vh) * 100);
height: calc(var(--app-vh, 1vh) * 100);
display: flex;
flex-direction: column;
background: var(--bg-body);
padding: calc(0px + var(--safe-top)) calc(0px + var(--safe-right)) calc(0px + var(--safe-bottom))
calc(0px + var(--safe-left));
}
#menu-toggle {
position: fixed;
top: calc(0.75rem + var(--safe-top));
left: calc(0.75rem + var(--safe-left));
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
background: transparent;
border: none;
color: var(--color-ink);
z-index: 1002;
border-radius: 50%;
}
#menu-toggle::before {
content: "";
width: 30px;
height: 30px;
display: block;
background-color: var(--color-ink);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('data:image/svg+xml;utf8,');
}
#menu-toggle:active {
transform: scale(0.96);
}
#consult-toggle {
position: fixed;
top: calc(0.75rem + var(--safe-top));
right: calc(0.75rem + var(--safe-right));
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
background: transparent;
border: none;
color: var(--color-ink);
z-index: 1002;
border-radius: 50%;
overflow: visible;
}
#consult-toggle::before {
content: "";
width: 30px;
height: 30px;
display: block;
background-color: var(--color-ink);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px 24px;
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 24px 24px;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
#consult-toggle:active {
transform: scale(0.96);
}
body.menu-open #menu-toggle {
opacity: 0;
pointer-events: none;
}
body.menu-open #consult-toggle {
opacity: 0;
pointer-events: none;
}
#app-main {
flex: 1 1 0;
min-height: 0;
display: flex;
background: var(--bg-body);
overflow: hidden;
}
#app-main > section {
flex: 1 1 auto;
display: none;
background: var(--bg-body);
overflow: hidden;
}
#app-main > section:not([hidden]) {
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
.home-day-summary {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: clamp(14px, 4vh, 40px) 18px 12px;
gap: clamp(16px, 5vh, 40px);
position: relative;
}
.home-day-summary::before {
content: none;
}
@media (max-width: 320px) {
.day-header-day {
font-size: 5.5rem;
}
.day-header-service {
font-size: 1.8rem;
}
.home-month-grid,
.home-weekdays {
gap: 8px;
}
.day-circle {
width: 40px;
height: 40px;
font-size: 1.5rem;
}
}
@media (min-width: 400px) {
.day-header-day {
font-size: 7rem;
}
.home-weekdays {
gap: 14px;
}
.home-month-grid {
column-gap: 14px;
row-gap: 17px;
}
}
@media (max-width: 430px) {
.month-nav {
gap: 64px;
}
.home-month-grid,
.home-weekdays {
grid-template-columns: repeat(7, minmax(0, 1fr));
width: min(100%, 360px);
}
.day-circle {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
}
@media (min-width: 768px) {
#view-home {
max-width: 640px;
}
.home-day-summary {
padding-left: 24px;
padding-right: 24px;
}
}
@media (orientation: landscape) and (max-height: 500px) {
.home-day-summary {
padding: 12px 16px 8px;
gap: 16px;
}
#home-calendar-anchor {
margin-top: 12px;
}
.day-header-day {
font-size: 5rem;
}
.day-header-left {
gap: 4px;
max-width: 220px;
}
.day-header-service {
font-size: 1.6rem;
}
.day-header-time,
.day-header-duration {
font-size: 0.95rem;
}
.day-header-weekday {
font-size: 0.9rem;
}
.month-nav {
gap: 56px;
margin-top: 0;
}
.home-top {
padding-top: 12px;
}
.home-month-grid,
.home-weekdays {
gap: 8px;
}
.day-circle {
width: 40px;
height: 40px;
font-size: 1.45rem;
}
#view-guided-month,
.settings-view {
padding-top: calc(48px + var(--safe-top));
}
.guided-day-number {
font-size: 4.2rem;
}
.guided-day-number.guided-day-complete {
width: 88px;
height: 88px;
font-size: 3.4rem;
}
.guided-primary-grid,
.guided-lines-grid {
gap: 4px;
}
.guided-btn {
min-height: 28px;
font-size: 0.75rem;
}
.settings-card {
padding: var(--card-pad);
}
}
@media (orientation: landscape) and (min-height: 501px) and (max-height: 720px) {
.home-day-summary {
padding: 16px 18px 10px;
gap: 20px;
}
.day-header-day {
font-size: 5.6rem;
}
.day-header-service {
font-size: 1.8rem;
}
.day-header-time,
.day-header-duration {
font-size: 1rem;
}
.month-nav {
gap: 64px;
}
.home-month-grid,
.home-weekdays {
gap: 10px;
}
.day-circle {
width: 42px;
height: 42px;
font-size: 1.55rem;
}
.guided-day-number {
font-size: 4.6rem;
}
.guided-day-number.guided-day-complete {
width: 92px;
height: 92px;
font-size: 3.6rem;
}
.guided-btn {
min-height: 30px;
font-size: 0.78rem;
}
}
@media (orientation: landscape) and (min-height: 721px) {
.home-day-summary {
padding: 20px 22px 12px;
gap: 24px;
}
.day-header-day {
font-size: 6.2rem;
}
.day-header-service {
font-size: 2rem;
}
.day-header-time,
.day-header-duration {
font-size: 1.05rem;
}
.month-nav {
gap: 72px;
}
.home-month-grid,
.home-weekdays {
gap: 12px;
}
.day-circle {
width: 46px;
height: 46px;
font-size: 1.7rem;
}
.guided-day-number {
font-size: 5rem;
}
.guided-day-number.guided-day-complete {
width: 98px;
height: 98px;
font-size: 3.8rem;
}
.guided-btn {
min-height: 32px;
font-size: 0.82rem;
}
}
@media (max-width: 360px) {
.month-nav {
gap: 48px;
}
.home-month-grid {
gap: 8px;
}
.home-month-grid,
.home-weekdays {
grid-template-columns: repeat(7, minmax(0, 1fr));
width: 100%;
max-width: 320px;
}
.day-circle {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
.guided-primary-grid,
.guided-lines-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.month-nav.month-nav-with-today {
gap: 18px;
}
/* TYPOGRAPHY */
:where(
.settings-subtitle,
.settings-card label,
.settings-period-title,
.settings-note,
.settings-status,
.menu-subtitle,
.menu-form label,
.menu-form-label,
.guided-month-label,
.guided-section-label,
.day-extra-label,
.tax-real-label,
.tax-real-footnote,
.edit-day-label,
.edit-day-help,
.edit-day-summary-line-meta,
.label,
.subtitle,
.meta,
.hint,
.caption,
.helper
) {
color: var(--text-secondary);
font-weight: var(--fw-ui);
line-height: var(--lh-ui);
}
:where(.tax-real-footnote, .menu-form-label, .hint, .caption, .helper) {
color: var(--text-muted);
}
/* ICONS */
:where(.icon, .menu-icon, .tax-real-icon, [class^="icon-"], [class*=" icon-"]) {
width: var(--icon-size);
height: var(--icon-size);
min-width: var(--icon-size);
min-height: var(--icon-size);
display: inline-block;
line-height: 1;
vertical-align: middle;
flex: 0 0 auto;
}
:where(.menu-icon, .tax-real-icon, [class^="icon-"], [class*=" icon-"]) {
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.menu-icon {
color: currentColor;
}
.tax-real-icon {
color: var(--color-accent);
}
:where(#menu-toggle::before, #consult-toggle::before, #menu-close::before) {
width: var(--icon-size-lg);
height: var(--icon-size-lg);
line-height: 1;
vertical-align: middle;
}
:where(.month-arrow::before, .reset-month-nav button::before, #edit-btn::after) {
width: var(--icon-size);
height: var(--icon-size);
line-height: 1;
vertical-align: middle;
}
:where(.material-symbols-rounded, .material-symbols-outlined) {
font-size: var(--icon-size);
line-height: 1;
vertical-align: middle;
font-variation-settings:
"FILL" 0,
"wght" var(--icon-weight),
"GRAD" 0,
"opsz" 24;
}