:root {
    --md-sys-color-primary: #1a73e8;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #dbe7ff;
    --md-sys-color-on-primary-container: #001b3d;

    --md-sys-color-secondary: #4d6078;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d8e2f8;
    --md-sys-color-on-secondary-container: #091b31;

    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;

    --md-sys-color-surface: #f5f8fc;
    --md-sys-color-surface-bright: #ffffff;
    --md-sys-color-surface-container: #edf1f7;
    --md-sys-color-surface-container-high: #e6ebf3;
    --md-sys-color-surface-container-highest: #dfe5ef;
    --md-sys-color-on-surface: #1a1c1e;
    --md-sys-color-on-surface-variant: #43474e;
    --md-sys-color-outline: #72777f;
    --md-sys-color-outline-variant: #c2c7cf;

    --md-sys-shape-corner-extra-small: 6px;
    --md-sys-shape-corner-small: 10px;
    --md-sys-shape-corner-medium: 16px;
    --md-sys-shape-corner-large: 22px;
    --md-sys-shape-corner-extra-large: 30px;

    --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
    --md-sys-elevation-2: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --md-sys-elevation-3: 0 5px 14px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto Flex', 'Segoe UI', 'Noto Sans', sans-serif;
    color: var(--md-sys-color-on-surface);
    background:
        linear-gradient(180deg, #f9fbff 0%, #f3f7fc 45%, #eef4fb 100%),
        var(--md-sys-color-surface);
    line-height: 1.45;
    letter-spacing: 0.01em;
}

a {
    color: var(--md-sys-color-primary);
}

.container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(249, 252, 255, 0.94);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    backdrop-filter: blur(12px);
    box-shadow: var(--md-sys-elevation-1);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
    padding: 0.8rem 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.header-nav a,
.header-user {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 0.8rem;
    border-radius: 999px;
    font-size: 0.94rem;
    text-decoration: none;
}

.header-session {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: #7a3d00;
    background: #ffe9d5;
    border: 1px solid rgba(191, 103, 0, 0.4);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.header-nav a {
    color: var(--md-sys-color-primary);
    border: 1px solid transparent;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.header-nav a:hover {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-outline-variant);
}

.header-user {
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
}

main.container {
    padding: 1.1rem 0 2.2rem;
}

.backend-footer-logo {
    margin-top: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.backend-footer-logo img {
    display: block;
    max-width: min(320px, 100%);
    max-height: 84px;
    width: auto;
    height: auto;
}

.card {
    background: var(--md-sys-color-surface-bright);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--md-sys-elevation-1);
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.card.narrow {
    max-width: 560px;
    margin-inline: auto;
}

.card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.9rem;
}

h1,
h2,
h3 {
    margin: 0 0 0.45rem;
    line-height: 1.2;
    color: var(--md-sys-color-on-surface);
}

h1 {
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 600;
}

h3 {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    font-weight: 600;
}

p {
    margin: 0.35rem 0 0.5rem;
    color: var(--md-sys-color-on-surface-variant);
}

label {
    display: block;
    margin-bottom: 0.62rem;
    font-size: 0.94rem;
    /* font-weight: 600; */
    color: var(--md-sys-color-on-surface);
}

input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 0.34rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    padding: 0.64rem 0.72rem;
    background: #fff;
    color: var(--md-sys-color-on-surface);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

textarea {
    resize: vertical;
    min-height: 88px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
    background: #fff;
}

input[type='checkbox'],
input[type='radio'] {
    width: auto;
    margin: 0;
    accent-color: var(--md-sys-color-primary);
}

.form-field {
    display: grid;
    gap: 0.42rem;
    margin-bottom: 0.9rem;
    padding: 0.22rem 0;
    border-radius: var(--md-sys-shape-corner-small);
    transition: background-color 140ms ease;
}

.form-field > label {
    margin: 0;
    line-height: 1.28;
}

.form-field > input,
.form-field > select,
.form-field > textarea {
    margin-top: 0;
}

.form-field:focus-within {
    background: rgba(26, 115, 232, 0.05);
}

.form-field:last-child {
    margin-bottom: 0.2rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0 1rem;
    cursor: pointer;
    box-shadow: var(--md-sys-elevation-1);
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.btn:hover {
    box-shadow: var(--md-sys-elevation-2);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--md-sys-elevation-1);
}

.btn.ghost {
    background: transparent;
    color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-outline);
    box-shadow: none;
}

.btn.ghost:hover {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
}

.btn.ghost.danger {
    color: var(--md-sys-color-error);
    border-color: rgba(186, 26, 26, 0.45);
}

.btn.ghost.danger:hover {
    background: var(--md-sys-color-error-container);
    border-color: var(--md-sys-color-error);
}

.btn-entries-with-badge {
    gap: 0.45rem;
}

.dashboard-entries-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--md-sys-color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.52rem;
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 0.72rem 0.84rem;
    margin-bottom: 0.68rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    font-weight: 500;
}

