/* Shared product design. Loaded after module styles; owns surfaces, navigation,
   typography and actions. Module styles retain layout and state behaviour. */
:root {
    --ui-page-max: 1320px;
    --ui-radius: 8px;
    --ui-border: #e2e7e8;
    --ui-muted: #697779;
    --ui-panel: #fff;
    --ui-soft: #f3f6f5;
    --ui-page-bg: #f7f9f8;
    --ui-ink: #203331;
    --ui-accent: var(--brand-primary, #176b58);
    --ui-accent-soft: color-mix(in srgb, var(--ui-accent) 10%, white);
}
html body {
    --primary: var(--ui-accent);
    --primary-dark: color-mix(in srgb, var(--ui-accent) 80%, black);
    --accent: var(--ui-accent);
    --primary-light: var(--ui-accent-soft);
    --bg-primary: #fff;
    --bg-secondary: var(--ui-page-bg);
    --bg-tertiary: var(--ui-soft);
    --bg-card: #fff;
    --text-primary: var(--ui-ink);
    --text-secondary: var(--ui-muted);
    --text-tertiary: #7c8887;
    --border: var(--ui-border);
    --border-light: #edf0ef;
    --font-body: 'Segoe UI', system-ui, sans-serif;
    background: var(--ui-page-bg) !important;
    color: var(--ui-ink) !important;
    font-family: var(--font-body) !important;
    letter-spacing: 0 !important;
    -webkit-font-smoothing: antialiased;
}
html body :is(h1,h2,h3,h4) { color: var(--ui-ink); letter-spacing: -.025em; font-weight: 600; }
html body :is(.app-container,.main-content) { background: transparent !important; min-width: 0; }
html body .main-content { padding: 28px clamp(16px,2.5vw,40px) 40px !important; }
.main-content > * { min-width: 0; }
html body .main-content > :is(.dashboard,.admin-panel-modern,.calendar-page,.mb-page,.config-layout,.profil-container,.lz-page,.wp-page) {
    max-width: var(--ui-page-max) !important; margin-inline: auto !important; width: 100%;
}

/* Navigation: one quiet rail, active location indicated by a single accent. */
html body .sidebar { background: #fff !important; border-right: 1px solid var(--ui-border) !important; box-shadow: none !important; container-type: inline-size; }
@container (max-width: 100px) {
    .sidebar :is(.sidebar-category,.sidebar-link-text,.sidebar-school-name,.sidebar-tier-row,.sidebar-role-switch,.sidebar-fav-empty,.sidebar-fav-section) { display: none !important; }
}
html body :is(.sidebar-header,.sidebar-footer) { background: #fff !important; border-color: var(--ui-border) !important; }
html body .sidebar-logo-fallback { background: var(--ui-accent) !important; border-radius: 9px !important; }
html body .sidebar-school-name { font-size: 1rem !important; font-weight: 650 !important; letter-spacing: -.03em; }
html body .sidebar-category {
    background: transparent !important; color: #7d8b88 !important; border: 0 !important;
    margin: 18px 12px 5px !important; padding: 0 10px !important;
    font-size: .64rem !important; font-weight: 600 !important; letter-spacing: .09em !important;
}
html body .sidebar-link {
    color: #526360 !important; background: transparent !important; border: 0 !important;
    margin: 2px 12px !important; padding: 9px 10px !important; border-radius: 7px !important;
    min-height: 38px !important; font-size: .83rem !important; font-weight: 450 !important;
    box-shadow: none !important; transform: none !important;
}
html body .sidebar-link.active, html body .sidebar-link:hover {
    color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important;
}
html body .sidebar-link.active { font-weight: 600 !important; }
html body .sidebar-link.active::before { display: none !important; }
html body .sidebar-link .sidebar-link-icon {
    background: transparent !important; color: inherit !important; filter: none;
    width: 20px !important; height: 20px !important; font-size: 1rem !important; opacity: 1;
}
html body .sidebar-fav-link { border: 0 !important; background: transparent !important; }
html body .sidebar-tier-badge { font-size: .64rem; }
@media (min-width: 1025px) {
    html body .sidebar.collapsed :is(.sidebar-category,.sidebar-link-text,.sidebar-school-name,.sidebar-tier-row,.sidebar-role-switch,.sidebar-fav-empty) { display: none !important; }
    html body .sidebar.collapsed .sidebar-link { padding: 8px !important; margin: 4px 8px !important; justify-content: center !important; }
}

/* Shared surfaces replace the former coloured banners and stacked shadows. */
html body :is(.admin-header,.calendar-header,.config-page-header,.booking-workspace-header,.mb-header) {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 4px 0 24px !important; margin: 0 0 20px !important;
    border-bottom: 1px solid var(--ui-border) !important;
}
html body :is(.admin-header h2,.calendar-header h2,.booking-workspace-title,.mb-header h1) {
    font-size: clamp(1.4rem,2vw,1.8rem) !important; font-weight: 600 !important;
}
html body :is(.booking-workspace-title-icon,.admin-icon,.page-icon) {
    background: transparent !important; filter: grayscale(1); opacity: .55;
}
html body :is(.booking-workspace-eyebrow,.booking-workspace-subtitle) { color: var(--ui-muted); }
html body .booking-workspace-eyebrow { font-weight: 500; font-size: .65rem; letter-spacing: .12em; margin-bottom: 9px; }
html body .booking-workspace-subtitle { margin: 8px 0 0; }
html body :is(.section-card,.admin-category-group,.admin-section-modern,.dashboard-card,.week-overview,
    .calendar-container,.room-card,.template-card,.config-sidebar,.home-module-card,.mensa-card) {
    background: var(--ui-panel) !important; border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important; box-shadow: none !important;
}
html body :is(.admin-list-group,.admin-list-item,.rf-card,.group-card,.lz-room-card) {
    box-shadow: none !important; border-color: var(--ui-border) !important; border-radius: 9px !important;
}
html body :is(.admin-list-icon,.card-icon,.section-icon) { background: var(--ui-soft) !important; filter: grayscale(1); }
html body .admin-category-group { padding: 20px !important; }
html body .admin-category-group[data-atab="tagesgeschaeft"] { border: 0 !important; padding: 0 !important; background: transparent !important; }
html body :is(.admin-subtitle,.admin-list-desc,.calendar-header p) { color: var(--ui-muted) !important; line-height: 1.6; }
html body :is(.admin-quickbar,.rooms-toolbar,.admin-header,.calendar-header,.form-actions,.modal-footer) { flex-wrap: wrap; gap: 8px; }

/* Actions: small desktop controls, generous touch targets. */
html body :is(.btn,.il-btn,.btn-back,.btn-next,.btn-sub,.btn-load,.btn-row,.btn-unblock,.btn-action-term,.config-btn-save,.aqb-item) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    max-width: 100%; min-height: 36px; padding: 8px 13px !important;
    border: 1px solid var(--ui-border) !important; border-radius: 7px !important;
    background: white; color: var(--ui-ink); font-family: inherit !important;
    font-size: .81rem !important; font-weight: 550 !important; line-height: 1.3 !important;
    letter-spacing: 0 !important; text-decoration: none !important; text-transform: none !important;
    white-space: normal; box-shadow: none !important; transform: none !important;
    transition: background-color .15s, border-color .15s;
}
html body :is(.btn-primary,.config-btn-save,.btn-next,.btn-sub) {
    background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: white !important;
}
html body :is(.btn-secondary,.btn-outline-secondary,.btn-back,.aqb-item) {
    background: white !important; color: #435650 !important;
}
html body :is(.btn-danger,.btn-reject,.btn-unblock) { background: #fff3f1 !important; color: #a13b31 !important; border-color: #f0d6d1 !important; }
html body :is(.btn-warning) { background: #fff8e9 !important; color: #845b12 !important; }
html body :is(.btn-success,.btn-approve) { background: var(--ui-accent-soft) !important; color: var(--primary-dark) !important; }
html body :is(.btn,.il-btn,.aqb-item):hover { filter: brightness(.97); transform: none !important; }
html body :is(.btn-small,.btn-sm,.btn-row) { min-height: 30px; padding: 5px 9px !important; font-size: .75rem !important; }
html body :is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 3px; }
html body :is(button,.btn):disabled { opacity: .45; cursor: not-allowed; }
html body :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    max-width: 100%; min-width: 0; border: 1px solid #dce3e0 !important; border-radius: 7px !important;
    background: #fff; color: var(--ui-ink); box-shadow: none !important; font-family: inherit;
}
html body :is(.admin-tabs,.room-browser-tabs) { flex-wrap: wrap !important; gap: 5px !important; }
html body :is(.admin-tab,.room-browser-tab,.category-tab) { border-radius: 6px !important; font-weight: 500 !important; box-shadow: none !important; }
html body :is(.admin-tab,.room-browser-tab,.category-tab).active { background: var(--ui-accent-soft) !important; color: var(--ui-accent) !important; }
.room-browser-tabs > a { min-width: 0; white-space: normal !important; }
html body table:not(.week-table) th { background: var(--ui-soft) !important; color: #62716c !important; font-weight: 550 !important; text-transform: none !important; letter-spacing: 0 !important; }
html body table:not(.week-table) td { border-color: var(--ui-border) !important; }
:is(.table-responsive,.table-wrapper,.mb-table-wrap) { max-width: 100%; overflow-x: auto; }
html body .footer-legal { color: #899590; font-size: .72rem; opacity: .8; }
html body :is(.bg-glow-orb,.room-hero-banner::before) { display: none !important; }

/* Booking workspace: the grid carries structure, small labels carry status. */
#bookingDashboardPage {
    --booking-status-free: #fff; --booking-status-booked: #f1f7f3;
    --booking-status-full: #fff4f1; --booking-status-exclusive: #f5f2fa;
    --booking-status-blocked: #f0f2f2; --booking-grid-line: #e5eae7;
    --booking-border: var(--ui-border); --booking-text: var(--ui-ink);
}
#bookingDashboardPage .dash-date-strip { display: none !important; }
#bookingDashboardPage .week-overview { width: 100% !important; max-width: 100% !important; padding: 20px !important; --week-slot-height: 150px !important; }
html body .booking-status-legend { background: transparent !important; border: 0 !important; padding: 0 0 12px !important; flex-wrap: wrap !important; color: var(--ui-muted); }
html body .booking-legend-item { font-weight: 400; white-space: normal !important; }
html body .booking-legend-dot { border-radius: 50%; width: 6px; height: 6px; }
html body .booking-legend-dot.is-free { background: #a8b4ae; }
html body .booking-legend-dot.is-booked { background: #438469; }
html body .booking-legend-dot.is-full { background: #bb7662; }
html body .week-header-with-nav { border: 0 !important; margin-bottom: 16px !important; }
html body .week-title { font-weight: 600 !important; font-size: 1.12rem !important; }
html body :is(.week-nav-arrow,.plan-view-switch a) { border-radius: 6px !important; box-shadow: none !important; }
html body .plan-view-switch { background: #edf1ef !important; border: 0 !important; padding: 3px !important; }
html body .plan-view-switch a { color: #718079 !important; font-weight: 500 !important; }
html body .plan-view-switch a.active { background: white !important; color: var(--ui-accent) !important; box-shadow: 0 1px 3px #20333112 !important; }
#bookingDashboardPage .week-table-wrapper { border: 1px solid var(--ui-border) !important; border-radius: 8px !important; overflow-x: auto !important; }
#bookingDashboardPage .week-table { border-collapse: collapse !important; }
#bookingDashboardPage .week-table :is(th,td) { border-color: var(--ui-border) !important; }
#bookingDashboardPage .week-table th { background: #f8faf9 !important; color: #718079 !important; font-size: .7rem !important; font-weight: 500 !important; }
#bookingDashboardPage .week-table .day-name { color: #465a50 !important; font-weight: 600 !important; }
#bookingDashboardPage .week-table .period-row-label { background: #fafbf9 !important; color: #738178 !important; font-weight: 500 !important; }
#bookingDashboardPage :is(.week-table .week-slot-cell,.agenda-slot)[data-slot-status="free"] { background: white !important; }
#bookingDashboardPage :is(.week-table .week-slot-cell,.agenda-slot)[data-slot-status="booked"] { background: #f1f7f3 !important; }
#bookingDashboardPage :is(.week-table .week-slot-cell,.agenda-slot)[data-slot-status="full"] { background: #fff4f1 !important; }
/* The wrapper owns the outer frame. Remove the table's outer cell borders so
   the grid has one line at each edge, including the sticky first column. */
#bookingDashboardPage .week-table :is(th, td):first-child {
    border-left: 0 !important;
    box-shadow: none !important;
}
#bookingDashboardPage .week-table :is(th, td):last-child { border-right: 0 !important; }
#bookingDashboardPage .week-table thead tr:first-child > th { border-top: 0 !important; }
#bookingDashboardPage .week-table tbody tr:last-child > td { border-bottom: 0 !important; }
@media (min-width: 761px) {
    #bookingDashboardPage .week-table { min-width: 700px; width: 100% !important; table-layout: fixed; }
}
#bookingDashboardPage .week-table .today-header::after { content: none !important; display: none !important; }
#bookingDashboardPage .week-table .today-header .day-name {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px !important; border-radius: 5px;
    background: var(--ui-accent-soft) !important; color: #176b58 !important;
}
#bookingDashboardPage .week-table .day-today-badge {
    display: inline-flex; align-items: center; padding: 2px 5px; border-radius: 4px;
    background: var(--ui-accent); color: #fff; font-size: .58rem; font-weight: 650; line-height: 1;
}
#bookingDashboardPage .week-table .period-row-label { padding: 10px 8px !important; }
#bookingDashboardPage .week-table .period-past { opacity: 1 !important; }
#bookingDashboardPage .week-table .period-past .slot-card { opacity: .7 !important; }
#bookingDashboardPage .agenda-day { border: 1px solid var(--ui-border) !important; border-radius: 9px !important; overflow: hidden; }
#bookingDashboardPage .agenda-day-header { background: #f4f7f5 !important; color: var(--ui-ink) !important; }
#bookingDashboardPage .agenda-slot-content { min-height: 135px !important; }
#bookingDashboardPage .agenda-slot .agenda-slot-content,
#bookingDashboardPage .mobile-agenda-wrapper .agenda-day .agenda-slot .agenda-slot-content > .slot-card {
    background: transparent !important; border-left: 0 !important;
}
#bookingDashboardPage .agenda-slot-period { background: #fafbf9 !important; color: #738178 !important; }
html body .admin-header { text-align: left !important; }
html body .stat-card {
    border: 1px solid var(--ui-border) !important; border-radius: 9px !important;
    background: white !important; color: var(--ui-ink) !important; box-shadow: none !important;
}
html body .stat-card .stat-number { color: var(--ui-accent) !important; font-weight: 600 !important; }
html body .credits-button { background: white !important; border: 1px solid var(--ui-border) !important; box-shadow: none !important; border-radius: 50% !important; }
html body .mobile-bottom-nav { justify-content: flex-end !important; padding-right: 16px; }
html body .mobile-pinboard-button {
    pointer-events: auto; display: flex; flex: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-height: 44px; margin-bottom: 12px;
    border: 1px solid var(--ui-border); border-radius: 12px;
    background: white; color: var(--ui-accent); box-shadow: 0 2px 8px #20333112;
}
html body .mobile-pinboard-button span { filter: grayscale(1); font-size: 1rem !important; }

@media (max-width: 1024px) {
    html body .main-content { padding: 78px 20px 95px !important; }
    html body .mobile-topbar { background: white !important; box-shadow: none !important; border-color: var(--ui-border) !important; }
    html body .mobile-bottom-nav { background: transparent !important; box-shadow: none !important; }
    #bookingDashboardPage .week-table-wrapper { display: none !important; }
    #bookingDashboardPage .mobile-agenda-wrapper { display: block !important; }
    #bookingDashboardPage .agenda-day-picker { display: flex !important; }
    #bookingDashboardPage .agenda-day { display: none !important; }
    #bookingDashboardPage .agenda-day.is-selected-day { display: block !important; }
    #bookingDashboardPage .agenda-slot { height: auto !important; min-height: 166px; }
    #bookingDashboardPage .agenda-slot-content > .slot-card { min-height: 146px !important; height: 100% !important; }
}
@media (max-width: 760px) {
    html body .main-content { padding-inline: 16px !important; }
    html body .booking-workspace-header { gap: 22px !important; padding-bottom: 20px !important; }
    #bookingDashboardPage .week-overview { padding: 12px !important; }
    #bookingDashboardPage .week-table-wrapper { display: none !important; }
    html body .config-layout { grid-template-columns: minmax(0,1fr) !important; }
    html body :is(.btn,.il-btn,.aqb-item,.btn-back,.btn-next,.btn-sub,.btn-row) { min-height: 44px; }
    #bookingDashboardPage .mobile-agenda-wrapper .slot-card .slot-book-actions > .book-btn { min-height: 44px !important; }
    html body :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { font-size: 16px; }
    html body .admin-quickbar { position: static; }
    .booking-legend-help { display: none; }
}
@media (prefers-reduced-motion: reduce) { html body :is(.btn,.sidebar-link) { transition: none !important; } }

/* Status colours are shared by the legend, desktop plan and mobile agenda. */
html body #bookingDashboardPage { --booking-status-free: color-mix(in srgb, var(--configured-status-free) var(--configured-status-opacity), transparent); }
html body .booking-legend-dot.is-free { background: var(--booking-status-free); }
html body #bookingDashboardPage :is(.week-table .week-slot-cell,.agenda-slot)[data-slot-status="free"] { background: var(--booking-status-free) !important; }
html body #bookingDashboardPage { --booking-status-booked: color-mix(in srgb, var(--configured-status-booked) var(--configured-status-opacity), transparent); }
html body .booking-legend-dot.is-booked { background: var(--booking-status-booked); }
html body #bookingDashboardPage :is(.week-table .week-slot-cell,.agenda-slot)[data-slot-status="booked"] { background: var(--booking-status-booked) !important; }
html body #bookingDashboardPage { --booking-status-full: color-mix(in srgb, var(--configured-status-full) var(--configured-status-opacity), transparent); }
html body .booking-legend-dot.is-full { background: var(--booking-status-full); }
html body #bookingDashboardPage :is(.week-table .week-slot-cell,.agenda-slot)[data-slot-status="full"] { background: var(--booking-status-full) !important; }
html body #bookingDashboardPage { --booking-status-exclusive: color-mix(in srgb, var(--configured-status-exclusive) var(--configured-status-opacity), transparent); }
html body .booking-legend-dot.is-exclusive { background: var(--booking-status-exclusive); }
html body #bookingDashboardPage :is(.week-table .week-slot-cell,.agenda-slot)[data-slot-status="exclusive"] { background: var(--booking-status-exclusive) !important; }
html body #bookingDashboardPage { --booking-status-blocked: color-mix(in srgb, var(--configured-status-blocked) var(--configured-status-opacity), transparent); }
html body .booking-legend-dot.is-blocked { background: var(--booking-status-blocked); }
html body #bookingDashboardPage :is(.week-table .week-slot-cell,.agenda-slot)[data-slot-status="blocked"] { background: var(--booking-status-blocked) !important; }

.plan-color-controls { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 0; }
.plan-color-controls label { display:flex; align-items:center; gap:.5rem; }
.plan-color-controls input[type="color"] { width:44px; height:36px; padding:2px; cursor:pointer; }