html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #f7faf7;
}
input[type="date"], input[type="month"], input[type="datetime-local"] {
cursor: pointer;
}
.date-picker-field { position: relative; display: block; width: 100%; }
.date-picker-field .date-picker-input { width: 100% !important; min-width: 0; padding-right: .75rem !important; background-image: none !important; appearance: textfield; -webkit-appearance: textfield; }
.date-picker-input::-webkit-calendar-picker-indicator { display: none !important; width: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; -webkit-appearance: none; }
.date-picker-input::-webkit-inner-spin-button { display: none; -webkit-appearance: none; }
.date-picker-button { position: absolute; z-index: 2; top: 1px; right: 1px; bottom: 1px; display: grid; place-items: center; width: 52px; border: 0; border-left: 1px solid #ced4da; border-radius: 0 .3rem .3rem 0; background: #fff; cursor: pointer; font-size: 1.05rem; }
.date-picker-button:hover { background: #eef6f3; }
.date-picker-button:focus-visible { outline: 3px solid rgba(22, 124, 106, .25); outline-offset: 1px; }
a, .btn-link {
color: #006bb7;
}
.btn-primary {
color: #fff;
background-color: #267465;
border-color: #267465;
}
:root { --ink: #19383b; --muted: #6d7f82; --line: #dfe9e7; --surface: #ffffff; --canvas: #f3f7f6; --accent: #167c6a; --accent-dark: #0b5b50; --navy: #123b43; }
.portal-body { min-height: 100vh; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.portal-shell { min-height: 100vh; display: flex; }
.portal-sidebar { width: 260px; min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(165deg, #123d45 0%, #092f36 100%); color: #e8f1ef; padding: 28px 16px 20px; }
.portal-brand { display: flex; gap: 11px; align-items: center; color: #fff; font-size: 1.2rem; font-weight: 750; letter-spacing: -.02em; text-decoration: none; padding: 0 10px 31px; }
.portal-brand:hover { color: #fff; }.portal-brand small { display: block; color: #9fbbb7; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: 1px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #72c9b7; color: #0b4642; font-family: Georgia, serif; font-size: 1.4rem; }
.portal-nav { display: grid; gap: 5px; }.portal-nav a { border-radius: 9px; color: #d5e4e1; padding: 10px 12px; text-decoration: none; font-size: .91rem; font-weight: 600; transition: background .15s ease; }.portal-nav a:hover,.portal-nav a.active { color: #fff; background: rgba(255,255,255,.12); }.portal-nav a.active { box-shadow: inset 3px 0 0 #8bd4c6; }.portal-nav a span { display: inline-block; width: 22px; color: #8bd4c6; }.portal-nav-label { color: #88a9a5; font-size: .67rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; padding: 22px 12px 6px; }
.portal-nav-separator { width: calc(100% - 16px); margin: 13px 8px 8px; border: 0; border-top: 1px solid rgba(213,228,225,.34); opacity: 1; }
.portal-nav-group,.portal-nav-subgroup { min-width: 0; }
.portal-nav-group > summary,.portal-nav-subgroup > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: 9px; color: #e6f0ee; cursor: pointer; list-style: none; font-weight: 750; transition: background .15s ease; }
.portal-nav-group > summary { padding: 10px 12px; font-size: .91rem; }
.portal-nav-subgroup > summary { padding: 8px 10px; color: #c2d9d5; font-size: .84rem; }
.portal-nav-group > summary::-webkit-details-marker,.portal-nav-subgroup > summary::-webkit-details-marker { display: none; }
.portal-nav-group > summary::after,.portal-nav-subgroup > summary::after { content: "›"; color: #8bd4c6; font-size: 1.05rem; line-height: 1; transition: transform .15s ease; }
.portal-nav-group[open] > summary::after,.portal-nav-subgroup[open] > summary::after { transform: rotate(90deg); }
.portal-nav-group > summary:hover,.portal-nav-subgroup > summary:hover { background: rgba(255,255,255,.09); }
.portal-nav-group > summary:focus-visible,.portal-nav-subgroup > summary:focus-visible { outline: 2px solid #8bd4c6; outline-offset: 1px; }
.portal-nav-group-links,.portal-nav-subgroup-links { display: grid; gap: 2px; }
.portal-nav-group-links { padding: 2px 0 5px 8px; }
.portal-nav-group-links > a { padding-top: 8px; padding-bottom: 8px; font-size: .84rem; }
.portal-nav-subgroup { margin-left: 4px; }
.portal-nav-subgroup-links { padding: 1px 0 4px 10px; }
.portal-nav-subgroup-links > a { padding: 6px 9px; color: #b9d0cc; font-size: .78rem; font-weight: 600; }
.portal-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 16px 9px 0; border-top: 1px solid rgba(255,255,255,.13); font-size: .75rem; }.portal-user strong { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.portal-user form { display: inline; }.portal-user button { border: 0; padding: 0; background: none; color: #9fbbb7; font-size: .73rem; }.portal-user button:hover { color: #fff; text-decoration: underline; }.user-avatar,.employee-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #d5f0e9; color: #126957; font-size: .75rem; font-weight: 800; }
.portal-main { min-width: 0; flex: 1; }.portal-content { width: 100%; max-width: none; margin: 0; padding: clamp(36px, 3vw, 52px) clamp(28px, 3.5vw, 64px); }.portal-mobile-brand { display: none; }
.iyton-legal-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 22px 24px 30px; color: var(--muted); font-size: .82rem; }
.iyton-legal-footer a { color: inherit; text-decoration: none; }
.iyton-legal-footer a:hover { color: var(--accent-dark); text-decoration: underline; }
.legal-document { max-width: 920px; margin: 0 auto; }
.legal-page-heading { max-width: 920px; margin-left: auto; margin-right: auto; }
.legal-document-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.legal-editor { min-height: 32rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.5; }
.portal-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; width: 100%; max-width: none; margin: 0 0 -38px; padding: 14px clamp(28px, 3.5vw, 64px) 0; pointer-events: none; }
.portal-help-link { position: relative; z-index: 20; display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .72rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent-dark); box-shadow: 0 .2rem .8rem rgba(20,60,56,.08); font-size: .82rem; font-weight: 750; text-decoration: none; pointer-events: auto; }
.portal-help-link span { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-radius: 50%; font-size: .76rem; font-weight: 850; }
.portal-help-link:hover, .portal-help-link:focus-visible { border-color: var(--accent); background: var(--accent); color: #fff; }
.portal-language-switcher { position: relative; z-index: 20; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 .2rem .8rem rgba(20,60,56,.08); pointer-events: auto; }
.portal-language-switcher a { min-width: 2rem; padding: .25rem .42rem; border-radius: 999px; color: var(--muted); font-size: .7rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; }
.portal-language-switcher a:hover, .portal-language-switcher a:focus-visible { background: #e8f3f0; color: var(--accent-dark); }
.portal-language-switcher a.active,
.portal-language-switcher a.active:visited,
.portal-language-switcher a.active:hover,
.portal-language-switcher a.active:focus-visible { background: var(--accent); color: #fff !important; -webkit-text-fill-color: #fff; }
.portal-topbar-signout { position: relative; z-index: 20; margin: 0; pointer-events: auto; }
.portal-topbar-signout button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .38rem .7rem; border: 1px solid #bd5a61; border-radius: 999px; background: var(--surface); color: #9d2831; box-shadow: 0 .2rem .8rem rgba(20,60,56,.08); font-size: .78rem; font-weight: 750; }
.portal-topbar-signout button:hover, .portal-topbar-signout button:focus-visible { background: #a92e38; color: #fff; outline: none; }
.activation-link-renewal { padding: 1rem 1.1rem; border: 2px solid #9fc5bd; border-left: 6px solid var(--accent); border-radius: 12px; background: #f4faf8; box-shadow: 0 .3rem 1rem rgba(20,60,56,.1); }
.activation-link-renewal p { color: var(--muted); }
.customer-number-readonly { background: #dfe4e3 !important; color: #52625f; cursor: not-allowed; }
.portal-favorites { display: grid; gap: 3px; }
.portal-favorites > p { margin: 0 12px 4px; color: #9fbbb7; font-size: .72rem; line-height: 1.35; }
.portal-favorites a { position: relative; padding-left: 30px; }
.portal-favorites a::before { position: absolute; left: 12px; content: "\2605"; color: #8bd4c6; }
.navigation-favorites-menu { position: fixed; z-index: 3000; min-width: 205px; padding: 5px; border: 1px solid #b9cbc7; border-radius: 9px; background: #fff; box-shadow: 0 12px 35px rgba(12, 47, 52, .24); }
.navigation-favorites-menu[hidden] { display: none; }
.navigation-favorites-menu button { width: 100%; padding: 9px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: .82rem; font-weight: 700; text-align: left; }
.navigation-favorites-menu button:hover, .navigation-favorites-menu button:focus-visible { background: #e8f3f0; color: var(--accent-dark); outline: none; }
.customer-email-dialog { width: min(720px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 2px solid #9fc5bd; border-left: 6px solid var(--accent); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 70px rgba(7, 40, 45, .32); }
.customer-email-dialog::backdrop { background: rgba(8, 31, 35, .56); backdrop-filter: blur(2px); }
.customer-email-dialog form { margin: 0; }
.customer-email-dialog-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); gap: 22px; align-items: end; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); background: #f4faf8; }
.customer-email-dialog-header h2 { margin: 3px 0 4px; font-size: 1.35rem; }
.customer-email-dialog-header p:last-child { margin: 0; color: var(--muted); font-size: .86rem; }
.customer-email-template-choice .form-label { margin-bottom: 5px; }
.customer-email-dialog-body { padding: 24px; }
.customer-email-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 17px 24px 22px; border-top: 1px solid var(--line); }
.email-selection-column { width: 46px; min-width: 46px; text-align: center; }
.email-selection-checkbox { appearance: none; -webkit-appearance: none; display: inline-block; width: 1.45rem; height: 1.45rem; margin: 0; border: 3px solid #405c59; border-radius: 5px; background-color: #fff; background-image: none; box-shadow: 0 0 0 2px rgba(25,56,59,.12), inset 0 0 0 1px #fff; cursor: pointer; vertical-align: middle; }
.email-selection-checkbox:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,124,106,.15); }
.email-selection-checkbox:focus-visible { border-color: var(--accent-dark); outline: 3px solid rgba(22,124,106,.25); outline-offset: 3px; }
.email-selection-checkbox:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 10 3 3 7-7'/%3e%3c/svg%3e"); }
.email-selection-checkbox:indeterminate { border-color: var(--accent); background-color: var(--accent); background-image: linear-gradient(transparent 42%, #fff 42% 58%, transparent 58%); }
@media (max-width: 620px) { .customer-email-dialog-header { grid-template-columns: 1fr; }.customer-email-dialog-actions { justify-content: stretch; }.customer-email-dialog-actions .btn { flex: 1; } }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px; }.page-heading h1 { margin: 3px 0 7px; color: var(--ink); font-size: clamp(1.8rem, 3vw, 2.45rem); font-weight: 740; letter-spacing: -.045em; }.page-heading p:not(.section-kicker) { margin: 0; color: var(--muted); }.section-kicker { margin: 0; color: var(--accent); font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.text-link { color: var(--accent-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }.text-link:hover { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }.header-actions form { margin: 0; }.btn-outline-secondary { border-color: #c6d5d2; color: #456164; font-weight: 700; }.btn-outline-secondary:hover { background: #e9f1ef; border-color: #b6cac6; color: #264a4b; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin-bottom: 25px; }.metric-card,.content-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(20, 60, 56, .045); }.metric-card { border-radius: 14px; padding: 21px 22px; }.metric-card span { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; }.metric-card strong { display: block; color: var(--ink); font-size: 1.65rem; letter-spacing: -.04em; margin: 8px 0 3px; }.metric-card small { color: var(--muted); font-size: .74rem; }.metric-card .metric-ok { color: var(--accent); font-size: 1.2rem; padding-top: 5px; }.content-card { border-radius: 14px; padding: 25px; }.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }.card-heading h2,.empty-state h2 { color: var(--ink); font-size: 1.12rem; font-weight: 730; letter-spacing: -.02em; margin: 0 0 4px; }.card-heading p { color: var(--muted); font-size: .85rem; margin: 0; }.card-heading a { color: var(--accent-dark); font-size: .84rem; font-weight: 700; text-decoration: none; }
.dashboard-metric-grid { margin-bottom: 0; }
.dashboard-subscription-card { max-width: 520px; }
.box-design { background: #f7fbfa; border: 2px solid #a9c9c2; border-left: 6px solid var(--accent); box-shadow: 0 7px 20px rgba(20, 60, 56, .12); }
.collapsible-card { padding: 0; overflow: hidden; }
.collapsible-card > summary { align-items: center; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; list-style: none; padding: 20px 24px; }
.collapsible-card > summary::-webkit-details-marker { display: none; }
.collapsible-card > summary h2 { color: var(--ink); font-size: 1.12rem; font-weight: 730; letter-spacing: -.02em; margin: 0; }
.collapsible-card > summary::after { color: var(--accent-dark); content: "⌄"; font-size: 1.35rem; font-weight: 800; line-height: 1; transition: transform .16s ease; }
.collapsible-card[open] > summary { border-bottom: 1px solid var(--line); }
.collapsible-card[open] > summary::after { transform: rotate(180deg); }
.collapsible-card-body { padding: 22px 24px 24px; }
.collapsible-card-body > .card-heading:first-child { margin-top: 0; }
.setup-progress-value { color: var(--accent-dark); font-size: 1.65rem; white-space: nowrap; }
.setup-progress-card .progress { height: .85rem; background: #dfe9e7; }
.setup-progress-card .progress-bar { background: var(--accent); }
.setup-step-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.setup-step-link { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .75rem; border: 2px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); text-decoration: none; }
.setup-step-link span { display: grid; place-items: center; flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #edf2f1; font-weight: 800; }
.setup-step-link small { font-weight: 700; line-height: 1.2; }
.setup-step-link.complete { border-color: #80bcae; background: #effaf7; }
.setup-step-link.complete span { background: var(--accent); color: #fff; }
.setup-step-link.active { border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(22,124,106,.15); }
.setup-note { padding: .8rem 1rem; border-left: 4px solid var(--accent); background: #eef6f4; border-radius: 6px; }
.setup-employee-status td:not(:first-child) { white-space: nowrap; }
@media (max-width: 900px) { .setup-step-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .setup-step-navigation { grid-template-columns: 1fr; } }
.email-scope-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.email-scope-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.email-scope-swatch { display: inline-block; width: 1.15rem; height: 1.15rem; border: 1px solid #bdc8c6; border-radius: 4px; }
.email-scope-swatch-system { background: #f0f1f2; }
.email-scope-swatch-tenant { background: #e5f5f1; border-color: #a8d4ca; }
.portal-table tbody > .email-outbox-row-system > td { background: #f0f1f2; }
.portal-table tbody > .email-outbox-row-tenant > td { background: #e5f5f1; }
.portal-table tbody > .email-outbox-row-system:hover > td { background: #e5e7e9; }
.portal-table tbody > .email-outbox-row-tenant:hover > td { background: #d8eee9; }
.treatment-category-group { padding: 20px; }
.treatment-category-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
.treatment-category-heading > small { color: var(--muted); max-width: 330px; text-align: right; }
.grouped-treatment-table tbody tr[draggable="true"] { cursor: grab; }
.grouped-treatment-table tbody tr.is-dragging { opacity: .45; }
.grouped-treatment-table tbody td:first-child { width: 42px; text-align: center; }
.employee-hours-table { border-collapse: collapse; width: 100%; min-width: 190px; font-size: .78rem; line-height: 1.1; }
.employee-hours-table tr { height: auto; }
.employee-hours-table td { border: 0; padding: 1px 12px 1px 0; line-height: 1.1; white-space: nowrap; }
.employee-hours-table td:first-child { font-weight: 650; }
.employee-hours-table td:last-child { padding-right: 0; text-align: right; }
.employee-card-table { border-collapse: separate; border-spacing: 0 14px; }
.employee-card-table thead th { padding-bottom: 2px; }
.employee-card-table tbody > tr { background: #f7fbfa; box-shadow: 0 7px 20px rgba(20, 60, 56, .12); }
.employee-card-table tbody > tr > td { background: #f7fbfa; border-top: 2px solid #a9c9c2; border-bottom: 2px solid #a9c9c2; padding: 16px 14px; }
.employee-card-table tbody > tr > td:first-child { border-left: 6px solid var(--accent); border-radius: 13px 0 0 13px; padding-left: 16px; }
.employee-card-table tbody > tr > td:last-child { border-right: 2px solid #a9c9c2; border-radius: 0 13px 13px 0; padding-right: 16px; }
.portal-table { width: 100%; border-collapse: collapse; }.portal-table th { color: #738785; font-size: .68rem; font-weight: 800; letter-spacing: .08em; padding: 0 14px 12px; text-transform: uppercase; }.portal-table td { border-top: 1px solid var(--line); color: #365255; font-size: .88rem; padding: 15px 14px; vertical-align: middle; }.portal-table td:first-child,.portal-table th:first-child { padding-left: 0; }.portal-table td:last-child,.portal-table th:last-child { padding-right: 0; }.portal-table td strong { color: var(--ink); }.portal-table td span { color: var(--muted); font-size: .77rem; }.status-pill,.role-pill { display: inline-block; color: #0d705d !important; background: #e4f5ef; border-radius: 99px; font-size: .72rem !important; font-weight: 750; padding: 5px 9px; }.role-pill { background: #e8f0fb; color: #2e5c93 !important; }.employee-name { display: flex; align-items: center; gap: 10px; }.employee-avatar { width: 35px; height: 35px; background: #e7f1ef; }
.treatment-card-table { border-collapse: separate; border-spacing: 0 18px; }.treatment-card-table thead th { padding-bottom: 2px; }.treatment-card-table tbody tr { background: #f7fbfa; box-shadow: 0 7px 20px rgba(20, 60, 56, .12); }.treatment-card-table tbody td { background: #f7fbfa; border-top: 2px solid #a9c9c2; border-bottom: 2px solid #a9c9c2; padding: 19px 14px; }.treatment-card-table tbody td:first-child { border-left: 6px solid var(--accent); border-radius: 13px 0 0 13px; padding-left: 16px; }.treatment-card-table tbody td:last-child { border-right: 2px solid #a9c9c2; border-radius: 0 13px 13px 0; padding-right: 16px; }
.status-pill.status-muted { background: #edf0f0; color: #526765 !important; }
.treatment-variant-summary { border-collapse: collapse; min-width: 150px; width: 100%; }.treatment-card-table .treatment-variant-summary tr { background: transparent; box-shadow: none; }.treatment-card-table .treatment-variant-summary td { background: transparent; border: 0; padding: 3px 10px 3px 0; white-space: nowrap; }.treatment-card-table .treatment-variant-summary td:first-child { border: 0; border-radius: 0; font-weight: 650; padding-left: 0; }.treatment-card-table .treatment-variant-summary td:last-child { border: 0; border-radius: 0; padding-right: 0; text-align: right; }
.treatment-main-category strong { display: block; }.treatment-main-category img { border-radius: 8px; display: block; margin-top: 10px; max-width: 130px; object-fit: cover; }
.duration-editor-table td { min-width: 145px; }.duration-editor-table td:first-child { min-width: 155px; }.duration-editor-table td:nth-last-child(-n+2) { min-width: 105px; }.duration-editor-table input[readonly] { background: #f4f7f6; border-color: transparent; color: var(--ink); }.duration-editor-table tr.is-editing td { background: #f3faf8; }
.duration-editor-table th:nth-child(2), .duration-editor-table td:nth-child(2) { min-width: 160px; width: 160px; }
.duration-editor-table td:nth-child(2) .input-group { min-width: 140px; }
.duration-editor-table th:nth-child(3), .duration-editor-table td:nth-child(3), .duration-editor-table th:nth-child(4), .duration-editor-table td:nth-child(4) { min-width: 190px; width: 190px; }
.duration-editor-table td:nth-child(3) input[type="date"], .duration-editor-table td:nth-child(4) input[type="date"] { min-width: 170px; width: 100%; }
.employee-photo { object-fit: cover; }
.quick-actions { display: flex; gap: 13px; }.quick-actions a { color: var(--accent-dark); font-size: .84rem; font-weight: 700; text-decoration: none; }.count-badge { color: #287665; background: #e5f5f0; border-radius: 99px; font-size: .72rem; font-weight: 750; padding: 6px 10px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-top: 2px; }.check-option { border: 1px solid #d6e3e0; border-radius: 8px; color: #456164; cursor: pointer; font-size: .82rem; padding: 8px 9px; }.check-option:has(input:checked) { background: #e8f5f1; border-color: #91ccbe; color: #176957; font-weight: 650; }.check-option input { accent-color: var(--accent); margin-right: 5px; }
.working-hours-grid { display: grid; gap: 8px; }.working-hours-row { align-items: end; border: 1px solid #d6e3e0; border-radius: 8px; display: grid; gap: 10px; grid-template-columns: minmax(145px, 1fr) minmax(115px, .5fr) minmax(115px, .5fr); padding: 9px 11px; }.working-hours-row .status-switch { margin-bottom: 5px; } @media (max-width: 640px) { .working-hours-row { grid-template-columns: 1fr 1fr; }.working-hours-row .status-switch { grid-column: 1 / -1; } }
.account-card { max-width: 620px; }.alert-info { border-color: #bcd9e8; background: #edf7fc; color: #265a77; }
.inline-edit { display: flex; align-items: center; gap: 7px; min-width: 250px; }.inline-edit .form-control { min-width: 150px; }
.category-list { display: grid; gap: 9px; }.category-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }.category-card[draggable="true"] { cursor: grab; }.category-card.is-dragging { opacity: .45; cursor: grabbing; }.drag-handle { color: #8ba4a0; cursor: grab; font-size: 1.2rem; line-height: 1; }.portal-table tr[draggable="true"] { cursor: grab; }.portal-table tr.is-dragging { opacity: .45; }.category-card-title { flex: 1; }.category-card-title strong { display: block; color: var(--ink); }.category-card-title small { color: var(--muted); font-size: .76rem; }.category-card-actions,.order-buttons { display: flex; align-items: center; gap: 7px; }.category-card-actions form,.order-buttons form { margin: 0; }
.section-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 22px; margin: 0 0 22px; }.section-tabs a,.section-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: .87rem; font-weight: 700; padding: 0 2px 10px; text-decoration: none; }.section-tabs a:hover,.section-tabs button:hover { color: var(--accent-dark); }.section-tabs a.active,.section-tabs button.active { border-color: var(--accent); color: var(--accent-dark); }
.status-switch-form { margin: 0; }.status-switch { display: inline-flex; align-items: center; gap: 7px; color: #6d7f82; cursor: pointer; font-size: .75rem; font-weight: 750; white-space: nowrap; }.status-switch input { position: absolute; opacity: 0; }.status-track { position: relative; width: 34px; height: 20px; background: #aebcba; border-radius: 99px; transition: background .15s ease; }.status-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.22); transition: transform .15s ease; }.status-switch input:checked + .status-track { background: var(--accent); }.status-switch input:checked + .status-track::after { transform: translateX(14px); }.status-switch input:checked ~ .status-text { color: var(--accent-dark); }.status-switch input:focus-visible + .status-track { outline: 3px solid rgba(22,124,106,.25); outline-offset: 2px; }
.subcategory-editor { display: grid; gap: 18px; }.subcategory-card { background: #f7fbfa; border: 2px solid #a9c9c2; border-left: 6px solid var(--accent); border-radius: 13px; box-shadow: 0 7px 20px rgba(20, 60, 56, .12); padding: 19px 20px; }.subcategory-card[draggable="true"] { cursor: grab; }.subcategory-card.is-dragging { opacity: .45; }.subcategory-card .drag-handle { float: right; }
.customer-category-info { background: #edf8f5; border-left: 3px solid var(--accent); border-radius: 0 7px 7px 0; color: #315956; font-size: .83rem; margin-top: 10px; padding: 9px 11px; }.customer-category-info strong { color: var(--accent-dark); display: block; margin-bottom: 2px; }.customer-category-info p { margin: 0; }
.category-thumbnail { border-radius: 8px; max-width: 110px; object-fit: cover; }.customer-category-info { display: flex; align-items: flex-start; gap: 10px; }.customer-category-info img { border-radius: 7px; max-width: 120px; object-fit: cover; }
.image-upload-form { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }.image-upload-form > div { flex: 1 1 260px; }.category-image-preview { border: 1px solid #d6e1df; border-radius: 8px; max-width: 150px; object-fit: cover; }.settings-preview { align-items: center; background: #edf8f5; border-radius: 8px; display: flex; gap: 12px; padding: 12px; }.settings-preview span { background: var(--accent); border-radius: 7px; display: inline-block; width: 75px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }.empty-state > span { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: #e8f4f1; color: var(--accent); font-size: 1.3rem; }.empty-state p { max-width: 520px; margin: 0 auto 18px; font-size: .9rem; }.form-label { color: #456164; font-size: .78rem; font-weight: 750; }.form-control,.form-select { border: 2px solid #78918d; padding: .65rem .75rem; }.form-control:focus,.form-select:focus { border-color: #258b78; box-shadow: 0 0 0 .2rem rgba(37, 139, 120, .16); }.input-group-text { border-width: 2px; border-color: #78918d; }.form-control:disabled,.form-select:disabled,.form-control[readonly] { border-color: #91a6a2; }.duration-editor-table input.form-control[readonly] { border-color: #91a6a2; }.date-picker-button { top: 2px; right: 2px; bottom: 2px; border-left-width: 2px; border-left-color: #78918d; }.btn-primary { background-color: var(--accent); border-color: var(--accent); font-weight: 700; }.btn-primary:hover { background-color: var(--accent-dark); border-color: var(--accent-dark); }.btn-outline-primary { color: var(--accent); border-color: var(--accent); font-weight: 700; }.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); }
.form-select option.company-treatment-option { background: #dff3ed; color: #0f6655; font-weight: 800; }
.form-select.company-treatment-selected { background-color: #e8f6f2; border-color: var(--accent); color: #0f6655; font-weight: 800; }
.form-select.subcategory-unavailable:disabled {
background-color: #9ca3af;
border-color: #6b7280;
color: #1f2937;
cursor: not-allowed;
opacity: 1;
}
.customer-price-notice { border: 2px solid #62a892; border-left: 6px solid var(--accent); font-size: .82rem; line-height: 1.45; padding: .65rem .75rem; }
@media (max-width: 840px) { .portal-sidebar { display: none; }.portal-mobile-brand { display: flex; align-items: center; justify-content: space-between; background: var(--navy); padding: 14px 20px; }.portal-mobile-brand a { color: #fff; font-weight: 750; text-decoration: none; }.portal-mobile-brand form { margin: 0; }.portal-mobile-brand button { border: 1px solid rgba(255,255,255,.55); border-radius: 8px; padding: 6px 12px; background: transparent; color: #fff; font-size: .85rem; }.portal-content { padding: 30px 20px; }.metric-grid { grid-template-columns: 1fr; }.page-heading { display: block; }.page-heading .btn,.page-heading .text-link { display: inline-block; margin-top: 16px; } }
.hero { max-width: 760px; padding: 4rem 0 2rem; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.08; color: #173b35; }
.hero p { font-size: 1.15rem; max-width: 620px; color: #48605a; }
.landing-page { max-width: 1180px; margin: 0 auto; color: #173b35; }
.landing-nav { display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 0; }
.landing-nav nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.landing-nav nav > a:not(.btn) { color: #355750; text-decoration: none; font-weight: 600; }
.landing-brand { color: #167c6a; font-size: 1.7rem; font-weight: 800; text-decoration: none; }
.landing-hero { min-height: 580px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: center; padding: 4rem 0 5rem; }
.landing-hero h1 { font-size: clamp(2.7rem, 6vw, 5.2rem); line-height: 1.02; letter-spacing: -.04em; }
.landing-hero > div > p:not(.eyebrow) { max-width: 700px; font-size: 1.2rem; color: #526b65; }
.landing-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 2rem 0 .75rem; }
.landing-preview { padding: 2.5rem; border-radius: 28px; background: linear-gradient(145deg,#e6f6f1,#fff); box-shadow: 0 22px 70px rgba(20,79,68,.14); border: 1px solid #cfe8e1; }
.landing-preview span { display: block; color: #5c746e; margin-bottom: .6rem; }
.landing-preview strong { display: block; font-size: clamp(1.25rem,2.5vw,2rem); color: #167c6a; overflow-wrap: anywhere; }
.landing-preview p { margin: 1.5rem 0 0; }
.landing-section { padding: 5rem 0; scroll-margin-top: 1rem; }
.landing-section > h2 { max-width: 760px; font-size: clamp(2rem,4vw,3.3rem); margin-bottom: 2rem; }
.landing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.landing-grid article { padding: 1.75rem; border: 1px solid #dbe9e5; border-radius: 20px; background: #fff; }
.landing-grid article > span { color: #167c6a; font-size: 1.6rem; }
.landing-grid h3 { margin-top: .8rem; font-size: 1.2rem; }
.landing-grid p { color: #5a6f69; margin-bottom: 0; }
.landing-plans { border-top: 1px solid #e0ebe8; }
.landing-plan-grid article { min-height: 190px; }
.landing-plan-grid .featured { border: 2px solid #167c6a; box-shadow: 0 12px 34px rgba(22,124,106,.12); }
.landing-cta { margin: 4rem 0 2rem; padding: 4rem; text-align: center; border-radius: 28px; color: #fff; background: linear-gradient(135deg,#126b5c,#173b35); }
.landing-cta p { color: #d9ebe6; }
.landing-cta .btn { margin: .35rem; }
.usp-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 0 0 2rem; }
.usp-strip > div { padding: 1.25rem 1.4rem; border: 1px solid #cfe3de; border-radius: 16px; background: #f7fbfa; }
.usp-strip strong,.usp-strip span { display: block; }.usp-strip strong { color: #167c6a; margin-bottom: .35rem; }.usp-strip span { color: #526b65; font-size: .9rem; }
.marketing-page { padding-bottom: 1rem; }.marketing-nav { border-bottom: 1px solid #e0ebe8; }.marketing-intro { max-width: 880px; padding: 5rem 0 3rem; }.marketing-intro h1 { font-size: clamp(2.4rem,5vw,4.5rem); line-height: 1.04; letter-spacing: -.04em; }.marketing-intro > p:last-child { max-width: 760px; color: #526b65; font-size: 1.15rem; }
.price-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; }.price-summary-grid article { display: flex; flex-direction: column; align-items: flex-start; min-height: 280px; padding: 2rem; border: 1px solid #d5e6e2; border-radius: 20px; background: #fff; }.price-summary-grid article.featured { border: 2px solid #167c6a; box-shadow: 0 16px 44px rgba(22,124,106,.13); }.price-summary-grid h2 { font-size: 1.1rem; }.price-summary-grid strong { font-size: 2.2rem; color: #173b35; }.price-summary-grid span { color: #6a7d78; }.price-summary-grid p { flex: 1; margin: 1.25rem 0; color: #526b65; }
.marketing-section-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.5rem; }.marketing-section-heading h2 { margin: 0; }.marketing-section-heading > p { max-width: 440px; color: #60736e; }
.feature-table-wrap { overflow: auto; border: 1px solid #c8ddd8; border-radius: 18px; box-shadow: 0 12px 40px rgba(20,79,68,.07); }.feature-comparison { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; background: #fff; }.feature-comparison th,.feature-comparison td { padding: 1rem 1.1rem; border-right: 1px solid #e1ece9; border-bottom: 1px solid #e1ece9; vertical-align: top; }.feature-comparison thead th { position: sticky; top: 0; background: #173b35; color: #fff; z-index: 1; }.feature-comparison thead th:not(:first-child) { text-align: center; }.feature-comparison tbody th { width: 28%; color: #173b35; }.feature-comparison tbody th small { display: block; margin-top: .3rem; color: #70827e; font-weight: 400; }.feature-comparison td { width: 24%; text-align: center; color: #435e58; }.feature-comparison tr:last-child th,.feature-comparison tr:last-child td { border-bottom: 0; }
.product-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; padding: 4rem 0; border-top: 1px solid #e0ebe8; }.product-story.reverse > div { order: 2; }.product-story h2 { font-size: clamp(1.9rem,3vw,3rem); }.product-story p,.product-story li { color: #526b65; }.product-story li { margin-bottom: .6rem; }.product-story figure { margin: 0; }.product-story img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 18px 60px rgba(20,79,68,.14); }.product-story figcaption { margin-top: .7rem; color: #70827e; font-size: .8rem; text-align: center; }
.contact-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2.5rem; align-items: start; margin-bottom: 5rem; }.contact-benefits { padding: 1.5rem 0; }.contact-benefits li { margin-bottom: .6rem; color: #526b65; }.contact-form { display: grid; gap: 1.1rem; }.contact-form .checkbox-emphasis { padding: 1rem 1rem 1rem 2.7rem; border: 2px solid #789e96; border-radius: 10px; background: #f8fbfa; }.marketing-alert { max-width: 900px; }
.contact-inquiry-message { white-space: pre-wrap; margin: 1rem 0; padding: 1rem; border-radius: 8px; background: #f7faf9; }
@media (max-width: 800px) { .landing-nav { flex-wrap: wrap; } .landing-nav nav { width: 100%; margin-left: 0; flex-wrap: wrap; } .landing-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; } .landing-grid { grid-template-columns: 1fr; } .landing-cta { padding: 2.25rem 1.25rem; } }
@media (max-width: 800px) { .usp-strip,.price-summary-grid,.product-story,.contact-layout { grid-template-columns: 1fr; }.product-story.reverse > div { order: 0; }.marketing-intro { padding-top: 3rem; }.marketing-section-heading { display: block; } }
.eyebrow { color: #267465 !important; font-size: .85rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.booking-card { max-width: 760px; }.booking-tenant-brand { align-items: center; color: var(--ink); display: flex; font-size: 1.05rem; gap: 12px; margin-bottom: 12px; }.booking-tenant-brand strong { display: block; font-size: 1.2rem; }.booking-tenant-brand img { max-height: 72px; max-width: 220px; object-fit: contain; object-position: left center; }.booking-tenant-initial { align-items: center; background: var(--accent); border-radius: 14px; color: #fff; display: inline-flex; font-size: 1.35rem; font-weight: 800; height: 52px; justify-content: center; width: 52px; }.booking-tenant-website { color: var(--accent-dark); display: inline-block; font-size: .82rem; margin-top: 2px; }.booking-social-links { display: flex; gap: 8px; margin: 0 0 20px; }.booking-social-links a { align-items: center; background: #e8f0ef; border-radius: 50%; color: #1d5553; display: inline-flex; font-size: .86rem; font-weight: 800; height: 32px; justify-content: center; text-decoration: none; width: 32px; }.booking-social-links a:hover { background: #cde5df; color: #0b403e; }.booking-legal-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 22px 0 4px; }.booking-legal-links a { color: #557371; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.language-switcher { display: flex; gap: 5px; margin: 0 0 16px; }.language-switcher a { border: 1px solid #c9d8d5; border-radius: 6px; color: #557371; font-size: .72rem; font-weight: 800; padding: 4px 7px; text-decoration: none; }.language-switcher a.active, .language-switcher a.active:visited, .language-switcher a.active:hover, .language-switcher a.active:focus-visible { background: #175f5a; border-color: #175f5a; color: #fff !important; -webkit-text-fill-color: #fff; }
.time-slot { min-width: 100px; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
.button { display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; font-size: .85rem; font-weight: 750; line-height: 1.2; padding: .66rem 1rem; text-decoration: none; }.button:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }.button-secondary { background: #fff; border-color: #c6d5d2; color: #456164; }.button-secondary:hover { background: #e9f1ef; border-color: #b6cac6; color: #264a4b; }.button-danger { background: #fff; border-color: #e7b8b8; color: #a03030; }.button-danger:hover { background: #a03030; border-color: #a03030; }.button-small { font-size: .75rem; padding: .4rem .65rem; }.section-title,.section-heading h2 { color: var(--ink); font-size: 1.08rem; font-weight: 730; margin: 0 0 5px; }.section-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; }.section-heading p,.muted,.form-text { color: var(--muted); font-size: .83rem; }.empty-note { color: var(--muted); font-size: .88rem; }.switch-field { display: inline-flex; align-items: center; gap: 9px; color: #456164; cursor: pointer; font-size: .84rem; font-weight: 650; }.switch-field input { position: absolute; opacity: 0; }.switch-control { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 99px; background: #abb9b7; transition: background .15s ease; }.switch-control::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.22); content: ""; transition: transform .15s ease; }.switch-field input:checked + .switch-control { background: var(--accent); }.switch-field input:checked + .switch-control::after { transform: translateX(16px); }.switch-field input:focus-visible + .switch-control { outline: 3px solid rgba(22,124,106,.25); outline-offset: 2px; }.employee-photo-preview { width: 96px; height: 96px; border: 1px solid #d6e1df; border-radius: 12px; object-fit: cover; }.checkbox-list { display: grid; gap: 8px; }.checkbox-row { display: flex; align-items: center; gap: 8px; border: 1px solid #d6e3e0; border-radius: 8px; color: #456164; cursor: pointer; font-size: .85rem; padding: 9px 10px; }.checkbox-row:has(input:checked) { background: #e8f5f1; border-color: #91ccbe; color: #176957; font-weight: 650; }.checkbox-row input { accent-color: var(--accent); }.checkbox-row small { display: block; color: var(--muted); font-size: .75rem; font-weight: 500; margin-top: 2px; }.availability-editor { display: grid; gap: 8px; }.availability-row { align-items: end; border: 1px solid #d6e3e0; border-radius: 8px; display: grid; gap: 10px; grid-template-columns: minmax(175px, 1fr) minmax(110px, .55fr) minmax(110px, .55fr); padding: 10px 12px; }.availability-row > label:not(.switch-field) > span { display: block; color: var(--muted); font-size: .73rem; font-weight: 700; margin-bottom: 3px; }.data-table { width: 100%; border-collapse: collapse; }.data-table th { color: #738785; font-size: .68rem; font-weight: 800; letter-spacing: .08em; padding: 0 12px 11px; text-transform: uppercase; }.data-table td { border-top: 1px solid var(--line); color: #365255; font-size: .88rem; padding: 13px 12px; vertical-align: middle; }.data-table td:first-child,.data-table th:first-child { padding-left: 0; }.data-table td:last-child,.data-table th:last-child { padding-right: 0; }.data-table form { margin: 0; }.special-day-form { border: 1px solid #dbe8e5; border-radius: 10px; background: #f8fbfa; padding: 16px; }
.customer-search-results { z-index: 1050; max-height: 22rem; overflow-y: auto; }
.resource-scope-list { display: grid; gap: 8px; }.resource-scope-row { align-items: center; background: #f8fbfa; border: 1px solid #d6e3e0; border-radius: 9px; display: grid; gap: 12px; grid-template-columns: minmax(180px, 1fr) minmax(170px, .7fr) minmax(190px, .8fr); padding: 11px 12px; }.resource-scope-row strong, .resource-scope-row small { display: block; }.resource-scope-row small { color: var(--muted); font-size: .75rem; margin-top: 2px; }.resource-scope-row .form-check { margin: 0; }
.resource-scope-row .form-check-input { appearance: none; -webkit-appearance: none; background-color: #fff; background-image: none; border: 2px solid #58716f; border-radius: 4px; box-shadow: 0 0 0 1px rgba(25,56,59,.08); cursor: pointer; height: 1.2rem; margin-top: .1rem; width: 1.2rem; }.resource-scope-row .form-check-input:hover { border-color: var(--accent); }.resource-scope-row .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(22,124,106,.2); }.resource-scope-row .form-check-input:checked { background-color: var(--accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); border-color: var(--accent); }.resource-scope-row .form-check-label { cursor: pointer; font-weight: 650; padding-left: 3px; }
@media (max-width: 760px) { .resource-scope-row { grid-template-columns: 1fr; } }
.resource-overview-list { display: grid; gap: 18px; }
.resource-overview-item { background: #f8fbfa; border: 1px solid #cbdcd8; border-radius: 12px; box-shadow: 0 5px 16px rgba(20, 60, 56, .07); padding: 18px; }
.resource-detail-table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.resource-detail-table th { border-bottom: 2px solid #b8ceca; color: #738785; font-size: .7rem; font-weight: 800; letter-spacing: .07em; padding: 0 12px 10px; text-align: left; text-transform: uppercase; }
.resource-detail-table th:first-child, .resource-detail-table td:first-child { padding-left: 0; width: 35%; }
.resource-detail-table th:last-child, .resource-detail-table td:last-child { padding-right: 0; width: 65%; }
.resource-detail-table td { border-bottom: 1px solid var(--line); color: #365255; font-size: .86rem; padding: 10px 12px; vertical-align: top; }
.resource-detail-table tbody tr:last-child td { border-bottom: 0; }
.resource-detail-table td:first-child { color: var(--muted); font-weight: 700; }
.resource-overview-actions { display: flex; align-items: center; gap: 9px; margin-top: 15px; }
.resource-overview-actions form { margin: 0; }
.customer-overview-grid { display: grid; gap: 1rem; }
.customer-overview-card { overflow: hidden; border: 2px solid #a9c9c2; border-left: 6px solid var(--accent); border-radius: 13px; background: #fff; box-shadow: 0 7px 20px rgba(20, 60, 56, .1); }
.customer-overview-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 16px 18px 12px; background: #f7fbfa; border-bottom: 1px solid #dbe8e5; }
.customer-overview-heading h3 { margin: 0; color: var(--ink); font-size: 1.08rem; }
.customer-overview-details { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(135px, 1fr)); gap: 1rem; padding: 16px 18px; }
.customer-overview-details > div { min-width: 0; }
.customer-overview-label { display: block; margin-bottom: .35rem; color: #738785; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.customer-overview-details strong, .customer-overview-details small { display: block; overflow-wrap: anywhere; }
.customer-overview-details strong { color: var(--ink); font-size: .9rem; }
.customer-overview-details small { margin-top: .2rem; color: var(--muted); }
.customer-overview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 13px 18px 16px; border-top: 1px solid #dbe8e5; background: #f7fbfa; }
.customer-overview-actions form { margin: 0; }
/* Responsive Grundlayout: Inhalte duerfen den verfuegbaren Bildschirm nie verbreitern. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }
.portal-sidebar { flex: 0 0 260px; }
.portal-main, .portal-content, .content-card, .metric-card, .card-heading > div, .page-heading > div, .row > * { min-width: 0; }
.portal-content { width: 100%; }
.content-card { max-width: 100%; }
.content-card p, .content-card td, .content-card th, .page-heading p, .page-heading h1, .card-heading h2 { overflow-wrap: anywhere; }
.table-responsive { display: block; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.table-responsive > .portal-table, .table-responsive > .data-table { width: 100%; }
.appointment-list-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: min(100%, 320px); }
.appointment-list-tools .form-control { width: min(280px, 100%); }
.appointment-list-scroll { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.appointment-list-scroll .portal-table thead { position: sticky; top: 0; z-index: 2; background: #f7fbfa; }
.appointment-list-scroll .portal-table th { padding-top: 10px; }
.operational-workspace { display: grid; grid-template-columns: minmax(212px, 255px) minmax(0, 1fr); gap: 17px; align-items: start; }
.operational-sidebar { position: sticky; z-index: 12; top: 16px; max-height: calc(100vh - 32px); overflow: auto; scrollbar-gutter: stable; }
.operational-sidebar .content-card { margin: 0; padding: 20px; }
.operational-sidebar-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.operational-sidebar-heading h2 { margin: 2px 0 0; color: var(--ink); font-size: 1.08rem; }
.operational-sidebar-toggle { min-width: 2rem; font-size: 1.15rem; line-height: 1; }
.operational-main { min-width: 0; }
.operational-sidebar-open { position: sticky; z-index: 13; top: 10px; box-shadow: 0 5px 15px rgba(20,60,56,.14); }
.operational-workspace.is-sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
.operational-workspace.is-sidebar-collapsed > .operational-sidebar { display: none; }
.operational-workspace.is-sidebar-collapsed .operational-sidebar-open { display: inline-flex !important; }
.operational-sidebar .row > [class*="col-"] { width: 100%; }
.operational-sidebar .calendar-filter-options { display: grid; grid-template-columns: 1fr; }
.operational-sidebar .calendar-filter-choice { width: 100%; }
.workspace-section-tabs { display: grid; gap: 4px; border-bottom: 0; }
.workspace-section-tabs a { width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; }
.workspace-section-tabs a.active { border-color: #a9c9c2; background: #e8f5f1; }
.calendar-workspace .calendar-filter-panel .row { display: grid; gap: 20px; margin: 0; }
.calendar-workspace .calendar-filter-panel .row > * { padding: 0; }
.appointment-workspace .appointment-list-scroll { max-height: min(72vh, 820px); }
.internal-appointment-scroll { max-height: min(48vh, 520px); }
.operational-table-scroll,
.contracts-table-workspace .table-responsive { max-height: min(72vh, 820px); overflow: auto; scrollbar-gutter: stable; }
.operational-table-scroll .portal-table thead,
.contracts-table-workspace .table-responsive .portal-table thead { position: sticky; top: 0; z-index: 3; background: var(--surface, #fff); box-shadow: 0 1px 0 rgba(15, 23, 42, .16); }
.operational-sidebar-summary { display: grid; gap: .15rem; margin-top: 1rem; padding: .85rem; border: 1px solid rgba(15, 23, 42, .14); border-radius: .75rem; background: rgba(255, 255, 255, .72); }
.operational-sidebar-summary span,
.operational-sidebar-summary small { color: var(--muted); }
.operational-sidebar-summary strong { font-size: 1.45rem; }
@media (min-width: 901px) {
.operational-sidebar { font-size: .85rem; }
.operational-sidebar .content-card { padding: 17px; }
.operational-sidebar-heading { gap: 10px; margin-bottom: 15px; }
.operational-sidebar-heading h2 { font-size: .92rem; }
.operational-sidebar .section-kicker,
.operational-sidebar .form-label,
.operational-sidebar .form-text,
.operational-sidebar .btn,
.operational-sidebar .form-check-label,
.operational-sidebar .workspace-section-tabs a { font-size: .85em; }
.operational-sidebar .form-control,
.operational-sidebar .form-select { min-height: calc(1.5em + .64rem + 2px); padding: .32rem .55rem; font-size: .85em; }
.operational-sidebar .form-check-input { width: .9rem; height: .9rem; margin-top: .18rem; }
.operational-sidebar .row { --bs-gutter-x: .85rem; --bs-gutter-y: .85rem; }
.operational-sidebar hr { margin: .85rem 0; }
.operational-sidebar-summary { margin-top: .85rem; padding: .72rem; border-radius: .64rem; }
.operational-sidebar-summary strong { font-size: 1.23rem; }
}
.billing-review-scroll { max-height: min(68vh, 720px); min-height: 240px; resize: vertical; }
.billing-review-select-column { width: 48px; min-width: 48px; text-align: center; }
.billing-review-select-column .form-check-input {
width: 1.25rem;
height: 1.25rem;
margin: 0;
border: 2px solid #365255;
border-radius: .25rem;
background-color: #fff;
box-shadow: 0 0 0 2px rgba(54, 82, 85, .12);
cursor: pointer;
}
.billing-review-select-column .form-check-input:hover,
.billing-review-select-column .form-check-input:focus-visible {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(20, 116, 105, .22);
}
.billing-review-select-column .form-check-input:checked,
.billing-review-select-column .form-check-input:indeterminate {
border-color: var(--accent);
background-color: var(--accent);
}
.billing-review-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 2px solid #b9d8d0; border-left: 6px solid var(--accent); border-radius: 12px; background: #f7fbfa; box-shadow: 0 4px 12px rgba(20, 73, 67, .08); }
.appointment-filter-row th { background: #edf6f3; border-top: 1px solid #c8ddd8; padding: 8px 5px 10px; text-transform: none; }
.appointment-filter-row .form-select { min-width: 120px; color: #365255; font-size: .75rem; font-weight: 650; letter-spacing: 0; }
.appointment-filter-row .btn { white-space: normal; min-width: 105px; }
.appointment-bulk-flags { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 320px); gap: 18px; align-items: end; padding: 16px; border: 2px solid #b9d8d0; border-left: 6px solid var(--accent); border-radius: 12px; background: #f7fbfa; box-shadow: 0 5px 14px rgba(20, 73, 67, .1); }
@media (max-width: 800px) { .appointment-bulk-flags { grid-template-columns: 1fr; } }
.appointment-invoice-bulk { border-color: #9fc9bd; background: #f2faf7; }
.customer-invoice-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 1px solid #b9c9c5; color: #405852; font-size: .86rem; line-height: 1.5; }
@media (max-width: 700px) { .customer-invoice-footer { grid-template-columns: 1fr; } }
@media print { .customer-invoice-actions, header.site-header, nav { display: none !important; } .customer-invoice-document { border: 0 !important; box-shadow: none !important; padding: 0 !important; } }
@media (max-width: 767.98px) {
.appointment-list-tools { justify-content: flex-start; margin-top: 12px; min-width: 100%; }
.appointment-list-tools .form-control { width: 100%; }
}
.treatment-card-table { min-width: 1040px; }
.duration-editor-table { min-width: 1020px; }
.nav-tabs, .nav-pills, .section-tabs, .header-actions, .quick-actions, .category-card-actions { flex-wrap: wrap; max-width: 100%; }
.form-control, .form-select, textarea { max-width: 100%; min-width: 0; }
@media (max-width: 1400px) {
.portal-sidebar { flex-basis: 230px; padding: 22px 13px 18px; }
.portal-content { max-width: none; padding: 36px 32px; }
.content-card { padding: 21px; }
.portal-table th, .portal-table td { padding-left: 10px; padding-right: 10px; }
.portal-table td { font-size: .82rem; }
.btn { font-size: .84rem; }
}
@media (max-width: 1100px) {
.portal-sidebar { display: none; }
.portal-mobile-brand { display: flex; align-items: center; justify-content: space-between; background: var(--navy); padding: 12px 18px; }
.portal-mobile-brand a { color: #fff; font-weight: 750; text-decoration: none; }
.portal-mobile-brand form { margin: 0; }
.portal-mobile-brand button { border: 1px solid rgba(255,255,255,.55); border-radius: 8px; padding: 6px 12px; background: transparent; color: #fff; font-size: .82rem; }
.portal-content { padding: 28px 22px; }
.page-heading { gap: 16px; margin-bottom: 24px; }
.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.customer-overview-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.portal-content { padding: 20px 12px; }
.content-card { border-radius: 10px; padding: 16px 12px; }
.page-heading, .card-heading, .section-heading { display: block; }
.header-actions, .card-heading > a, .card-heading > .count-badge { margin-top: 12px; }
.metric-grid, .check-grid { grid-template-columns: 1fr; }
.nav-tabs, .nav-pills, .section-tabs { gap: 5px 10px; }
.nav-link, .section-tabs a, .section-tabs button { font-size: .79rem; }
.portal-table th { font-size: .62rem; letter-spacing: .05em; }
.portal-table td { font-size: .78rem; }
.btn { max-width: 100%; white-space: normal; }
.category-card, .image-upload-form { align-items: stretch; flex-direction: column; }
.inline-edit { align-items: stretch; flex-direction: column; min-width: 0; }
.customer-overview-heading { display: block; }
.customer-overview-heading > :last-child { margin-top: .75rem; }
.customer-overview-details { grid-template-columns: 1fr; }
.customer-overview-actions > .btn, .customer-overview-actions form, .customer-overview-actions form .btn { width: 100%; }
}
.settings-tabs { flex-wrap:wrap; }
.settings-area-tabs { flex-wrap: wrap; }
.company-detail-tabs, .company-detail-subtabs, .employee-edit-tabs, .employee-edit-subtabs { flex-wrap: wrap; }
.settings-overview-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.settings-overview-card { color: inherit; display: block; min-height: 180px; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.settings-overview-card:hover, .settings-overview-card:focus-visible { border-color: var(--accent); box-shadow: 0 12px 28px rgba(13, 52, 48, .14); color: inherit; transform: translateY(-2px); }
.settings-overview-card h2 { font-size: 1.16rem; margin: 6px 0 10px; }
.settings-overview-card p { color: var(--muted); margin-bottom: 0; }
.booking-step-card { border:1px solid #cbd8d6; box-shadow:0 8px 22px rgba(25,56,59,.06); }
.booking-cart-card { border:2px solid #8fb8b1; border-left:6px solid var(--accent); box-shadow:0 10px 28px rgba(20,60,56,.09); }
.booking-cart-list { display:grid; gap:.65rem; }
.booking-cart-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border:1px solid #cbd8d6; border-radius:.7rem; background:#fff; }
.booking-cart-item div { display:grid; gap:.15rem; min-width:0; }
.booking-cart-item span { color:var(--muted); font-size:.86rem; overflow-wrap:anywhere; }
@media (max-width:600px){.booking-cart-item{align-items:flex-start;flex-direction:column}.booking-cart-item .btn{width:100%}}
.booking-practitioner-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
.booking-practitioner-card { align-items:center; background:#fff; border:2px solid #cbd8d6; border-radius:12px; color:inherit; display:flex; flex-direction:column; gap:8px; padding:14px; text-align:center; }
.booking-practitioner-card:hover,.booking-practitioner-card.selected { border-color:var(--accent); box-shadow:0 0 0 3px rgba(22,124,106,.12); }
.booking-practitioner-card img,.booking-practitioner-initial { border-radius:50%; height:72px; object-fit:cover; width:72px; }
.booking-practitioner-initial { align-items:center; background:#dcebe8; color:#174d47; display:flex; font-size:1.3rem; font-weight:750; justify-content:center; }
.booking-calendar-weekdays,.booking-calendar-days { display:grid; gap:6px; grid-template-columns:repeat(7,minmax(0,1fr)); }
.booking-calendar-weekdays { color:#667b79; font-size:.78rem; font-weight:700; margin-bottom:6px; text-align:center; }
.booking-calendar-day { align-items:center; background:#fff; border:1px solid #bdd0cd; border-radius:9px; color:#183b39; display:flex; flex-direction:column; min-height:68px; padding:6px 2px; }
.booking-calendar-day small,.booking-calendar-day span { font-size:.68rem; }
.booking-calendar-day strong { font-size:1.05rem; }
.booking-calendar-day:hover:not(:disabled),.booking-calendar-day.selected { background:#e8f5f2; border-color:var(--accent); box-shadow:0 0 0 2px rgba(22,124,106,.12); }
.booking-calendar-day:disabled { background:#edf0f0; border-color:#e0e5e4; color:#a3aeac; cursor:not-allowed; opacity:.72; }
.booking-time-grid { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(74px,1fr)); }
@media (max-width:575.98px) { .booking-calendar-weekdays,.booking-calendar-days { gap:3px; } .booking-calendar-day { min-height:58px; } }
.booking-treatment-info {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.45rem;
height: 1.45rem;
margin-top: .55rem;
border: 2px solid var(--bs-primary);
border-radius: 50%;
color: var(--bs-primary);
font-weight: 800;
cursor: help;
}
.booking-treatment-tooltip {
position: absolute;
z-index: 20;
left: 0;
bottom: calc(100% + .5rem);
display: none;
width: min(32rem, 80vw);
padding: .75rem 1rem;
border-radius: .65rem;
background: #172033;
color: #fff;
font-size: .9rem;
font-weight: 400;
line-height: 1.45;
white-space: pre-line;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .22);
}
.booking-treatment-info:hover .booking-treatment-tooltip,
.booking-treatment-info:focus .booking-treatment-tooltip {
display: block;
}
.booking-wizard-progress {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .65rem;
margin: 1.25rem 0;
}
.booking-wizard-step {
display: flex;
align-items: center;
gap: .55rem;
min-width: 0;
padding: .65rem .75rem;
border: 1px solid #d6dce8;
border-radius: .75rem;
background: #fff;
color: #697386;
text-align: left;
}
.booking-wizard-step span {
display: inline-flex;
flex: 0 0 1.7rem;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
background: #e9edf5;
font-weight: 800;
}
.booking-wizard-step small { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.booking-wizard-step.active { border-color: var(--bs-primary); color: var(--bs-primary); box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .12); }
.booking-wizard-step.active span, .booking-wizard-step.completed span { background: var(--bs-primary); color: #fff; }
.booking-wizard-step.completed { color: #24324a; cursor: pointer; }
.booking-wizard-step:disabled { opacity: .68; cursor: default; }
.booking-wizard-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-top: 1rem;
}
@media (max-width: 640px) {
.booking-wizard-progress { grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.booking-wizard-step { justify-content: center; padding: .55rem .25rem; }
.booking-wizard-step small { display: none; }
.booking-wizard-actions { align-items: stretch; flex-direction: column-reverse; }
.booking-wizard-actions .btn { width: 100%; }
}
.booking-location-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: .85rem;
}
.booking-location-card {
display: grid;
grid-template-columns: 92px 1fr;
min-height: 92px;
padding: 0;
overflow: hidden;
border: 2px solid #d8deea;
border-radius: .85rem;
background: #fff;
color: #24324a;
text-align: left;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.booking-location-card:hover { border-color: var(--bs-primary); transform: translateY(-1px); }
.booking-location-card.selected { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .14); }
.booking-location-card img { width: 92px; height: 100%; min-height: 92px; object-fit: cover; }
.booking-location-placeholder { display: flex; align-items: center; justify-content: center; min-height: 92px; background: #edf1f7; color: var(--bs-primary); font-size: 2rem; }
.booking-location-details { display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: .75rem; }
.booking-location-details strong { font-size: 1rem; }
.booking-location-details small { color: #667085; line-height: 1.35; }
.booking-category-list { display: grid; gap: .85rem; }
.booking-category-card { overflow: hidden; border: 2px solid #d8deea; border-radius: .9rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.booking-category-card.expanded { overflow: visible; border-color: var(--bs-primary); box-shadow: 0 .5rem 1.4rem rgba(23, 55, 83, .1); }
.booking-category-header { display: grid; grid-template-columns: minmax(72px, 130px) 1fr auto; align-items: center; gap: 1rem; width: 100%; padding: 0; border: 0; background: #fff; color: #24324a; text-align: left; }
.booking-category-header img { width: 100%; height: 94px; object-fit: cover; }
.booking-category-header strong { font-size: 1.12rem; }
.booking-category-placeholder { display: flex; align-items: center; justify-content: center; height: 94px; background: #edf1f7; color: var(--bs-primary); font-size: 2rem; }
.booking-category-chevron { margin-right: 1rem; color: var(--bs-primary); font-size: 1.65rem; transition: transform .15s ease; }
.booking-category-card.expanded .booking-category-chevron { transform: rotate(180deg); }
.booking-category-services { display: grid; gap: .65rem; padding: .9rem; border-top: 1px solid #e2e6ee; background: #f8fafc; }
.booking-service-option { overflow: visible; border: 1px solid #d9dfea; border-radius: .75rem; background: #fff; }
.booking-service-option.selected { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .1); }
.booking-service-button { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .85rem 1rem; border: 0; border-radius: .68rem; background: var(--accent); color: #fff; text-align: left; box-shadow: 0 .25rem .65rem rgba(22, 124, 106, .24); transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.booking-service-button:hover { color: #fff; filter: brightness(.94); transform: translateY(-1px); box-shadow: 0 .4rem .9rem rgba(22, 124, 106, .32); }
.booking-service-option.selected .booking-service-button { background: var(--accent-dark); color: #fff; box-shadow: 0 0 0 .2rem rgba(22, 124, 106, .2); }
.booking-service-button > span:first-child { display: flex; flex-direction: column; gap: .15rem; }
.booking-service-button small { color: rgba(255,255,255,.82); }
.booking-service-button-end { display: inline-flex; align-items: center; gap: .65rem; }
.booking-service-confirm { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid rgba(255,255,255,.68); border-radius: 50%; font-size: 1rem; font-weight: 800; }
.booking-treatment-info.compact { flex: 0 0 1.45rem; margin-top: 0; border-color: #fff; color: #fff; text-align: center; }
.booking-treatment-info.compact .booking-treatment-tooltip { right: 0; left: auto; max-width: min(32rem, calc(100vw - 2rem)); text-align: left; }
.booking-variant-buttons { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0 1rem 1rem; }
.booking-variant-button { display: inline-flex; flex-direction: column; align-items: center; min-width: 105px; padding: .55rem .8rem; border: 2px solid #d8deea; border-radius: .65rem; background: #fff; color: #24324a; }
.booking-variant-button span { color: #667085; font-size: .83rem; }
.booking-variant-button:hover, .booking-variant-button.selected { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); color: var(--bs-primary); }
.booking-service-next { display: flex; justify-content: flex-end; padding: 0 1rem 1rem; }
@media (max-width: 520px) {
.booking-category-header { grid-template-columns: 76px 1fr auto; gap: .65rem; }
.booking-category-header img, .booking-category-placeholder { height: 76px; }
.booking-category-header strong { font-size: 1rem; }
.booking-variant-button { flex: 1 1 95px; }
}
.employee-overview-grid { display: grid; gap: 1rem; }
.employee-overview-card { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(230px, .75fr); overflow: visible; border: 2px solid #a9c9c2; border-left: 6px solid var(--accent); border-radius: 13px; background: #f7fbfa; box-shadow: 0 7px 20px rgba(20, 60, 56, .12); }
.employee-overview-main { display: grid; grid-template-rows: auto auto auto; min-width: 0; }
.employee-overview-identity, .employee-overview-treatments, .employee-overview-meta { padding: 14px 16px; }
.employee-overview-identity, .employee-overview-treatments { border-bottom: 1px solid #dbe8e5; }
.employee-overview-identity .employee-avatar { width: 52px; height: 52px; }
.employee-overview-identity .employee-name strong { font-size: 1.05rem; }
.employee-overview-label { display: block; margin-bottom: .45rem; color: #738785; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.employee-treatment-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.employee-treatment-list > span { padding: .32rem .55rem; border: 1px solid #c8ddd8; border-radius: 99px; background: #fff; color: #315956; font-size: .76rem; }
.employee-overview-meta { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) auto; align-items: end; gap: 1rem; }
.employee-overview-meta strong { color: var(--ink); font-size: .88rem; }
.employee-overview-hours { padding: 16px; border-left: 2px solid #a9c9c2; background: #fff; border-radius: 0 11px 11px 0; }
.employee-overview-hours .employee-hours-table { font-size: .82rem; }
.employee-overview-hours .employee-hours-table td { padding-top: 3px; padding-bottom: 3px; }
.employee-information { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: .78rem; font-weight: 800; cursor: help; }
.employee-information-tooltip { position: absolute; z-index: 30; top: calc(100% + .5rem); left: 0; display: none; width: min(30rem, calc(100vw - 3rem)); padding: .75rem 1rem; border-radius: .65rem; background: #172033; color: #fff; font-size: .88rem; font-weight: 400; line-height: 1.45; white-space: pre-line; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.22); }
.employee-information:hover .employee-information-tooltip, .employee-information:focus .employee-information-tooltip { display: block; }
.field-help-trigger {
display: inline-grid;
place-items: center;
width: 1.2rem;
height: 1.2rem;
margin-left: .38rem;
padding: 0;
border: 2px solid var(--system-accent, #167c6a);
border-radius: 50%;
background: #fff;
color: var(--system-accent, #167c6a);
font-size: .76rem;
font-weight: 800;
line-height: 1;
vertical-align: .08rem;
cursor: help;
}
.field-help-trigger:hover,
.field-help-trigger:focus-visible,
.field-help-trigger[aria-expanded="true"] {
outline: none;
background: var(--system-accent, #167c6a);
color: #fff;
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--system-accent, #167c6a) 22%, transparent);
}
.field-help-popover {
position: fixed;
z-index: 2500;
width: min(25rem, calc(100vw - 1rem));
max-height: min(22rem, calc(100vh - 1rem));
padding: .9rem 1rem;
overflow: auto;
border: 1px solid #b9c8c4;
border-left: .35rem solid var(--system-accent, #167c6a);
border-radius: .7rem;
background: #fff;
color: #172a26;
box-shadow: 0 .8rem 2.4rem rgba(15, 35, 31, .25);
}
.field-help-popover[hidden] { display: none; }
.field-help-popover-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.field-help-popover-header strong { font-size: .98rem; }
.field-help-popover-header button { flex: 0 0 auto; margin: -.4rem -.4rem 0 0; border: 0; background: transparent; color: #435752; font-size: 1.45rem; line-height: 1; }
.field-help-popover p { margin: 0; font-size: .9rem; line-height: 1.5; }
.help-page-heading { padding-right: 6rem; }
.help-search-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); }
.help-search-row { position: relative; }
.help-search-row > span { position: absolute; z-index: 2; top: 50%; left: .9rem; transform: translateY(-50%); color: var(--accent-dark); font-size: 1.35rem; pointer-events: none; }
.help-search-row input { min-height: 3rem; padding-left: 2.7rem; font-size: 1rem; }
.help-search-result { margin: .65rem 0 0; color: var(--muted); font-size: .82rem; }
.help-layout { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.help-navigation { position: sticky; top: 1rem; padding: 1.2rem; }
.help-navigation h2 { margin: 0 0 .65rem; font-size: 1rem; }
.help-navigation nav { display: grid; gap: .25rem; }
.help-navigation a { padding: .48rem .6rem; border-radius: .45rem; color: var(--accent-dark); font-size: .84rem; font-weight: 700; text-decoration: none; }
.help-navigation a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.help-sections { display: grid; gap: 1.25rem; min-width: 0; }
.help-section { scroll-margin-top: 1rem; }
.help-article-list { display: grid; gap: .65rem; }
.help-article { border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); }
.help-article[hidden], .help-section[hidden] { display: none; }
.help-article summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; color: var(--ink); font-weight: 750; cursor: pointer; list-style: none; }
.help-article summary::-webkit-details-marker { display: none; }
.help-expand { color: var(--accent); font-size: 1.15rem; transition: transform .15s ease; }
.help-article[open] .help-expand { transform: rotate(45deg); }
.help-article-content { padding: 0 1rem 1rem; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.help-article-content p { margin: .85rem 0 .65rem; }
.help-article-content ol, .help-support-card ol { padding-left: 1.25rem; }
.help-article-content li, .help-support-card li { margin-bottom: .32rem; }
.help-empty { margin: 0; }
.help-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: -.45rem 0 1rem; color: var(--muted); font-size: .86rem; }
.help-breadcrumb a { color: var(--accent-dark); font-weight: 750; }
.help-detail-layout { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.help-visual-card { padding: 1rem; overflow: hidden; }
.help-visual-card img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: .65rem; background: #f4faf8; }
.help-visual-card figcaption { margin-top: .7rem; color: var(--muted); font-size: .82rem; }
.help-screen-mockup { position: relative; overflow: hidden; min-height: 28rem; border: 1px solid #a8c8c1; border-radius: .65rem; background: #eef6f4; color: #173b36; box-shadow: 0 .4rem 1.4rem rgba(20,60,56,.12); }
.help-screen-browser { display: flex; align-items: center; gap: .38rem; min-height: 2.4rem; padding: .55rem .75rem; border-bottom: 1px solid #b9cec9; background: #e3ecea; }
.help-screen-browser > span { width: .65rem; height: .65rem; border-radius: 50%; background: #9db4af; }
.help-screen-browser > div { flex: 1; margin-left: .35rem; padding: .3rem .7rem; border: 1px solid #c5d6d2; border-radius: .35rem; background: #fff; color: #61736f; font-size: .72rem; }
.help-screen-shell { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); min-height: 25.5rem; }
.help-screen-shell aside { display: flex; flex-direction: column; gap: .35rem; padding: 1rem .75rem; background: #173b36; color: #fff; }
.help-screen-shell aside strong { font-size: 1.3rem; }
.help-screen-shell aside small { margin: -.4rem 0 1rem; color: #b7d3cc; font-size: .65rem; }
.help-screen-shell aside span { padding: .45rem .55rem; border-radius: .35rem; color: #d8e8e4; font-size: .72rem; }
.help-screen-shell aside span.active { background: #2a6b5f; color: #fff; font-weight: 750; }
.help-screen-content { min-width: 0; padding: 1.25rem; }
.help-screen-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.help-screen-title div { display: grid; gap: .18rem; }
.help-screen-title small { color: #61736f; text-transform: uppercase; letter-spacing: .06em; }
.help-screen-title strong { font-size: 1.2rem; }
.help-screen-title em { padding: .25rem .55rem; border-radius: 999px; background: #e1f1ec; color: #246758; font-size: .68rem; font-style: normal; font-weight: 750; }
.help-screen-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: 1rem; border: 2px solid #b7cbc6; border-left: 5px solid var(--accent); border-radius: .55rem; background: #fff; box-shadow: 0 .25rem .75rem rgba(20,60,56,.08); }
.help-screen-field { display: grid; gap: .25rem; min-width: 0; }
.help-screen-field span { color: #61736f; font-size: .68rem; font-weight: 700; }
.help-screen-field strong { overflow: hidden; min-height: 2.2rem; padding: .5rem .6rem; border: 2px solid #95aaa5; border-radius: .35rem; background: #fbfdfc; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.help-screen-box button { grid-column: 1 / -1; justify-self: start; margin-top: .2rem; padding: .5rem .75rem; border: 0; border-radius: .4rem; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 750; pointer-events: none; }
.help-screen-billing .help-screen-box { border-left-color: #ae7924; }.help-screen-customer .help-screen-box { border-left-color: #356fa5; }.help-screen-company .help-screen-box { border-left-color: #744da3; }.help-screen-mail .help-screen-box { border-left-color: #b05273; }
.help-screen-markers { position: absolute; inset: 0; pointer-events: none; }
.help-screen-marker { position: absolute; z-index: 3; display: grid; place-items: center; width: 2rem; height: 2rem; border: 3px solid #fff; border-radius: 50%; background: #ef8d32; color: #fff; box-shadow: 0 .2rem .55rem rgba(52,40,20,.3); font-size: .9rem; font-weight: 850; }
.help-screen-marker-1 { top: 14%; right: 4%; }.help-screen-marker-2 { top: 38%; left: 29%; }.help-screen-marker-3 { top: 38%; right: 8%; }.help-screen-marker-4 { top: 62%; left: 29%; }.help-screen-marker-5 { top: 62%; right: 8%; }.help-screen-marker-6 { right: 22%; bottom: 7%; }
.help-screen-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .9rem; margin: .85rem 0 .25rem; padding: 0; list-style: none; }
.help-screen-legend li { display: flex; align-items: flex-start; gap: .45rem; color: #435752; font-size: .78rem; }
.help-screen-legend li > span { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #ef8d32; color: #fff; font-size: .68rem; font-weight: 850; }
.help-step-detail { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .8rem; padding: 1rem 0; scroll-margin-top: 1rem; border-top: 1px solid var(--line); }
.help-step-detail:first-of-type { border-top: 0; }
.help-step-detail h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.help-step-detail p { margin: 0; }
.help-step-number { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
@media (max-width: 1100px) { .portal-topbar { padding: 10px 22px 0; margin-bottom: -24px; }.help-page-heading { padding-right: 0; } }
@media (max-width: 760px) { .help-layout, .help-detail-layout { grid-template-columns: 1fr; }.help-navigation { position: static; }.portal-topbar { margin-bottom: -12px; padding: 8px 12px 0; }.portal-help-link { padding: .35rem .55rem; }.portal-topbar-signout { display: none; }.help-page-heading { padding-right: 0; }.help-screen-shell { grid-template-columns: 6.5rem minmax(0, 1fr); }.help-screen-content { padding: .8rem; }.help-screen-box { grid-template-columns: 1fr; }.help-screen-box button { grid-column: 1; }.help-screen-legend { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
.employee-overview-card { grid-template-columns: 1fr; }
.employee-overview-hours { border-top: 2px solid #a9c9c2; border-left: 0; border-radius: 0 0 11px 11px; }
}
@media (max-width: 520px) {
.employee-overview-meta { grid-template-columns: 1fr 1fr; }
.employee-overview-meta .btn { grid-column: 1 / -1; width: 100%; }
}
.settings-section-box > .content-card,
.invoice-overview-box > .content-card,
.account-create-box > .content-card,
.account-overview-box > .content-card,
.tenant-section-box > .content-card { margin: 0 !important; border: 0; box-shadow: none; }
.settings-display-sections .content-card { box-shadow: none; }
.settings-display-sections .border.rounded { border: 2px solid #a9c9c2 !important; border-left: 6px solid var(--accent) !important; border-radius: 13px !important; background: #fff; box-shadow: 0 7px 20px rgba(20, 60, 56, .12); }
.settings-subtabs { margin-top: -10px; margin-bottom: 22px; }
.appointment-flag-settings-table { min-width: 920px; }
.appointment-flag-active-control { display: inline-flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer; white-space: nowrap; }
.appointment-flag-active-checkbox.form-check-input { appearance: none; -webkit-appearance: none; width: 1.35rem; height: 1.35rem; margin: 0; border: 2px solid #58716f; border-radius: 4px; background-color: #fff; background-image: none; box-shadow: 0 0 0 1px rgba(25,56,59,.08); cursor: pointer; flex: 0 0 auto; }
.appointment-flag-active-checkbox.form-check-input:hover { border-color: var(--accent); }
.appointment-flag-active-checkbox.form-check-input:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.appointment-flag-active-label::after { content: "Deaktiv"; color: #6b7473; font-weight: 650; }
.appointment-flag-active-checkbox:checked + .appointment-flag-active-label::after { content: "Aktiv"; color: var(--accent); }
.flag-color-editor { display: grid; grid-template-columns: minmax(110px, 1fr) 46px; gap: .55rem; align-items: center; }
.flag-color-editor input[type="color"] { width: 46px; height: 40px; padding: 3px; border: 1px solid #b9cfca; border-radius: 8px; background: #fff; cursor: pointer; }
.appointment-flag-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.appointment-flags-booking-box { border-radius: 14px; overflow: hidden; }
.appointment-flags-booking-box > .content-card { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.appointment-flag-choice { display: grid; grid-template-columns: auto 34px minmax(0, 1fr); align-items: center; gap: .65rem; padding: .75rem; border: 2px solid #c8ddd8; border-radius: 10px; background: #fff; cursor: pointer; }
.appointment-flag-choice > .form-check-input { appearance: none; -webkit-appearance: none; width: 1.4rem; height: 1.4rem; margin: 0; border: 2px solid #405c59; border-radius: 4px; background-color: #fff; background-image: none; box-shadow: 0 0 0 1px rgba(25,56,59,.16), inset 0 0 0 1px rgba(255,255,255,.85); cursor: pointer; flex: 0 0 auto; }
.appointment-flag-choice > .form-check-input:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(22,124,106,.14); }
.appointment-flag-choice > .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .22rem rgba(22,124,106,.22); }
.appointment-flag-choice > .form-check-input:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); box-shadow: 0 0 0 1px rgba(22,124,106,.25); }
.appointment-flag-choice-no-preview { grid-template-columns: auto minmax(0, 1fr); }
.appointment-flag-choice:has(input:checked) { border-color: var(--accent); background: #eef8f6; box-shadow: 0 3px 10px rgba(20, 60, 56, .12); }
.clickable-checkbox-design { display: flex; align-items: flex-start; gap: .85rem; width: 100%; padding: 1rem 1.1rem; border: 2px solid #58716f; border-left: 6px solid #58716f; border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer; font-weight: 650; line-height: 1.5; box-shadow: 0 3px 10px rgba(20, 60, 56, .09); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.clickable-checkbox-design:hover { border-color: var(--accent); border-left-color: var(--accent); background: #f7fbfa; }
.clickable-checkbox-design > .form-check-input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 1.55rem; height: 1.55rem; margin: .05rem 0 0; border: 3px solid #405c59; border-radius: 5px; background-color: #fff; background-image: none; box-shadow: 0 0 0 2px rgba(25,56,59,.1), inset 0 0 0 1px #fff; cursor: pointer; }
.clickable-checkbox-design > .form-check-input:focus-visible { border-color: var(--accent-dark); outline: 3px solid rgba(22,124,106,.25); outline-offset: 3px; box-shadow: none; }
.clickable-checkbox-design > .form-check-input:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 10 3 3 7-7'/%3e%3c/svg%3e"); }
.clickable-checkbox-design:has(input:checked) { border-color: var(--accent); border-left-color: var(--accent); background: #eaf6f3; box-shadow: 0 5px 14px rgba(20, 60, 56, .15); }
.appointment-flag-preview, .appointment-flag-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(0,0,0,.12); border-radius: 7px; background: #fff; font-size: 1.05rem; font-weight: 900; line-height: 1; }
.appointment-flag-list { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 34px; }
.appointment-flag-badge { width: 28px; height: 28px; font-size: .95rem; }
.flag-red { color: #c62828; }.flag-green { color: #167c4f; }.flag-blue { color: #1769aa; }.flag-yellow { color: #c28b00; }.flag-pink { color: #d81b60; }.flag-black { color: #111; }
.flag-circle { border: 2px solid currentColor; border-radius: 50%; background: #fff; font-family: Arial, sans-serif; font-weight: 900; }
.appointment-flag-color { color: #fff; background-color: var(--flag-color, #167C6A); background-image: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.88) 40%, rgba(255,255,255,.88) 52%, transparent 52%), linear-gradient(-45deg, transparent 40%, rgba(255,255,255,.88) 40%, rgba(255,255,255,.88) 52%, transparent 52%); background-size: 13px 13px; }
.appointment-row-background > td { background-color: color-mix(in srgb, var(--flag-color, #167C6A) 34%, white); background-image: linear-gradient(45deg, transparent 43%, rgba(255,255,255,.72) 43%, rgba(255,255,255,.72) 53%, transparent 53%), linear-gradient(-45deg, transparent 43%, rgba(255,255,255,.72) 43%, rgba(255,255,255,.72) 53%, transparent 53%); background-size: 18px 18px; }
.appointment-month-calendar { max-width: 560px; padding: 1rem; border: 2px solid #c8ddd8; border-radius: 12px; background: #fff; }
.appointment-calendar-heading { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: .75rem; margin-bottom: .85rem; text-align: center; }
.appointment-calendar-heading strong { color: var(--ink); font-size: 1.02rem; text-transform: capitalize; }
.appointment-calendar-weekdays, .appointment-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.appointment-calendar-weekdays { margin-bottom: .35rem; color: var(--muted); font-size: .72rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.appointment-calendar-day { min-height: 42px; border: 1px solid #d6e4e1; border-radius: 8px; background: #f8fbfa; color: var(--ink); font-weight: 700; }
.appointment-calendar-day:hover { border-color: var(--accent); background: #eaf6f3; }
.appointment-calendar-day.today { box-shadow: inset 0 0 0 2px #8dbab0; }
.appointment-calendar-day.selected { border-color: var(--accent-dark); background: var(--accent); color: #fff; box-shadow: 0 3px 9px rgba(22, 124, 106, .25); }
.appointment-time-scroll { min-height: 150px; max-height: 285px; padding: .85rem; overflow-y: auto; border: 2px solid #c8ddd8; border-radius: 12px; background: #fff; scrollbar-gutter: stable; }
.appointment-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.appointment-time-option { min-height: 42px; padding: .45rem .25rem; border: 2px solid #c8ddd8; border-radius: 8px; background: #f8fbfa; color: var(--ink); font-size: .86rem; font-weight: 750; }
.appointment-time-option:hover { border-color: var(--accent); background: #eaf6f3; }
.appointment-time-option.selected { border-color: var(--accent-dark); background: var(--accent); color: #fff; box-shadow: 0 3px 9px rgba(22, 124, 106, .25); }
@media (max-width: 520px) {
.appointment-month-calendar { padding: .7rem; }
.appointment-calendar-weekdays, .appointment-calendar-days { gap: .2rem; }
.appointment-calendar-day { min-height: 36px; font-size: .82rem; }
.appointment-time-grid { gap: .35rem; }
.appointment-time-option { min-height: 38px; font-size: .76rem; }
}
.iyton-security-dialog {
width: min(34rem, calc(100vw - 2rem));
padding: 0;
border: 2px solid var(--accent);
border-radius: 1rem;
box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .28);
}
.iyton-security-dialog::backdrop {
background: rgba(15, 23, 42, .62);
}
.iyton-security-dialog__header,
.iyton-security-dialog__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
}
.email-editor-toolbar { display:flex; flex-wrap:wrap; gap:.4rem; padding:.6rem; border:1px solid #cbd8d5; border-bottom:0; border-radius:.5rem .5rem 0 0; background:#f3f7f6; }
.email-editor-toolbar button { border:1px solid #b9cbc7; border-radius:.35rem; background:#fff; padding:.35rem .65rem; }
.email-editor-toolbar select { width:auto; min-width:15rem; margin-left:auto; }
.email-wysiwyg { min-height:280px; padding:1rem; border:1px solid #cbd8d5; border-radius:0 0 .5rem .5rem; background:#fff; overflow:auto; }
.email-template-preview iframe { width:100%; min-height:360px; border:1px solid #cbd8d5; border-radius:.5rem; background:#fff; }
.email-preview-subject { margin-bottom:.6rem; padding:.7rem .85rem; border:1px solid #cbd8d5; border-radius:.5rem; background:#f3f7f6; overflow-wrap:anywhere; }
.email-variable-list { margin:.75rem 0; padding:.7rem .85rem; border:1px solid #cbd8d5; border-radius:.5rem; background:#f8faf9; }
.email-variable-list summary { cursor:pointer; font-weight:700; color:#17443d; }
.email-variable-list h3 { margin:1rem 0 .45rem; font-size:.9rem; color:#42635d; }
.email-variable-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.45rem; }
.email-variable-grid button { display:flex; flex-direction:column; gap:.15rem; text-align:left; padding:.55rem .65rem; border:1px solid #bfd0cc; border-radius:.4rem; background:#fff; color:#243b37; }
.email-variable-grid button:hover { border-color:#177b69; background:#eff9f6; }
.email-variable-grid code { color:#096b5b; font-weight:700; }
.email-variable-grid span { font-size:.78rem; line-height:1.25; }
.email-variable-grid small { display:block; margin-top:.2rem; color:#8a4b08; font-weight:700; }
@media (max-width: 700px) { .email-editor-toolbar select { width:100%; margin-left:0; } }
.iyton-security-dialog__header {
border-bottom: 1px solid #dbe3ea;
}
.iyton-security-dialog__body {
padding: 1.25rem;
}
.iyton-security-dialog__footer {
justify-content: flex-end;
border-top: 1px solid #dbe3ea;
background: #f8fafc;
}
/* Mandanten-Terminkalender */
.calendar-filter-panel { position: relative; z-index: 2; }
.calendar-fulltext-search { position: relative; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #d8e4e1; }
.calendar-search-popover { position: fixed; z-index: 1150; top: 8px; left: 8px; width: min(520px, calc(100vw - 1rem)); max-height: min(65vh, 620px); overflow: hidden; border: 2px solid var(--accent); border-radius: .75rem; background: #fff; box-shadow: 0 18px 50px rgba(15, 40, 35, .28); }
.calendar-search-popover[hidden] { display: none; }
.calendar-search-popover-heading { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; border-bottom: 1px solid #d8e4e1; background: #f4faf8; }
.calendar-search-result-list { max-height: min(52vh, 510px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.calendar-search-result { display: grid; width: 100%; gap: .15rem; padding: .78rem .9rem; border: 0; border-bottom: 1px solid #e2ece9; background: #fff; color: var(--ink); text-align: left; }
.calendar-search-result:hover, .calendar-search-result:focus { background: #e9f5f2; outline: 2px solid var(--accent); outline-offset: -2px; }
.calendar-search-result span { color: #355b54; font-variant-numeric: tabular-nums; }
.calendar-search-result small { color: var(--muted); line-height: 1.35; }
.calendar-search-popover > .empty-note { margin: 0; padding: 1rem; }
.calendar-search-focused-event { z-index: 9 !important; outline: 4px solid #1597e5 !important; outline-offset: 3px; animation: calendar-search-focus-pulse 1s ease-in-out 3; }
@keyframes calendar-search-focus-pulse { 50% { box-shadow: 0 0 0 10px rgba(21,151,229,.24); } }
.calendar-filter-options { display: flex; flex-wrap: wrap; gap: .55rem; }
.calendar-filter-choice { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: .5rem .7rem; border: 2px solid #c8d8d5; border-radius: .65rem; background: #fff; cursor: pointer; font-weight: 650; }
.calendar-filter-choice:has(input:checked) { border-color: var(--accent); background: #edf8f5; box-shadow: 0 3px 9px rgba(22,124,106,.12); }
.calendar-filter-choice .form-check-input { width: 1.15rem; height: 1.15rem; margin: 0; border: 2px solid #69817c; }
.calendar-color-dot { display: inline-block; flex: 0 0 auto; width: .8rem; height: .8rem; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.12); }
.calendar-shell {
--calendar-view-min-width: 980px;
--calendar-resource-column-width: 230px;
--calendar-team-column-width: 190px;
--calendar-month-column-width: 145px;
overflow: hidden;
}
.calendar-shell[data-calendar-size="compact"] {
--calendar-view-min-width: 790px;
--calendar-resource-column-width: 178px;
--calendar-team-column-width: 148px;
--calendar-month-column-width: 116px;
}
.calendar-shell[data-calendar-size="large"] {
--calendar-view-min-width: 1175px;
--calendar-resource-column-width: 276px;
--calendar-team-column-width: 228px;
--calendar-month-column-width: 174px;
}
.calendar-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.calendar-toolbar > .d-flex { flex: 0 0 auto; gap: .35rem !important; }
.calendar-toolbar > .d-flex .btn { padding: .35rem .55rem; }
.calendar-toolbar h2 { flex: 1 1 auto; min-width: 150px; font-size: 1rem; text-align: center; }
.calendar-toolbar .calendar-view-tabs { flex: 0 0 auto; margin: 0; }
.calendar-toolbar .calendar-view-tabs a { padding: .42rem .65rem; }
.calendar-date-jump { flex: 0 0 148px; width: 148px; }
.calendar-date-jump .form-control { min-height: 34px; padding: .3rem .45rem; font-size: .82rem; }
.calendar-size-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: .25rem; margin: 0; }
.calendar-size-toolbar > span { margin-right: .2rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.calendar-size-toolbar output { min-width: 2.8rem; color: #294843; font-size: .75rem; font-weight: 800; text-align: center; }
.calendar-size-toolbar button { min-width: 1.9rem; padding: .28rem .42rem; font-size: .95rem; line-height: 1; }
.calendar-sidebar-week-layout { display: grid; gap: .65rem; margin-top: .85rem; padding: .72rem; border: 1px solid #b7d3cd; border-radius: .65rem; background: #f3faf8; }
.calendar-sidebar-week-layout legend { float: none; width: auto; margin: 0 0 .1rem; color: #365b55; font-size: .82rem; font-weight: 800; }
.calendar-sidebar-week-layout .form-label { margin: 0; }
.calendar-sidebar-week-layout .form-label > span { display: block; margin-bottom: .22rem; color: #536d68; font-weight: 750; }
.calendar-scroll { width: 100%; max-height: min(72vh, 900px); overflow: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; border: 1px solid #c8d8d5; border-radius: .75rem; background: #fff; scrollbar-gutter: stable; }
.calendar-time-view { min-width: var(--calendar-view-min-width); }
.calendar-resource-day { min-width: max(760px, calc(74px + var(--time-columns) * var(--calendar-resource-column-width))); }
.calendar-team-week { min-width: max(var(--calendar-view-min-width), calc(74px + var(--time-columns) * var(--calendar-team-column-width))); }
.calendar-time-header, .calendar-time-body { display: grid; grid-template-columns: 74px repeat(var(--time-columns), minmax(0, 1fr)); }
.calendar-time-header { position: sticky; top: 0; z-index: 5; border-bottom: 2px solid #a9c4be; background: #f7faf9; }
.calendar-time-corner, .calendar-column-heading { min-height: 62px; padding: .65rem; border-right: 1px solid #d8e3e0; }
.calendar-time-corner { position: sticky; left: 0; z-index: 8; display: grid; place-items: center; background: #f7faf9; color: var(--muted); font-size: .75rem; font-weight: 750; text-transform: uppercase; box-shadow: 2px 0 4px rgba(28,59,53,.08); }
.calendar-column-heading { display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: .35rem; text-align: center; }
.calendar-column-heading small, .calendar-column-heading a { flex-basis: 100%; color: var(--muted); }
.calendar-column-heading.today { background: #e8f6f2; }
.calendar-team-heading { min-width: var(--calendar-team-column-width); border-top: 5px solid var(--practitioner-color); }
.calendar-team-heading > a { order: -1; font-weight: 800; text-decoration: none; }
.calendar-team-heading > span, .calendar-focused-name { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.calendar-focused-name { text-transform: none; }
.calendar-compact-practitioners { display: flex; flex-basis: 100%; flex-wrap: wrap; justify-content: center; gap: .2rem .4rem; font-size: .62rem; text-transform: none; }
.calendar-compact-practitioners > span { display: inline-flex; align-items: center; gap: .2rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-compact-practitioners .calendar-color-dot { width: .48rem; height: .48rem; box-shadow: none; }
.calendar-practitioner-avatar { width: 1.75rem; height: 1.75rem; border: 2px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #b8cbc6; }
.calendar-practitioner-avatar.fallback { display: inline-grid; place-items: center; background: color-mix(in srgb, var(--practitioner-color) 20%, white); color: var(--practitioner-color); font-size: .72rem; font-style: normal; font-weight: 900; }
.calendar-time-body { position: relative; min-height: var(--calendar-height); }
.calendar-time-axis { position: sticky; left: 0; z-index: 4; grid-column: 1; background: #f7faf9; box-shadow: 2px 0 4px rgba(28,59,53,.08); }
.calendar-time-axis > div { position: relative; border-bottom: 2px solid #9fb5b0; }
.calendar-time-axis span { position: absolute; top: -.65rem; right: .55rem; padding: 0 .2rem; background: #f7faf9; color: #60736f; font-size: .72rem; font-weight: 700; }
.calendar-day-track { position: relative; min-height: var(--calendar-height); border-left: 1px solid #b9cbc7; border-right: 1px solid #e0e8e6; background-image: repeating-linear-gradient(to bottom, #9fb5b0 0, #9fb5b0 2px, transparent 2px, transparent 64px), repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--booking-line-height, 32px) - 1px), #d2dfdc calc(var(--booking-line-height, 32px) - 1px), #d2dfdc var(--booking-line-height, 32px)); }
.calendar-day-track.today { background-color: #fbfefd; }
.calendar-day-view-track { border-right: 2px solid #b4c9c4; border-left: 2px solid #b4c9c4; box-shadow: inset 4px 0 0 color-mix(in srgb, var(--practitioner-color, #167c6a) 58%, transparent); }
.calendar-day-view-track:hover { background-color: color-mix(in srgb, var(--practitioner-color, #167c6a) 4%, white); }
.calendar-team-track { min-width: var(--calendar-team-column-width); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--practitioner-color, #167c6a) 58%, transparent); }
.calendar-team-track:hover { background-color: color-mix(in srgb, var(--practitioner-color, #167c6a) 4%, white); }
.calendar-slot-selection { position: absolute; z-index: 1; right: 1px; left: 1px; display: grid; place-items: center; border: 2px solid #2678bd; border-radius: .3rem; background: rgba(165, 216, 255, .72); color: #174f7c; font-size: .72rem; font-weight: 800; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.calendar-month-day.slot-selected { outline: 3px solid #2678bd; outline-offset: -3px; background: #d9efff; }
.calendar-event { position: absolute; z-index: 2; right: 4px; left: 4px; display: flex; flex-direction: column; gap: .08rem; min-height: 30px; padding: .28rem .42rem; overflow: hidden; border: 2px solid color-mix(in srgb, var(--event-color) 76%, #000); border-left: 5px solid var(--event-color); border-radius: .42rem; background: color-mix(in srgb, var(--event-color) 34%, white); color: #152825; font-size: .73rem; line-height: 1.15; text-decoration: none; box-shadow: 0 2px 6px rgba(18,48,42,.24); }
.calendar-event:hover { z-index: 4; overflow: visible; border-color: var(--event-color); background: color-mix(in srgb, var(--event-color) 42%, white); color: #0c201c; box-shadow: 0 6px 16px rgba(18,48,42,.22); }
.calendar-event-tooltip { position: fixed; z-index: 1200; top: 0; left: 0; display: none !important; width: max-content; min-width: 15rem; max-width: min(25rem, calc(100vw - 3rem)); padding: .72rem .85rem; overflow: visible !important; border: 1px solid #304943; border-radius: .55rem; background: #172a26; color: #fff; font-size: .78rem; font-weight: 500; line-height: 1.45; white-space: pre-line !important; text-align: left; box-shadow: 0 .65rem 1.6rem rgba(0,0,0,.28); pointer-events: none; }
.calendar-event:hover .calendar-event-tooltip, .calendar-event:focus-visible .calendar-event-tooltip { display: block !important; }
.calendar-event-tooltip > span { display: block; overflow: visible !important; white-space: pre-line !important; }
.calendar-tooltip-paid { display: block; margin-bottom: .35rem; color: #8ff0b7; font-size: .8rem !important; }
.calendar-event strong { font-size: .7rem; }
.calendar-event span, .calendar-event small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.internal { border-style: dashed; }
.calendar-event.blocked-time { border-color: #6b7280; border-left-color: #4b5563; background: #d1d5db; color: #1f2937; }
.calendar-event.blocked-time:hover, .calendar-event.blocked-time:focus-visible { border-color: #4b5563; background: #c5cad1; color: #111827; }
.calendar-event.private-busy { border-color: #8b929c; border-left-color: #6b7280; background: #d1d5db; color: #1f2937; }
.calendar-event.private-busy:hover { border-color: #6b7280; background: #c5cad1; color: #111827; }
.calendar-event.private-busy.private-busy-released { border-color: #60a5fa; border-left-color: #2563eb; background: repeating-linear-gradient(135deg, #dbeafe 0 9px, #eff6ff 9px 18px); color: #1e3a8a; }
.calendar-event.private-busy.private-busy-released:hover { border-color: #2563eb; background: repeating-linear-gradient(135deg, #bfdbfe 0 9px, #eff6ff 9px 18px); }
.calendar-event.company-reservation { z-index: 1; border-width: 2px; border-style: solid; border-color: color-mix(in srgb, var(--event-color) 68%, #59420f); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--event-color) 38%, white) 0 9px, color-mix(in srgb, var(--event-color) 24%, white) 9px 18px); color: #49350e; }
.calendar-event.company-reservation:hover { z-index: 3; }
.calendar-event.company-reservation[data-company-slot-event="true"] { cursor: pointer; user-select: none; }
.calendar-event.company-reservation[data-company-slot-readonly="true"] { cursor: default; user-select: text; }
.calendar-event.company-reservation[data-company-slot-readonly="true"]::after { position: absolute; top: .18rem; right: .24rem; padding: .05rem .28rem; border: 1px solid #5f6368; border-radius: .25rem; background: rgba(255,255,255,.9); color: #3c4043; content: "Abgerechnet"; font-size: .62rem; font-weight: 800; }
.company-slot-checkbox { position: absolute; top: .22rem; right: .28rem; z-index: 6; width: 1.15rem; height: 1.15rem; margin: 0; border: 2px solid #174f7c; border-radius: .2rem; background: #fff; accent-color: #167dcc; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.calendar-event.company-reservation[data-company-slot-event="true"]:has(.company-slot-checkbox:checked) { z-index: 4; outline: 3px solid #1677c8; outline-offset: 2px; border-color: #0b65a5; background: #cceaff; color: #103f61; box-shadow: 0 0 0 2px #fff, 0 5px 14px rgba(22,119,200,.38); }
.calendar-event.company-reservation[data-company-slot-event="true"].company-slot-selected { z-index: 4; outline: 3px solid #1677c8; outline-offset: 2px; background: #cceaff; box-shadow: 0 0 0 2px #fff, 0 5px 14px rgba(22,119,200,.38); }
.calendar-event.company-reservation[data-company-slot-event="true"].company-slot-selected::after { position: absolute; top: .18rem; right: .24rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #1677c8; color: #fff; content: "✓"; font-weight: 900; }
.calendar-company-bulk { position: static; z-index: 15; padding: 0; overflow: hidden; border: 2px solid #1677c8; border-radius: .7rem; background: #eef8ff; box-shadow: 0 .25rem .75rem rgba(18,72,116,.16); }
.calendar-company-bulk[hidden] { display: none !important; }
.calendar-company-bulk-disclosure { width: 100%; }
.calendar-company-bulk-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .55rem .75rem; color: #173f5d; cursor: pointer; list-style: none; user-select: none; }
.calendar-company-bulk-summary::-webkit-details-marker { display: none; }
.calendar-company-bulk-summary:hover { background: #e3f3ff; }
.calendar-company-bulk-summary:focus-visible { outline: 3px solid rgba(22,119,200,.35); outline-offset: -3px; }
.calendar-company-bulk-chevron { flex: 0 0 auto; width: .72rem; height: .72rem; margin: -.2rem .2rem .2rem 0; border-right: 2px solid #174f7c; border-bottom: 2px solid #174f7c; transform: rotate(45deg); transition: transform .18s ease; }
.calendar-company-bulk-disclosure[open] .calendar-company-bulk-chevron { margin-top: .25rem; margin-bottom: -.25rem; transform: rotate(225deg); }
.calendar-company-bulk-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem .75rem; padding: .65rem .75rem .75rem; border-top: 1px solid #b7d9ef; }
.calendar-company-bulk-content > span { color: #36596f; font-size: .85rem; }
.calendar-event.company-slot-status-confirmed { border-color: #18794e !important; background: repeating-linear-gradient(135deg, #8ed8b2 0 9px, #b9ddff 9px 18px) !important; color: #073d2a !important; }
.calendar-event.company-slot-status-cancelled { border-color: #a83b32 !important; background: repeating-linear-gradient(135deg, #9dd7b9 0 9px, #ffc4bf 9px 18px) !important; color: #6e1d17 !important; opacity: .94; }
.calendar-event.company-slot-status-no-show { border-color: #b42318 !important; background: #f5aaa4 !important; color: #68150f !important; }
.company-slot-state-label { display: inline-block; padding: .05rem .28rem; border: 1px solid currentColor; border-radius: .28rem; background: rgba(255,255,255,.82); font-size: .68rem; font-weight: 900; }
.calendar-legend .company-reservation-legend { border: 1px solid #8a651f; background: repeating-linear-gradient(135deg, #eadfbd 0 5px, #f8f3e5 5px 10px); }
.calendar-event.has-flag-background { background-color: color-mix(in srgb, var(--flag-color, #167c6a) 48%, white); background-image: linear-gradient(45deg, transparent 43%, rgba(255,255,255,.78) 43%, rgba(255,255,255,.78) 53%, transparent 53%), linear-gradient(-45deg, transparent 43%, rgba(255,255,255,.78) 43%, rgba(255,255,255,.78) 53%, transparent 53%); background-size: 16px 16px; }
.calendar-event-icons { display: flex !important; gap: .2rem; margin-top: .1rem; overflow: visible !important; }
.calendar-event-icons i { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .18rem; border: 1px solid rgba(0,0,0,.18); border-radius: .25rem; background: rgba(255,255,255,.9); color: #17211f; font-style: normal; font-weight: 900; }
.calendar-event:not(.internal) { padding-right: 1.85rem; }
.calendar-payment-status { position: absolute; top: .22rem; right: .28rem; z-index: 3; display: inline-grid !important; place-items: center; width: 1.25rem; min-width: 1.25rem; height: 1.25rem; overflow: visible !important; border: 2px solid currentColor; border-radius: 50%; background: #fff; font-size: .72rem; font-weight: 900; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.calendar-payment-status.paid { color: #167c4f; }
.calendar-payment-status.partial { color: #a66a00; }
.calendar-payment-status.unpaid { color: #b3261e; }
.calendar-payment-status.not-required { color: #687773; }
.calendar-event-icons i.flag-circle { width: 1.25rem; min-width: 1.25rem; height: 1.25rem; padding: 0; border: 2px solid currentColor; border-radius: 50%; background: #fff; font-size: .72rem; line-height: 1; }
.calendar-month-grid { display: grid; grid-template-columns: repeat(7, minmax(var(--calendar-month-column-width), 1fr)); min-width: calc(7 * var(--calendar-month-column-width)); }
.calendar-month-weekday { position: sticky; top: 0; z-index: 4; padding: .65rem; border-right: 1px solid #d8e3e0; border-bottom: 2px solid #a9c4be; background: #f7faf9; text-align: center; font-weight: 800; }
.calendar-month-day { min-height: 145px; padding: .45rem; border-right: 1px solid #d8e3e0; border-bottom: 1px solid #d8e3e0; background: #fff; }
.calendar-month-day.outside { background: #f4f6f5; color: #879691; }
.calendar-month-day.today { background: #effaf7; box-shadow: inset 0 0 0 2px var(--accent); }
.calendar-day-number { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: inherit; font-weight: 800; text-decoration: none; }
.calendar-day-number:hover { background: var(--accent); color: #fff; }
.calendar-month-events { display: grid; gap: .3rem; margin-top: .2rem; }
.calendar-event.compact { position: relative; right: auto; left: auto; min-height: 0; height: auto; }
.calendar-event.compact span { display: block; margin-top: .15rem; font-size: .66rem; }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; color: var(--muted); font-size: .8rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.calendar-legend i { width: .8rem; height: .8rem; border-radius: 50%; }
.calendar-context-menu { position: fixed; z-index: 1100; width: 245px; padding: .4rem; border: 1px solid #9db7b1; border-radius: .65rem; background: #fff; box-shadow: 0 14px 38px rgba(15,40,35,.25); }
.calendar-context-menu[hidden] { display: none; }
.calendar-context-menu button { display: block; width: 100%; padding: .58rem .7rem; border: 0; border-radius: .4rem; background: transparent; color: #1d332f; text-align: left; font-weight: 650; }
.calendar-context-menu button:hover, .calendar-context-menu button:focus { background: #e9f5f2; outline: none; }
.calendar-context-menu button.danger { color: #a92525; }
.calendar-context-menu button.danger:hover { background: #fff0f0; }
.calendar-context-menu hr { margin: .35rem 0; border-color: #d7e3e0; }
.calendar-context-heading { display: block; padding: .45rem .7rem .25rem; color: #4c625d; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.calendar-dialog { width: min(620px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.25rem; overflow: auto; border: 2px solid var(--accent); border-radius: .9rem; box-shadow: 0 18px 55px rgba(15,35,31,.3); }
.calendar-dialog::backdrop { background: rgba(12,29,26,.62); }
.calendar-dialog-choice { display: block; margin: .55rem 0; padding: .55rem .7rem; border: 2px solid #c8d8d5; border-radius: .55rem; }
.calendar-dialog-choice:has(input:checked) { border-color: var(--accent); background: #edf8f5; }
.vacation-resolution-options .calendar-dialog-choice { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: .65rem; cursor: pointer; }
.vacation-resolution-options .calendar-dialog-choice input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; border: 2px solid #69817c; }
.vacation-resolution-options .calendar-dialog-choice span { grid-column: 2; color: var(--muted); font-size: .82rem; }
.calendar-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; margin-top: 1rem; }
.calendar-timeline-dialog { width: min(980px, calc(100vw - 2rem)); }
.calendar-customer-choice { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; padding: .8rem 1rem; border: 2px solid #c8d8d5; border-radius: .65rem; background: #fff; color: #18342e; text-decoration: none; }
.calendar-customer-choice:hover, .calendar-customer-choice:focus { border-color: var(--accent); background: #edf8f5; color: #102a25; box-shadow: 0 4px 12px rgba(22,124,106,.14); }
.calendar-customer-choice span { color: var(--muted); overflow-wrap: anywhere; }
.package-customer-results { max-height: 22rem; overflow-y: auto; padding: .15rem .25rem .15rem 0; }
.package-customer-results .calendar-customer-choice { display: grid; grid-template-columns: auto 1fr; justify-content: stretch; align-items: start; cursor: pointer; }
.package-customer-results .calendar-customer-choice:has(input:checked) { border-color: var(--accent); background: #dff3ee; box-shadow: 0 0 0 2px rgba(22,124,106,.12); }
.package-customer-results .calendar-customer-choice input { margin-top: .2rem; }
/* Design anklickbare Kästchen: auch nicht aktivierte Checkboxen bleiben deutlich sichtbar. */
.form-check:not(.form-switch) > .form-check-input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 1.35rem;
height: 1.35rem;
margin-top: .08rem;
border: 2px solid #405c59;
border-radius: .28rem;
background-color: #fff;
background-image: none;
box-shadow: 0 0 0 1px rgba(25, 56, 59, .14), inset 0 0 0 1px rgba(255, 255, 255, .9);
cursor: pointer;
flex: 0 0 auto;
}
.form-check:not(.form-switch) > .form-check-input[type="checkbox"]:hover {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(22, 124, 106, .16);
}
.form-check:not(.form-switch) > .form-check-input[type="checkbox"]:focus-visible {
border-color: var(--accent-dark);
outline: 3px solid rgba(22, 124, 106, .24);
outline-offset: 2px;
}
.form-check:not(.form-switch) > .form-check-input[type="checkbox"]:checked {
border-color: var(--accent);
background-color: var(--accent);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 10 3 3 7-7'/%3e%3c/svg%3e");
}
.form-check:not(.form-switch) > .form-check-input[type="checkbox"]:disabled {
border-color: #899996;
background-color: #e9eeed;
cursor: not-allowed;
opacity: .8;
}
@media (max-width: 900px) {
.operational-workspace { grid-template-columns: 1fr; }
.operational-sidebar { position: static; max-height: none; }
.operational-workspace.is-sidebar-collapsed > .operational-sidebar { display: none; }
.calendar-toolbar { flex-wrap: wrap; justify-content: center; }
.calendar-toolbar > * { flex-basis: auto; }
.calendar-toolbar h2 { text-align: center; }
.calendar-date-jump { width: min(190px, 100%); flex-basis: 190px; }
.calendar-view-tabs { width: 100%; }
.calendar-view-tabs a { flex: 1; text-align: center; }
}
/* Tenant-selectable administration presentation. Functionality and markup stay shared. */
[data-iyton-theme="standard"] {
--accent: var(--system-accent, #167c6a);
--accent-dark: color-mix(in srgb, var(--accent) 74%, #071f1c);
--ink: #19383b;
--muted: #6d7f82;
--line: #dfe9e7;
--surface: #fff;
--canvas: #f3f7f6;
--theme-box: #f7fbfa;
--theme-box-border: #a9c9c2;
--theme-sidebar-start: #123d45;
--theme-sidebar-end: #092f36;
--ui-radius: 14px;
--ui-shadow: 0 7px 20px rgba(20, 60, 56, .12);
}
[data-iyton-theme="compact"] {
--accent: #2563a8;
--accent-dark: #174a80;
--ink: #1d2939;
--muted: #5f6b7a;
--line: #c9d2dc;
--surface: #fff;
--canvas: #eef1f5;
--theme-box: #f8fafc;
--theme-box-border: #91a1b2;
--theme-sidebar-start: #293545;
--theme-sidebar-end: #17212e;
--ui-radius: 3px;
--ui-shadow: 0 2px 5px rgba(15, 23, 42, .12);
}
[data-iyton-theme="table"] {
--accent: #217346;
--accent-dark: #185c37;
--ink: #1f2d24;
--muted: #607067;
--line: #b9c8bf;
--surface: #fff;
--canvas: #edf2ee;
--theme-box: #f8fbf9;
--theme-box-border: #8cac98;
--theme-sidebar-start: #1f6841;
--theme-sidebar-end: #174d31;
--ui-radius: 0;
--ui-shadow: none;
}
[data-iyton-density="compact"] { --ui-content-pad-y: 24px; --ui-content-pad-x: 28px; --ui-card-pad: 15px; --ui-card-gap: 12px; --ui-control-y: .38rem; --ui-table-y: 8px; --ui-nav-y: 7px; --ui-font-scale: .94; }
[data-iyton-density="normal"] { --ui-content-pad-y: 52px; --ui-content-pad-x: 56px; --ui-card-pad: 25px; --ui-card-gap: 20px; --ui-control-y: .65rem; --ui-table-y: 15px; --ui-nav-y: 10px; --ui-font-scale: 1; }
[data-iyton-density="comfortable"] { --ui-content-pad-y: 60px; --ui-content-pad-x: 64px; --ui-card-pad: 32px; --ui-card-gap: 26px; --ui-control-y: .82rem; --ui-table-y: 19px; --ui-nav-y: 13px; --ui-font-scale: 1.04; }
.portal-body[data-iyton-theme] { background: var(--canvas); color: var(--ink); font-size: calc(1rem * var(--ui-font-scale)); }
.portal-body[data-iyton-theme] .portal-sidebar { background: linear-gradient(165deg, var(--theme-sidebar-start), var(--theme-sidebar-end)); }
.portal-body[data-iyton-theme] .portal-content { padding: var(--ui-content-pad-y) var(--ui-content-pad-x); }
.portal-body[data-iyton-theme] .content-card { border-color: var(--line); border-radius: var(--ui-radius); padding: var(--ui-card-pad); }
.portal-body[data-iyton-theme] .content-card.collapsible-card { padding: 0; }
.portal-body[data-iyton-theme] .box-design { background: var(--theme-box); border-color: var(--theme-box-border); border-left-color: var(--accent); box-shadow: var(--ui-shadow); }
.portal-body[data-iyton-theme] .card-heading { margin-bottom: var(--ui-card-gap); }
.portal-body[data-iyton-theme] .form-control,
.portal-body[data-iyton-theme] .form-select { border-color: color-mix(in srgb, var(--muted) 78%, #fff); border-radius: min(var(--ui-radius), 8px); padding-top: var(--ui-control-y); padding-bottom: var(--ui-control-y); }
.portal-body[data-iyton-theme] .portal-table td { padding-top: var(--ui-table-y); padding-bottom: var(--ui-table-y); }
.portal-body[data-iyton-theme] .portal-nav a { border-radius: min(var(--ui-radius), 9px); padding-top: var(--ui-nav-y); padding-bottom: var(--ui-nav-y); }
.portal-body[data-iyton-theme="table"] .portal-table th { background: #e2ece6; border: 1px solid var(--line); padding: 9px 10px; }
.portal-body[data-iyton-theme="table"] .portal-table td { border: 1px solid var(--line); padding-left: 10px; padding-right: 10px; }
.portal-body[data-iyton-theme="table"] .portal-table td:first-child,
.portal-body[data-iyton-theme="table"] .portal-table th:first-child { padding-left: 10px; }
.portal-body[data-iyton-theme="table"] .portal-table td:last-child,
.portal-body[data-iyton-theme="table"] .portal-table th:last-child { padding-right: 10px; }
.portal-body[data-iyton-theme="compact"] .metric-card,
.portal-body[data-iyton-theme="compact"] .content-card { border-width: 1px; box-shadow: var(--ui-shadow); }
.portal-body[data-iyton-density="compact"] .page-heading { margin-bottom: 20px; }
.portal-body[data-iyton-density="compact"] .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
.portal-body[data-iyton-density="comfortable"] .row.g-3 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
.ui-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ui-theme-option { position: relative; display: grid; gap: 5px; min-width: 0; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; padding: 12px; }
.ui-theme-option:hover { border-color: var(--accent); }
.ui-theme-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ui-theme-option input { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; opacity: 1; accent-color: var(--accent); }
.ui-theme-option strong { color: var(--ink); }
.ui-theme-option small { color: var(--muted); }
.ui-theme-swatch { display: grid; grid-template-columns: 24% 1fr; grid-template-rows: repeat(3, 1fr); width: 100%; height: 58px; overflow: hidden; border: 1px solid #aab7b4; margin-bottom: 3px; }
.ui-theme-swatch::before { content: ""; grid-row: 1 / 4; background: #123d45; }
.ui-theme-swatch i { border-bottom: 1px solid #dfe9e7; background: #fff; }
.ui-theme-swatch-standard { border-radius: 8px; }.ui-theme-swatch-standard::before { background: #123d45; }
.ui-theme-swatch-compact { border-radius: 2px; }.ui-theme-swatch-compact::before { background: #293545; }.ui-theme-swatch-compact i { background: #f5f7fa; border-color: #b8c3cf; }
.ui-theme-swatch-table { border-radius: 0; }.ui-theme-swatch-table::before { background: #1f6841; }.ui-theme-swatch-table i { background: repeating-linear-gradient(90deg, #fff 0 32%, #cbd8d0 32% 33%); border-color: #aebfb4; }
.ui-theme-live-preview { position: relative; display: grid; grid-template-columns: 23% 1fr; min-height: 120px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--canvas); box-shadow: var(--ui-shadow); }
.ui-preview-sidebar { background: linear-gradient(165deg, var(--theme-sidebar-start), var(--theme-sidebar-end)); }
.ui-preview-card { align-self: center; display: grid; gap: 7px; margin: var(--ui-card-gap); border: 2px solid var(--theme-box-border); border-left: 5px solid var(--accent); border-radius: var(--ui-radius); background: var(--theme-box); padding: calc(var(--ui-card-pad) * .65); }
.ui-preview-card strong { color: var(--ink); }.ui-preview-card small { color: var(--muted); }.ui-preview-card i { display: block; height: 8px; border: 1px solid var(--line); background: var(--surface); }
@media (max-width: 840px) {
.ui-theme-options { grid-template-columns: 1fr; }
.portal-body[data-iyton-theme] .portal-content { padding: 30px 20px; }
}
@media (pointer: coarse) {
.portal-body[data-iyton-density="compact"] .btn,
.portal-body[data-iyton-density="compact"] .form-control,
.portal-body[data-iyton-density="compact"] .form-select { min-height: 44px; }
}
/* Einheitliche Größensteuerung für breite Verwaltungstabellen. */
.table-size-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; margin: 0 0 .65rem; }
.table-size-toolbar > span { margin-right: .2rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.table-size-toolbar output { min-width: 3.35rem; color: var(--ink); font-size: .82rem; font-weight: 800; text-align: center; }
.table-size-toolbar button { min-width: 2.25rem; font-size: 1.05rem; line-height: 1; }
.table-responsive[data-table-size="compact"] > table { font-size: .82rem; }
.table-responsive[data-table-size="compact"] > table > :not(caption) > * > * { padding: .42rem .5rem; }
.table-responsive[data-table-size="compact"] > .portal-table th { font-size: .61rem; padding-top: .4rem; padding-bottom: .4rem; }
.table-responsive[data-table-size="compact"] > .portal-table td { font-size: .76rem; padding-top: .48rem; padding-bottom: .48rem; }
.table-responsive[data-table-size="compact"] .btn-sm,
.table-responsive[data-table-size="compact"] .form-select-sm,
.table-responsive[data-table-size="compact"] .form-control-sm { font-size: .72rem; padding: .25rem .4rem; }
.table-responsive[data-table-size="normal"] > table { font-size: inherit; }
.table-responsive[data-table-size="large"] > table { min-width: 120%; font-size: 1.04rem; }
.table-responsive[data-table-size="large"] > table > :not(caption) > * > * { padding-top: 1.05rem; padding-bottom: 1.05rem; }
.table-responsive[data-table-size="large"] > .portal-table th { font-size: .75rem; }
.table-responsive[data-table-size="large"] > .portal-table td { font-size: .96rem; }
@media (max-width: 640px) {
.table-size-toolbar { justify-content: flex-start; }
}
/* Mobile Hauptnavigation: Die Desktop-Seitenleiste wird als bedienbare Schublade weiterverwendet. */
.portal-sidebar-mobile-close,
.portal-sidebar-backdrop,
.portal-mobile-navigation-toggle { display: none; }
.portal-mobile-brand-navigation { display: flex; align-items: center; gap: .75rem; min-width: 0; }
@media (max-width: 1100px) {
.portal-sidebar[data-mobile-navigation] {
position: fixed;
z-index: 2100;
inset: 0 auto 0 0;
display: flex;
width: min(86vw, 320px);
min-height: 100dvh;
max-height: 100dvh;
overflow-y: auto;
padding-top: 24px;
box-shadow: 18px 0 45px rgba(5, 25, 29, .35);
transform: translateX(-105%);
visibility: hidden;
transition: transform .22s ease, visibility 0s linear .22s;
overscroll-behavior: contain;
}
.portal-sidebar-mobile-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid rgba(255,255,255,.55);
border-radius: 10px;
background: rgba(255,255,255,.08);
color: #fff;
font-size: 1.65rem;
line-height: 1;
}
.portal-sidebar-backdrop {
position: fixed;
z-index: 2050;
inset: 0;
display: block;
border: 0;
background: rgba(5, 24, 28, .58);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility 0s linear .22s;
}
.portal-mobile-navigation-toggle {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 42px;
border: 1px solid rgba(255,255,255,.65);
border-radius: 9px;
padding: 7px 11px;
background: transparent;
color: #fff;
font-weight: 750;
}
.portal-mobile-navigation-toggle > span:first-child { font-size: 1.2rem; line-height: 1; }
.portal-body.mobile-navigation-open { overflow: hidden; }
.portal-body.mobile-navigation-open .portal-sidebar[data-mobile-navigation] {
transform: translateX(0);
visibility: visible;
transition-delay: 0s;
}
.portal-body.mobile-navigation-open .portal-sidebar-backdrop {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
}
@media (max-width: 430px) {
.portal-mobile-brand { gap: .5rem; padding-inline: 10px; }
.portal-mobile-navigation-toggle { padding-inline: 9px; }
.portal-mobile-brand-navigation { gap: .5rem; }
.portal-mobile-brand form button { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.portal-sidebar[data-mobile-navigation],
.portal-sidebar-backdrop { transition: none; }
}
/* Cancellation must remain distinguishable from confirmation and flag colours. */
.calendar-event.calendar-event-cancelled,
.calendar-event.calendar-event-cancelled:hover,
.calendar-event.calendar-event-cancelled:focus-visible {
border: 2px solid #b42318 !important;
border-left-width: 5px !important;
background: #fff1f0 !important;
color: #a11b13 !important;
opacity: 1;
}
.calendar-event.calendar-event-cancelled > strong,
.calendar-event.calendar-event-cancelled > span:not(.calendar-event-tooltip),
.calendar-event.calendar-event-cancelled > small {
color: #a11b13 !important;
}
.calendar-event.online-only-block { z-index: 1; pointer-events: none; border-color: #6b7280; background: #e5e7eb; color: #374151; }
/* MVC validation must identify the exact field, not only the form summary. */
.form-control.input-validation-error,
.form-select.input-validation-error,
.portal-body[data-iyton-theme] .form-control.input-validation-error,
.portal-body[data-iyton-theme] .form-select.input-validation-error { border-color: #b42318; background-color: #fff7f6; box-shadow: 0 0 0 .14rem rgba(180,35,24,.16); }
.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus,
.portal-body[data-iyton-theme] .form-control.input-validation-error:focus,
.portal-body[data-iyton-theme] .form-select.input-validation-error:focus { border-color: #b42318; box-shadow: 0 0 0 .2rem rgba(180,35,24,.22); }
.field-validation-error { display: block; margin-top: .3rem; color: #b42318; font-weight: 700; }
.calendar-event .calendar-event-heading { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.company-planning-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1rem}.company-planning-day{border-top:4px solid var(--bs-primary)}.company-planning-day.is-confirmed{border-top-color:#198754}.company-planning-day.is-released{border-top-color:#6c757d}.company-planning-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:.55rem}.company-slot{display:flex;flex-direction:column;align-items:flex-start;min-height:58px;padding:.55rem .7rem;border-radius:.5rem;border:1px solid #9aa7b4;background:#fff;color:inherit;text-align:left}.company-slot.is-free{border-style:dashed;color:#176b45;background:#f3fbf7}.company-slot.is-booked{border-color:#3973a7;background:#edf5ff}.company-slot:hover,.company-slot:focus-visible{outline:3px solid rgba(13,110,253,.22);outline-offset:1px}.company-slot span{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.task-summary {
cursor: pointer;
font-weight: 700;
list-style: none;
}
.task-summary::-webkit-details-marker { display: none; }
.task-assignee-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: .55rem .9rem;
padding: .75rem;
border: 1px solid #cbd5e1;
border-radius: .6rem;
background: #f8fafc;
}
.task-list { display: grid; gap: .85rem; }
.task-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
padding: 1rem;
border: 1px solid #dbe3ea;
border-left: .35rem solid #64748b;
border-radius: .75rem;
background: #fff;
}
.task-card.task-reminder { border-left-color: #d97706; background: #fffbeb; }
.task-card.task-overdue { border-left-color: #dc2626; background: #fef2f2; }
.task-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.task-card p { margin: .35rem 0; white-space: pre-wrap; }
.task-assignment-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.task-assignment { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .55rem; border-radius: 999px; background: #eef2f7; }
.task-assignment.is-complete { color: #166534; background: #dcfce7; }
.task-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) {
.task-card { grid-template-columns: 1fr; }
.task-actions { justify-content: flex-start; }
}