.alert::before {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 0.02rem;
}

.alert.error {
    color: #5b0005;
    background: #ffe3e0;
    border-color: rgba(186, 26, 26, 0.42);
}

.alert.error::before {
    content: 'x';
    color: #7a0007;
    background: rgba(186, 26, 26, 0.14);
    border: 1px solid rgba(186, 26, 26, 0.34);
}

.alert.important,
.alert.warning {
    color: #5a2f00;
    background: #ffe9d5;
    border-color: rgba(191, 103, 0, 0.4);
}

.alert.important::before,
.alert.warning::before {
    content: '!';
    color: #7a3d00;
    background: rgba(191, 103, 0, 0.16);
    border: 1px solid rgba(191, 103, 0, 0.34);
}

.alert.success {
    color: #0f3d1c;
    background: #dcf9e2;
    border-color: rgba(46, 125, 50, 0.36);
}

.alert.success::before {
    content: 'ok';
    font-size: 0.58rem;
    color: #145224;
    background: rgba(46, 125, 50, 0.14);
    border: 1px solid rgba(46, 125, 50, 0.34);
}

.alert.is-fading-out {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 240ms ease, transform 240ms ease;
}

.alert.info {
    color: #003a66;
    background: #e3f4ff;
    border-color: rgba(0, 122, 204, 0.35);
}

.alert.info::before {
    content: 'i';
    color: #005999;
    background: rgba(0, 122, 204, 0.14);
    border: 1px solid rgba(0, 122, 204, 0.32);
}

.grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.grid-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

/* Allow grid items to shrink below their content's intrinsic min-width, so a
   long value inside an <input> stays clipped within its column (the text is
   hidden and can be scrolled with the cursor) instead of overflowing. */
.grid-two > *,
.grid-three > * {
    min-width: 0;
}

.grid-two input,
.grid-two select,
.grid-two textarea,
.grid-three input,
.grid-three select,
.grid-three textarea {
    max-width: 100%;
}

/* The builder body/form/list are themselves CSS grids; their direct children
   (the cards, the .grid-two rows, the full-width option/default labels and the
   logic box) must be allowed to shrink, otherwise a long value or a long card
   subtitle (white-space: nowrap) inflates the card and pushes it open instead
   of being clipped with an ellipsis. */
.builder-form > *,
.builder-body > *,
.builder-list > * {
    min-width: 0;
}

.builder-item input:not([type='checkbox']):not([type='radio']),
.builder-item select,
.builder-item textarea {
    min-width: 0;
    max-width: 100%;
}

.grid-forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 0.9rem;
}

.form-card {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 0.9rem;
}

.actions,
.form-card .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.46rem;
}

.btn.small,
.btn.ghost.small {
    min-height: 34px;
    padding: 0 0.74rem;
    font-size: 0.84rem;
}

.builder-list {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.84rem;
}

.builder-item {
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 0.84rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.64rem;
}

.builder-head-left {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.56rem;
}

.builder-head-main {
    min-width: 0;
    flex: 1 1 auto;
}

.builder-head-main h3 {
    margin-bottom: 0.18rem;
}

.builder-drag-handle {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 6px;
    cursor: grab;
    opacity: 0.56;
    transition: opacity 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.builder-drag-handle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--md-sys-color-on-surface-variant);
}

.builder-item:hover .builder-drag-handle,
.builder-drag-handle:focus-visible,
.builder-drag-handle[aria-grabbed="true"] {
    opacity: 1;
    border-color: var(--md-sys-color-outline-variant);
    background: #f7f8fa;
}

.builder-drag-handle:active {
    cursor: grabbing;
}

.builder-item-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.builder-head-right {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.builder-body {
    display: grid;
    gap: 0.1rem;
}

.builder-item.is-collapsed .builder-body {
    display: none;
}

.builder-item.is-collapsed .builder-head {
    margin-bottom: 0;
}

.builder-item.is-card-invalid {
    border-color: rgba(186, 26, 26, 0.45);
    box-shadow: inset 0 0 0 1px rgba(186, 26, 26, 0.16);
}

.builder-item.is-card-duplicate {
    border-color: rgba(179, 97, 0, 0.5);
    box-shadow: inset 0 0 0 1px rgba(179, 97, 0, 0.17);
}

.builder-item.is-dragging {
    opacity: 0.62;
    border-style: dashed;
    transform: scale(0.996);
}

.builder-item.is-drop-target {
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.session-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border: 1px solid #b88900;
    border-radius: 999px;
    background: #fff3cf;
    color: #5f4200;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0 0.58rem;
    white-space: nowrap;
}

.builder-item.is-session-incomplete {
    border-color: #d8b778;
    box-shadow: inset 0 0 0 1px rgba(216, 183, 120, 0.22);
}

.logic-box {
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-small);
    margin-top: 0.62rem;
    padding: 0.62rem;
}

.lite-format-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin: 0.34rem 0 0.34rem;
}

.lite-format-toolbar .btn {
    min-height: 34px;
}

.lite-format-hint {
    margin: 0 0 0.32rem;
    font-size: 0.83rem;
    color: var(--md-sys-color-on-surface-variant);
}

.builder-day-cell {
    display: grid;
    gap: 0.4rem;
}

.builder-day-cell-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    margin-top: 0.45rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}

.option-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.35rem;
}

.option-item {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    font-weight: 500;
}

.workshop-day {
    margin-bottom: 1rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: linear-gradient(180deg, #ffffff, #f9fbff);
    padding: 0.74rem;
}

.workshop-day + .workshop-day {
    margin-top: 0.78rem;
}

.workshop-day-header {
    margin-bottom: 0.58rem;
}

.workshop-day-header h3 {
    margin-bottom: 0.14rem;
}

.workshop-day-toggle {
    width: 100%;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: #444444;
    color: #ffffff;
    padding: 0.52rem 0.62rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.workshop-day-toggle:hover {
    border-color: #000000;
    background: #000000;
}

.workshop-day-toggle:focus-visible {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

.workshop-day.is-open .workshop-day-toggle {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}

.workshop-day-toggle-indicator {
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 140ms ease;
}

.workshop-day.is-open .workshop-day-toggle-indicator {
    transform: rotate(-135deg);
}

.workshop-day-body {
    display: block;
}

.workshop-day-body.is-animating {
    will-change: height, opacity;
}

.workshop-day-subtitle {
    margin: 0;
    font-size: 0.86rem;
}

.time-slot-group {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: #fff;
    padding: 0.56rem;
}

.time-slot-group + .time-slot-group {
    margin-top: 0.58rem;
}

.time-slot-head {
    border-bottom: 1px dashed var(--md-sys-color-outline-variant);
    margin-bottom: 0.5rem;
    padding-bottom: 0.42rem;
}

.time-slot-title {
    margin-bottom: 0.12rem;
    font-size: 0.98rem;
}

.time-slot-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
}

.time-slot-list {
    gap: 0.44rem;
}

.session-list {
    display: grid;
    gap: 0.52rem;
}

.session-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.62rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #fff;
    padding: 0.58rem 0.62rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.session-item:hover {
    border-color: var(--md-sys-color-outline);
    background: #fbfdff;
}

.session-item:focus-within {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
}

.session-item > input[type='checkbox'] {
    margin-top: 0.18rem;
}

.session-content {
    min-width: 0;
    display: grid;
    gap: 0.3rem;
}

.session-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.session-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.24;
    font-weight: 750;
    letter-spacing: 0.01em;
    color: var(--md-sys-color-on-surface);
}

.session-code {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 650;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.46rem;
}

.session-description {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.88rem;
    line-height: 1.36;
    overflow-wrap: anywhere;
}

.session-description-wrap {
    display: grid;
    gap: 0.18rem;
}

/* Collapsed state: show the first two lines crisp and let the third fade out
   as a cue that more text is hidden. The fade is only applied once JS confirms
   the text actually overflows (.has-overflow), to avoid fading short blurbs. */
.session-description.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.session-description.is-clamped.has-overflow {
    cursor: pointer;
    -webkit-mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, 0.12) 100%);
    mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, 0.12) 100%);
}

.session-description.is-expanded {
    display: block;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    cursor: pointer;
}

.session-description a {
    color: var(--md-sys-color-primary);
}

.session-description-toggle {
    justify-self: start;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--md-sys-color-primary);
    cursor: pointer;
}

.session-description-toggle:hover {
    text-decoration: underline;
}

.session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem 0.38rem;
}

.session-meta-item {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    background: #f8fbff;
    color: var(--md-sys-color-on-surface-variant);
    padding: 0.14rem 0.48rem;
    font-size: 0.79rem;
    line-height: 1.24;
}

.session-item.is-blocked {
    opacity: 0.5;
}

.capacity {
    color: var(--md-sys-color-primary);
    border-color: rgba(26, 115, 232, 0.34);
    background: rgba(26, 115, 232, 0.08);
    font-weight: 620;
}

.capacity.is-low {
    color: #a34f00;
    border-color: rgba(191, 103, 0, 0.45);
    background: rgba(255, 167, 64, 0.18);
}

.overview-step {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #fff;
    padding: 0.95rem;
    margin-top: 0.95rem;
}

.overview-block + .overview-block {
    margin-top: 0.9rem;
}

.overview-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.34rem;
}

.transparency-chapter {
    border: 1px solid rgba(0, 122, 204, 0.34);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #f3f9ff;
    padding: 0.82rem;
}

.transparency-chapter h3 {
    margin-bottom: 0.45rem;
}

.anti-bot-chapter {
    border: 1px solid rgba(191, 103, 0, 0.34);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #fff8ef;
    padding: 0.82rem;
}

.anti-bot-chapter h3 {
    margin-bottom: 0.34rem;
}

.anti-bot-chapter p {
    margin: 0 0 0.54rem;
}

.anti-bot-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.form-logo-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 0.9rem;
}

.form-logo {
    max-width: min(360px, 100%);
    max-height: 136px;
    width: auto;
    height: auto;
}

.public-success-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.15rem;
    max-width: 560px;
    margin: 1.5rem auto;
    padding: 1rem 0.5rem;
}

.public-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(31, 157, 77, 0.12);
    color: #1f9d4d;
}

.public-success-icon svg {
    width: 44px;
    height: 44px;
}

.public-success-message {
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--md-sys-color-on-surface);
    overflow-wrap: anywhere;
}

.public-success-back {
    min-width: 220px;
}

.overview-choices {
    display: grid;
    gap: 0.9rem;
}

#transparencyChapter {
    margin-top: 15px;
}

.overview-no-workshop {
    margin: 0.3rem 0 0;
    color: #c5221f;
    font-weight: 650;
}

.overview-choice-day-title {
    margin: 0 0 0.4rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    padding-bottom: 0.25rem;
}

.overview-choice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.overview-choice {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-left: 3px solid var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-small);
    background: #fff;
    padding: 0.5rem 0.65rem;
}

.overview-choice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    margin-bottom: 0.3rem;
}

.overview-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 0.14rem 0.5rem;
}

.overview-chip-time {
    background: #eef3fb;
    border-color: #d7e2f2;
    color: var(--md-sys-color-primary);
    font-weight: 650;
}

.overview-chip-code {
    font-weight: 650;
    letter-spacing: 0.04em;
}

.overview-choice-title {
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--md-sys-color-on-surface);
    overflow-wrap: anywhere;
}

.report-fields-form {
    margin: 0.4rem 0 1.1rem;
}

.report-fields {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    padding: 0.7rem 0.9rem;
}

.report-fields legend {
    padding: 0 0.4rem;
    font-weight: 650;
}

.report-fields-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    margin-bottom: 0.5rem;
}

.report-fields-hint {
    margin: 0.2rem 0 0.6rem;
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
}

.report-slot {
    margin: 1.25rem 0;
}

.report-slot-head {
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    margin-bottom: 0.6rem;
}

.report-slot-title {
    margin: 0;
    font-size: 1.15rem;
}

.report-slot-meta {
    margin: 0.15rem 0 0.55rem;
    font-weight: 650;
    color: var(--md-sys-color-primary);
}

.report-workshop {
    margin: 0 0 0.95rem;
}

.report-workshop-title {
    margin: 0 0 0.3rem;
    font-size: 1rem;
}

.report-count {
    color: var(--md-sys-color-primary);
}

.report-table {
    width: 100%;
    border-collapse: collapse;
}

.report-table th,
.report-table td {
    border: 1px solid var(--md-sys-color-outline-variant);
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.report-table th {
    background: #f5f7fa;
}

.report-empty {
    color: var(--md-sys-color-on-surface-variant);
    font-style: italic;
    margin: 0.2rem 0 0.5rem;
}

.form-schedule-gate {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    margin: 0.6rem 0 0.95rem;
    overflow: hidden;
    box-shadow: var(--md-sys-elevation-1);
}

.form-schedule-gate-head {
    padding: 0.78rem 0.9rem 0.62rem;
}

.form-schedule-gate-head h2 {
    margin: 0;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
}

.form-schedule-gate-body {
    padding: 0 0.9rem 0.86rem;
}

.form-schedule-gate-body p {
    margin: 0;
    line-height: 1.45;
}

.form-schedule-gate.is-upcoming {
    border-color: rgba(0, 122, 204, 0.34);
    background: linear-gradient(180deg, #f6fbff 0%, #edf7ff 100%);
}

.form-schedule-gate.is-upcoming .form-schedule-gate-head h2 {
    color: #005999;
}

.form-schedule-gate.is-upcoming .form-schedule-gate-body {
    color: #084a7a;
}

.form-schedule-gate.is-closed {
    border-color: rgba(191, 103, 0, 0.42);
    background: linear-gradient(180deg, #fff6ea 0%, #ffe9d4 100%);
}

.form-schedule-gate.is-closed .form-schedule-gate-head h2 {
    color: #8d4a00;
}

.form-schedule-gate.is-closed .form-schedule-gate-body {
    color: #6b3500;
}

.logo-thumb {
    max-width: 146px;
    max-height: 46px;
    width: auto;
    height: auto;
    display: block;
}

.logo-thumb.large {
    max-width: 232px;
    max-height: 86px;
}

.logo-preview-wrap {
    margin-top: 0.5rem;
}

.attendance-session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
    margin-top: 0.7rem;
}

.attendance-session-card {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #fff;
    padding: 0.82rem;
}

.attendance-session-card h3 {
    margin-bottom: 0.28rem;
}

.attendance-session-card p {
    margin: 0.16rem 0;
}

.attendance-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.36rem;
    margin: 0.55rem 0;
}

.attendance-count {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    background: #f6f9fe;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.14rem 0.48rem;
}

.attendance-count.registered {
    border-color: rgba(46, 125, 50, 0.36);
    background: rgba(46, 125, 50, 0.12);
    color: #145224;
}

.attendance-count.unregistered {
    border-color: rgba(191, 103, 0, 0.38);
    background: rgba(191, 103, 0, 0.13);
    color: #7a3d00;
}

.attendance-count.pending {
    border-color: rgba(0, 122, 204, 0.34);
    background: rgba(0, 122, 204, 0.12);
    color: #005999;
}

.attendance-qr-wrap {
    margin-top: 0.58rem;
    display: flex;
    justify-content: flex-start;
}

.attendance-qr-image {
    width: 180px;
    height: 180px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: #fff;
}

.presence-status-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    background: #f5f8fc;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.2;
    padding: 0.16rem 0.5rem;
}

.presence-status-badge.registered {
    border-color: rgba(46, 125, 50, 0.36);
    background: rgba(46, 125, 50, 0.12);
    color: #145224;
}

.presence-status-badge.unregistered {
    border-color: rgba(191, 103, 0, 0.38);
    background: rgba(191, 103, 0, 0.13);
    color: #7a3d00;
}

.attendance-checkin-card {
    max-width: 740px;
    margin-inline: auto;
}

.attendance-checkin-form {
    margin-top: 0.8rem;
}

.attendance-checkin-overview {
    margin: 0.85rem 0 0.35rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #fff;
    padding: 0.82rem;
}

.attendance-checkin-overview .overview-list {
    margin-top: 0.5rem;
}

.presence-status-badge.pending {
    border-color: rgba(0, 122, 204, 0.34);
    background: rgba(0, 122, 204, 0.12);
    color: #005999;
}

.attendance-checkin-when {
    display: inline-flex;
    margin-left: 0.42rem;
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
}

.table-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #fff;
}

.table {
    width: 100%;
    min-width: 740px;
    border-collapse: collapse;
}

.table th,
.table td {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding: 0.58rem 0.62rem;
    vertical-align: top;
    text-align: left;
}

.table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
}

.table tbody tr:hover {
    background: #f8fcfb;
}

.inline-form {
    display: inline;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.56rem;
    justify-content: center;
}

.top-gap {
    margin-top: 0.82rem;
}

.page-dashboard .dashboard-hero {
    background:
        linear-gradient(180deg, #ffffff, #f8fbff),
        var(--md-sys-color-surface-bright);
    border-color: rgba(26, 115, 232, 0.2);
    box-shadow: var(--md-sys-elevation-2);
}

.page-dashboard .dashboard-hero h1 {
    margin-bottom: 0.25rem;
    letter-spacing: 0.005em;
}

.page-dashboard .dashboard-hero p {
    max-width: 64ch;
}

.page-dashboard .dashboard-folders,
.page-dashboard .dashboard-forms,
.page-dashboard .dashboard-shared-forms {
    background: rgba(248, 254, 254, 0.92);
}

.page-dashboard .dashboard-folder-form {
    align-items: end;
}

.page-dashboard .dashboard-folder-filters .btn {
    min-height: 36px;
    padding-inline: 0.82rem;
    font-weight: 500;
}

.page-dashboard .dashboard-search {
    max-width: 640px;
}

.page-dashboard .dashboard-search-empty {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
}

.form-card > p {
    margin-bottom: 0.6rem;
}

.page-dashboard .form-card .form-card-description {
    margin-bottom: 0.6rem;
    line-height: 1.42;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-height: calc(1.42em * 3);
}

.form-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.2rem 0 0.72rem;
}

.form-card-meta p {
    margin: 0;
    padding: 0.28rem 0.56rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.84rem;
    line-height: 1.2;
}

.page-dashboard .move-form {
    padding-top: 0.5rem;
    border-top: 1px dashed var(--md-sys-color-outline-variant);
}

.page-dashboard .dashboard-forms.is-owned-actions-compact .form-actions-compact {
    margin: 0 0 0.36rem;
}

.page-dashboard .dashboard-forms.is-owned-actions-compact .form-actions-compact > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
}

.page-dashboard .dashboard-forms.is-owned-actions-compact .form-actions-compact > summary::-webkit-details-marker {
    display: none;
}

.page-dashboard .dashboard-forms.is-owned-actions-compact .form-actions-compact[open] > summary {
    margin-bottom: 0.14rem;
}

.page-dashboard .dashboard-forms.is-owned-actions-compact .form-card .actions {
    gap: 0.36rem;
}

.page-dashboard .dashboard-forms.is-owned-actions-compact .form-card .actions .btn,
.page-dashboard .dashboard-forms.is-owned-actions-compact .form-card .actions a.btn {
    min-height: 34px;
    padding: 0 0.72rem;
    font-size: 0.82rem;
}

.page-builder .builder-shell {
    padding-top: 1.35rem;
}

.page-builder .builder-intro {
    max-width: 72ch;
    margin-bottom: 0.86rem;
}

.page-builder .builder-form {
    display: grid;
    gap: 0.34rem;
}

.page-builder .builder-grid {
    margin-bottom: 0.25rem;
}

.page-builder .builder-overview {
    position: sticky;
    top: 84px;
    z-index: 6;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 0.76rem;
    margin: 0.5rem 0 0.72rem;
}

.page-builder .builder-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.56rem;
}

.page-builder .builder-overview-item {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: #fff;
    padding: 0.48rem 0.58rem;
}

.page-builder .builder-overview-label {
    display: block;
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 0.1rem;
}

.page-builder .builder-overview-item strong {
    font-size: 1.02rem;
    line-height: 1.1;
}

.page-builder .builder-overview-hint {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

.page-builder .builder-issues {
    margin-top: 0.62rem;
    border: 1px solid rgba(186, 26, 26, 0.25);
    border-radius: var(--md-sys-shape-corner-small);
    background: #fff7f5;
    padding: 0.56rem 0.62rem;
}

.page-builder .builder-issues h3 {
    margin-bottom: 0.26rem;
    font-size: 0.92rem;
}

.page-builder .builder-issues-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.22rem;
    font-size: 0.84rem;
}

.page-builder .builder-block {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding-top: 0.96rem;
    margin-top: 0.32rem;
}

.page-builder .builder-block:first-of-type {
    margin-top: 0.22rem;
}

.page-builder .builder-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.page-builder .builder-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.page-builder .builder-section-title {
    margin-top: 0;
    margin-bottom: 0.22rem;
    padding-top: 0;
}

.page-builder .builder-section-text {
    margin-top: 0;
    margin-bottom: 0.44rem;
    font-size: 0.93rem;
}

.page-builder .builder-template-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin: 0 0 0.52rem;
    padding: 0.52rem;
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: #fff;
}

.page-builder .builder-template-label {
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 600;
    margin-right: 0.08rem;
}

.page-builder .builder-add-btn {
    margin-bottom: 0.08rem;
}

.page-builder .builder-list {
    gap: 0.86rem;
    margin-bottom: 0.52rem;
}

.page-builder .builder-item {
    background: linear-gradient(180deg, #ffffff, #fbfffe);
}

.page-builder .builder-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding-top: 0.86rem;
}

.page-builder .builder-submit-hint {
    margin: 0;
    font-size: 0.84rem;
    color: var(--md-sys-color-on-surface-variant);
}

.page-form-logic .logic-rule-body {
    display: grid;
    gap: 0.62rem;
}

.page-form-logic .logic-conditions-list {
    gap: 0.5rem;
}

.page-form-logic .logic-condition-mode-row {
    margin-bottom: 0.5rem;
    max-width: 280px;
}

.page-form-logic .logic-condition-row {
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: #fff;
    padding: 0.56rem;
}

.page-form-logic .logic-condition-grid {
    margin-bottom: 0.35rem;
}

.page-form-logic .logic-condition-actions {
    display: flex;
    justify-content: flex-end;
}

.page-form-logic .logic-rule-enabled-wrap {
    margin-top: 1.78rem;
}

.page-entries .entries-shell {
    padding-top: 1.3rem;
}

.page-entries .entries-header p {
    margin-top: 0.15rem;
}

.page-entries .entries-actions .btn {
    min-height: 38px;
}

.page-entries .entries-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    justify-content: space-between;
    margin: 0.95rem 0 1rem;
}

.page-entries .entries-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.8rem;
    align-items: center;
    color: var(--md-sys-color-on-surface-variant);
}

.page-entries .entries-toolbar-meta strong {
    color: var(--md-sys-color-on-surface);
}

.page-entries .entries-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

.page-entries .entries-page-size-form {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.page-entries .entries-page-size-form select {
    min-width: 7.5rem;
}

.page-entries .entries-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    color: var(--md-sys-color-on-surface-variant);
}

.page-entries .entries-bulk-form {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(186, 26, 26, 0.18);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #fff7f7;
}

.page-entries .entries-bulk-form-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
}

.page-entries .entries-bulk-confirmation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.35rem;
}

.page-entries .entries-bulk-confirmation code {
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(186, 26, 26, 0.08);
    border: 1px solid rgba(186, 26, 26, 0.18);
    font-weight: 700;
}

.page-entries .entries-select-col,
.page-entries .entry-select-cell {
    width: 2.1rem;
    text-align: center;
}

.page-entries .entries-select-all,
.page-entries .entry-select-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-entries .entries-table-wrap {
    margin-top: 0.3rem;
}

.page-entries .entries-table th {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.76rem;
}

.page-entries .entries-table td {
    font-size: 0.9rem;
}

.page-entries .entries-table th.entries-accordion-col,
.page-entries .entries-table td.entry-accordion-toggle-cell {
    width: 3rem;
    min-width: 3rem;
    text-align: center;
}

.page-entries .entries-table td.entry-accordion-toggle-cell {
    padding-inline: 0.34rem;
    vertical-align: middle;
}

.page-entries .entry-accordion-toggle {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: #fff;
    color: var(--md-sys-color-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.page-entries .entry-accordion-toggle:hover {
    border-color: var(--md-sys-color-outline);
    background: #f7fbff;
}

.page-entries .entry-accordion-toggle:focus-visible {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

.page-entries .entry-accordion-toggle-icon {
    width: 0.58rem;
    height: 0.58rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 140ms ease;
}

.page-entries .entry-accordion-toggle[aria-expanded='true'] .entry-accordion-toggle-icon {
    transform: rotate(-135deg);
}

.page-entries .entry-summary-row.is-expanded {
    background: #f7fbff;
}

.page-entries .entry-workshop-preview {
    display: grid;
    gap: 0.2rem;
    min-width: 16ch;
}

.page-entries .entry-workshop-preview strong {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--md-sys-color-on-surface-variant);
}

.page-entries .entry-workshop-preview span {
    color: var(--md-sys-color-on-surface);
    overflow-wrap: anywhere;
}

.page-entries .entry-accordion-row:hover {
    background: #f8fcff;
}

.page-entries .entry-accordion-content-cell {
    padding: 0 !important;
}

.page-entries .entry-accordion-content {
    padding: 0.75rem 0.9rem;
    border-left: 3px solid rgba(26, 115, 232, 0.34);
    background: #f8fbff;
}

.page-entries .entry-accordion-content strong {
    display: block;
    margin-bottom: 0.34rem;
}

.page-entries .entries-detail-btn {
    min-height: 2.1rem;
}

.page-entries .entry-actions-cell {
    white-space: nowrap;
    min-width: 8.8rem;
}

.page-entries .entry-actions-cell > .btn,
.page-entries .entry-actions-cell > .inline-form {
    margin-right: 0.32rem;
    vertical-align: middle;
}

.page-entries .entry-actions-cell > :last-child {
    margin-right: 0;
}

.page-entries .entry-actions-cell .inline-form {
    display: inline-flex;
    align-items: center;
}

.page-entries .entry-icon-btn {
    min-height: 2.1rem;
    width: 2.1rem;
    padding: 0;
    border-radius: var(--md-sys-shape-corner-small);
}

.page-entries .entry-actions-readonly {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
    padding: 0 0.5rem;
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.79rem;
    font-weight: 600;
}

.page-entries .entry-icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
}

.page-entries .entry-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
    fill: currentColor;
    pointer-events: none;
}

.page-entries .entries-modal .entry-modal-panel {
    width: min(960px, 100%);
}

.page-entries .bulk-delete-modal .entry-modal-panel {
    width: min(620px, 100%);
    border-color: rgba(186, 26, 26, 0.28);
}

.page-entries .entry-detail-content strong {
    color: var(--md-sys-color-on-surface);
    margin-top: 0.74rem;
}

.page-dashboard .dashboard-admin-area {
    border-color: rgba(26, 115, 232, 0.22);
    background: linear-gradient(180deg, #ffffff, #f7faff);
}

.page-admin-settings .admin-settings-hero {
    border-color: rgba(26, 115, 232, 0.22);
    background: linear-gradient(180deg, #ffffff, #f7faff);
}

.admin-settings-grid {
    align-items: stretch;
}

.admin-setting-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.admin-setting-card p {
    margin-bottom: 0.1rem;
}

.admin-setting-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

.page-admin-logs .audit-log-table {
    min-width: 1100px;
}

.page-admin-logs .audit-log-count {
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
}

.page-admin-logs .audit-log-severity {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.46rem;
    border-radius: 999px;
    border: 1px solid var(--md-sys-color-outline-variant);
    font-size: 0.76rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
}

.page-admin-logs .audit-log-severity-info {
    background: rgba(0, 122, 204, 0.12);
    border-color: rgba(0, 122, 204, 0.32);
    color: #005999;
}

.page-admin-logs .audit-log-severity-warning {
    background: rgba(191, 103, 0, 0.14);
    border-color: rgba(191, 103, 0, 0.34);
    color: #7a3d00;
}

.page-admin-logs .audit-log-severity-error {
    background: rgba(186, 26, 26, 0.12);
    border-color: rgba(186, 26, 26, 0.34);
    color: #8f0008;
}

.page-admin-logs .audit-log-details-cell details > summary {
    cursor: pointer;
    color: var(--md-sys-color-primary);
    user-select: none;
}

.page-admin-logs .audit-log-details-cell pre {
    margin: 0.5rem 0 0;
    padding: 0.56rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: #f9fbff;
    max-width: 520px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
}

.settings-divider {
    border: 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin: 1rem 0 0.9rem;
}

.settings-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
}

.settings-section-head h2 {
    margin: 0;
}

.server-clock {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.82rem;
    line-height: 1.3;
    padding: 0.18rem 0.56rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
}

.danger-zone {
    margin-top: 1rem;
    border: 1px solid rgba(186, 26, 26, 0.36);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #fff6f5;
    padding: 0.9rem;
}

.danger-zone h2 {
    color: #7a0007;
    margin-bottom: 0.22rem;
}

.danger-zone p {
    color: #5b0005;
}

body.modal-open {
    overflow: hidden;
}

.entry-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.38);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.entry-modal-panel {
    width: min(920px, 100%);
    max-height: 88vh;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--md-sys-elevation-3);
    padding: 0.95rem;
}

.entry-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.entry-modal-head h2 {
    margin: 0;
}

.entry-modal-body strong {
    display: block;
    margin-top: 0.56rem;
}

.entry-detail-content {
    display: grid;
    gap: 0.5rem;
}

.overbooking-modal .entry-modal-panel {
    width: min(760px, 100%);
    border-color: rgba(186, 26, 26, 0.28);
}

@media (max-width: 1024px) {
    .container {
        width: min(1240px, calc(100% - 28px));
    }

    .grid-two,
    .grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-setting-card .btn {
        width: 100%;
        align-self: stretch;
    }
}

@media (max-width: 768px) {
    .site-header {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        border-top: 1px solid var(--md-sys-color-outline-variant);
        border-bottom: 0;
        border-radius: 0;
        background: rgba(249, 252, 255, 0.97);
    }

    .site-header .container {
        width: 100%;
        margin: 0;
    }

    .site-header + main.container {
        padding-bottom: calc(2.2rem + 76px + env(safe-area-inset-bottom));
    }

    .header-row {
        align-items: stretch;
        flex-direction: row;
        gap: 0.38rem;
        min-height: auto;
        padding: 0.38rem 0 calc(0.38rem + env(safe-area-inset-bottom));
    }

    .header-nav {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        gap: 0.38rem;
    }

    .header-nav a,
    .header-user,
    .header-session {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .container {
        width: calc(100% - 20px);
    }

    .card {
        padding: 0.95rem;
        border-radius: var(--md-sys-shape-corner-medium);
    }

    .grid-two,
    .grid-three {
        grid-template-columns: 1fr;
    }

    .card-row {
        align-items: flex-start;
    }

    .settings-section-head {
        align-items: flex-start;
    }

    .server-clock {
        white-space: normal;
    }

    .actions {
        width: 100%;
    }

    .actions .btn,
    .actions a.btn {
        flex: 1 1 180px;
    }

    .page-dashboard .dashboard-folder-filters .btn {
        flex: 1 1 150px;
    }

    .page-builder .builder-overview {
        position: static;
        margin-top: 0.38rem;
    }

    .page-builder .builder-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-builder .builder-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .page-builder .builder-section-actions {
        justify-content: flex-start;
    }

    .page-builder .builder-submit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .page-builder .builder-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-builder .builder-head-left {
        width: 100%;
    }

    .page-builder .builder-head-right {
        width: 100%;
        justify-content: flex-start;
    }

    .page-entries .entries-actions {
        width: 100%;
    }

    .page-entries .entries-actions .btn {
        flex: 1 1 170px;
    }

    .workshop-day {
        padding: 0.62rem;
    }

    .time-slot-group {
        padding: 0.48rem;
    }

    .table {
        min-width: 640px;
    }

    .entry-modal {
        padding: 0.5rem;
    }

    .entry-modal-panel {
        border-radius: var(--md-sys-shape-corner-medium);
        max-height: 92vh;
    }
}

@media (max-width: 560px) {
    .btn,
    .btn.ghost {
        min-height: 40px;
        padding: 0 0.85rem;
    }

    .header-nav a,
    .header-user,
    .header-session {
        width: auto;
        justify-content: center;
    }

    .actions .btn,
    .actions a.btn {
        flex: 1 1 100%;
    }

    .form-card-meta {
        gap: 0.34rem;
    }

    .form-card-meta p {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    .page-builder .builder-add-btn,
    .page-builder .builder-template-row .btn {
        width: 100%;
    }

    .page-entries .entries-actions .btn {
        flex: 1 1 100%;
    }

    .session-item {
        gap: 0.52rem;
        padding: 0.52rem 0.54rem;
    }

    .session-head {
        gap: 0.42rem;
    }

    .session-title {
        font-size: 0.95rem;
    }

    .session-code {
        font-size: 0.72rem;
        padding: 0.16rem 0.42rem;
    }

    .session-description {
        font-size: 0.84rem;
    }

    .session-meta-item {
        font-size: 0.76rem;
    }

    .table {
        min-width: 560px;
    }
}