/*
 * GiuliaMeet theme — the single place where the look is customised.
 *
 * Bootstrap 5.3 is used as-is and restyled through its CSS variables (--bs-*),
 * FullCalendar through --fc-*. No Sass build.
 *
 * One accent colour: --app-accent. Everything accent-related is derived from it,
 * so the company can override it with a single inline variable.
 */

/* ------------------------------------------------------------------ tokens */

:root,
[data-bs-theme="light"] {
  --app-accent: #4f46e5;
  --app-on-accent: #ffffff;
  --app-accent-hover: color-mix(in srgb, var(--app-accent) 86%, #000);
  --app-accent-fg: color-mix(in srgb, var(--app-accent) 92%, #000);
  --app-accent-subtle: color-mix(in srgb, var(--app-accent) 9%, var(--app-surface));
  --app-accent-ring: color-mix(in srgb, var(--app-accent) 32%, transparent);

  --app-bg: #f7f7f8;
  --app-surface: #ffffff;
  --app-surface-2: #f1f1f3;
  --app-border: #e5e5e9;
  --app-border-strong: #d2d2d8;
  --app-text: #18181b;
  --app-text-muted: #5f5f6a;

  /* Priorities: muted hues; *-fg is readable on *-bg (WCAG AA). */
  --prio-low: #7b8494;
  --prio-normal: #3d74c9;
  --prio-high: #cc7630;
  --prio-critical: #c5474b;
  --prio-mix-fg: #000;
  --prio-fg-ratio: 62%;

  /* Success (all free, accepted): the icon hue and a text colour with >= 4.5:1 contrast. */
  --app-success: #2f8f5b;
  --app-success-fg: #23704a;

  --app-shadow-overlay: 0 10px 30px rgb(15 15 25 / 0.08), 0 2px 8px rgb(15 15 25 / 0.06);
  --app-radius-sm: 0.375rem;
  --app-radius: 0.5rem;
  --app-radius-lg: 0.625rem;
  --app-topbar-height: 56px;
  --app-sidebar-width: 264px;
  --app-transition: 150ms ease;
}

[data-bs-theme="dark"] {
  --app-on-accent: #ffffff;
  --app-accent-hover: color-mix(in srgb, var(--app-accent) 82%, #fff);
  --app-accent-fg: color-mix(in srgb, var(--app-accent) 55%, #fff);
  --app-accent-subtle: color-mix(in srgb, var(--app-accent) 16%, var(--app-surface));
  --app-accent-ring: color-mix(in srgb, var(--app-accent) 55%, transparent);

  --app-bg: #0e0e10;
  --app-surface: #161618;
  --app-surface-2: #1e1e21;
  --app-border: #28282c;
  --app-border-strong: #36363c;
  --app-text: #ececef;
  --app-text-muted: #a1a1ab;

  --prio-low: #8b93a3;
  --prio-normal: #5b8fe0;
  --prio-high: #de9150;
  --prio-critical: #e06a6d;
  --prio-mix-fg: #fff;
  --prio-fg-ratio: 55%;

  --app-success: #4cb782;
  --app-success-fg: #7fd1a6;

  --app-shadow-overlay: 0 10px 30px rgb(0 0 0 / 0.45), 0 2px 8px rgb(0 0 0 / 0.35);
}

/* ------------------------------------------------------- bootstrap mapping */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.5;
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-emphasis-color: var(--app-text);
  --bs-secondary-color: var(--app-text-muted);
  --bs-tertiary-color: var(--app-text-muted);
  --bs-secondary-bg: var(--app-surface-2);
  --bs-tertiary-bg: var(--app-surface-2);
  --bs-border-color: var(--app-border);
  --bs-border-color-translucent: var(--app-border);
  --bs-heading-color: var(--app-text);
  --bs-primary: var(--app-accent);
  --bs-link-color: var(--app-accent-fg);
  --bs-link-hover-color: var(--app-accent-hover);
  --bs-focus-ring-color: var(--app-accent-ring);
  --bs-border-radius: var(--app-radius);
  --bs-border-radius-sm: var(--app-radius-sm);
  --bs-border-radius-lg: var(--app-radius-lg);
  --bs-border-radius-xl: var(--app-radius-lg);
  --bs-border-radius-xxl: var(--app-radius-lg);
  --bs-box-shadow: var(--app-shadow-overlay);
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: var(--app-shadow-overlay);
}

body {
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Only three heading levels are used across the app. */
h1, .h1 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
h2, .h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.006em; line-height: 1.35; }
h3, .h3 { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }

a {
  color: var(--app-accent-fg);
  text-decoration: none;
  transition: color var(--app-transition);
}
a:hover { color: var(--app-accent-hover); text-decoration: underline; text-underline-offset: 2px; }

.text-muted, .text-body-secondary { color: var(--app-text-muted) !important; }

:focus-visible { outline: 2px solid var(--app-accent-fg); outline-offset: 2px; }
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--app-accent-ring);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-padding-y: 0.4375rem;
  --bs-btn-padding-x: 0.875rem;
  --bs-btn-border-radius: var(--app-radius);
  transition: color var(--app-transition), background-color var(--app-transition),
    border-color var(--app-transition), box-shadow var(--app-transition);
}
.btn-sm { --bs-btn-padding-y: 0.3125rem; --bs-btn-padding-x: 0.625rem; --bs-btn-font-size: 0.8125rem; }

.btn-primary {
  --bs-btn-color: var(--app-on-accent);
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-color: var(--app-on-accent);
  --bs-btn-hover-bg: var(--app-accent-hover);
  --bs-btn-hover-border-color: var(--app-accent-hover);
  --bs-btn-active-color: var(--app-on-accent);
  --bs-btn-active-bg: var(--app-accent-hover);
  --bs-btn-active-border-color: var(--app-accent-hover);
  --bs-btn-disabled-color: var(--app-on-accent);
  --bs-btn-disabled-bg: var(--app-accent);
  --bs-btn-disabled-border-color: var(--app-accent);
}

/* Neutral button: the default for secondary actions. */
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--app-text);
  --bs-btn-bg: var(--app-surface);
  --bs-btn-border-color: var(--app-border-strong);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-2);
  --bs-btn-hover-border-color: var(--app-border-strong);
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--app-surface-2);
  --bs-btn-active-border-color: var(--app-border-strong);
  --bs-btn-disabled-color: var(--app-text-muted);
  --bs-btn-disabled-bg: var(--app-surface);
  --bs-btn-disabled-border-color: var(--app-border);
}

/* Borderless button for toolbars and icon actions. */
.btn-ghost {
  --bs-btn-color: var(--app-text-muted);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--app-surface-2);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}
.btn-icon {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: 2.125rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.btn-danger {
  --bs-btn-bg: var(--prio-critical);
  --bs-btn-border-color: var(--prio-critical);
  --bs-btn-hover-bg: color-mix(in srgb, var(--prio-critical) 86%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--prio-critical) 86%, #000);
}

/* ------------------------------------------------------------------ forms */

.form-control,
.form-select {
  font-size: 0.875rem;
  background-color: var(--app-surface);
  border-color: var(--app-border-strong);
  border-radius: var(--app-radius);
  padding: 0.4375rem 0.75rem;
  transition: border-color var(--app-transition), box-shadow var(--app-transition);
}
.form-select { padding-right: 2.25rem; }
.form-control:focus,
.form-select:focus { border-color: var(--app-accent); background-color: var(--app-surface); }
.form-control::placeholder { color: var(--app-text-muted); opacity: 0.8; }
.form-label { font-weight: 500; margin-bottom: 0.375rem; }
.form-text { color: var(--app-text-muted); font-size: 0.8125rem; }
.form-check-input { border-color: var(--app-border-strong); background-color: var(--app-surface); }
.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
/* Bootstrap paints the knob of a focused, unchecked switch light blue: keep it neutral (the
   focus ring already shows the focus, in the accent colour). */
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}
.invalid-feedback { font-size: 0.8125rem; color: var(--prio-critical); }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--prio-critical); }

/* ----------------------------------------------------- surfaces & overlays */

.card {
  --bs-card-bg: var(--app-surface);
  --bs-card-border-color: var(--app-border);
  --bs-card-border-radius: var(--app-radius-lg);
  --bs-card-inner-border-radius: calc(var(--app-radius-lg) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  box-shadow: none;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--app-surface);
  --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-border-radius: var(--app-radius-lg);
  --bs-dropdown-inner-border-radius: var(--app-radius);
  --bs-dropdown-box-shadow: var(--app-shadow-overlay);
  --bs-dropdown-padding-x: 0.25rem;
  --bs-dropdown-padding-y: 0.25rem;
  --bs-dropdown-font-size: 0.875rem;
  --bs-dropdown-item-padding-x: 0.625rem;
  --bs-dropdown-item-padding-y: 0.4375rem;
  --bs-dropdown-item-border-radius: var(--app-radius-sm);
  --bs-dropdown-link-color: var(--app-text);
  --bs-dropdown-link-hover-color: var(--app-text);
  --bs-dropdown-link-hover-bg: var(--app-surface-2);
  --bs-dropdown-link-active-color: var(--app-text);
  --bs-dropdown-link-active-bg: var(--app-accent-subtle);
  --bs-dropdown-header-color: var(--app-text-muted);
  --bs-dropdown-divider-bg: var(--app-border);
  box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-item { display: flex; align-items: center; gap: 0.625rem; transition: background-color var(--app-transition); }
.dropdown-item .bi { color: var(--app-text-muted); font-size: 1rem; }
.dropdown-item.active .bi,
.dropdown-item:active .bi { color: var(--app-accent-fg); }

.modal {
  --bs-modal-bg: var(--app-surface);
  --bs-modal-border-color: var(--app-border);
  --bs-modal-border-radius: var(--app-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--app-radius-lg) - 1px);
  --bs-modal-box-shadow: var(--app-shadow-overlay);
  --bs-modal-header-border-color: var(--app-border);
  --bs-modal-footer-border-color: var(--app-border);
  --bs-modal-padding: 1.25rem;
}
.modal-content { box-shadow: var(--bs-modal-box-shadow); }
/* Fragments loaded into the meeting modal wrap the header, body and footer (the form, the
   card). On phones the modal is full-screen: the wrapper fills it and only the body scrolls. */
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .modal-content > :is(.meeting-form, .meeting-card) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  .modal-fullscreen-sm-down .modal-content > :is(.meeting-form, .meeting-card) > .modal-body {
    overflow-y: auto;
  }
}
.modal-title { font-size: 1.0625rem; font-weight: 600; }

.toast {
  --bs-toast-bg: var(--app-surface);
  --bs-toast-border-color: var(--app-border);
  --bs-toast-border-radius: var(--app-radius-lg);
  --bs-toast-box-shadow: var(--app-shadow-overlay);
  --bs-toast-header-bg: transparent;
  --bs-toast-header-color: var(--app-text);
  --bs-toast-header-border-color: var(--app-border);
  --bs-toast-color: var(--app-text);
  --bs-toast-max-width: 380px;
  --bs-toast-font-size: 0.875rem;
}
.toast-container { z-index: 1090; }
.app-toasts { top: var(--app-topbar-height); }
.toast-icon { font-size: 1rem; line-height: 1.3; color: var(--app-text-muted); }
.toast-success .toast-icon { color: var(--app-success); }
.toast-info .toast-icon { color: var(--prio-normal); }
.toast-warning .toast-icon { color: var(--prio-high); }
.toast-error .toast-icon { color: var(--prio-critical); }

.offcanvas { --bs-offcanvas-bg: var(--app-surface); --bs-offcanvas-border-color: var(--app-border); }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-hover-bg: var(--app-surface-2);
  --bs-table-hover-color: var(--app-text);
}
.table > thead th { font-weight: 500; color: var(--app-text-muted); font-size: 0.8125rem; }

/* ------------------------------------------------------------- priorities */

.prio-low { --prio: var(--prio-low); }
.prio-normal { --prio: var(--prio-normal); }
.prio-high { --prio: var(--prio-high); }
.prio-critical { --prio: var(--prio-critical); }
[class*="prio-"] {
  --prio-bg: color-mix(in srgb, var(--prio) 14%, var(--app-surface));
  --prio-fg: color-mix(in srgb, var(--prio) var(--prio-fg-ratio), var(--prio-mix-fg));
}

.badge-priority {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--app-radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--prio-fg);
  background: var(--prio-bg);
}
.badge-priority::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--prio);
}

/* ----------------------------------------------------------------- layout */

html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--app-topbar-height);
  padding: 0 1rem;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--app-text);
  font-weight: 600;
  font-size: 0.9375rem;
}
.app-brand:hover { color: var(--app-text); text-decoration: none; }
.app-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--app-radius);
  background: var(--app-accent);
  color: var(--app-on-accent);
  font-size: 0.8125rem;
  font-weight: 700;
}
.app-logo-img { height: 1.75rem; width: auto; border-radius: var(--app-radius-sm); }
.app-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }

.app-shell { flex: 1 1 auto; display: flex; min-height: 0; }

.app-sidebar {
  flex: 0 0 var(--app-sidebar-width);
  width: var(--app-sidebar-width);
  padding: 1.25rem 1rem;
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
  overflow-y: auto;
}
@media (max-width: 991.98px) {
  /* Below lg the sidebar content lives in an offcanvas; the column itself collapses. */
  .app-sidebar { flex-basis: 0; width: 0; padding: 0; border: 0; overflow: visible; }
  .app-sidebar .offcanvas-lg { --bs-offcanvas-width: min(320px, 85vw); }
}
@media (min-width: 992px) {
  .app-sidebar .offcanvas-lg .offcanvas-body { flex-direction: column; }
}

.app-section-label {
  margin-bottom: 0.5rem;
  color: var(--app-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.app-sidebar-section + .app-sidebar-section { margin-top: 1.5rem; }

.app-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}
@media (max-width: 575.98px) { .app-content { padding: 1rem; } }
/* Room under the last element for the AI assistant's floating button (not the calendar,
   which fills the height). */
.has-assistant:not(.page-calendar) .app-content { padding-bottom: 5.5rem; }

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.page-header h1 { margin: 0; }
.page-subtitle { margin: 0.25rem 0 0; color: var(--app-text-muted); }

/* HTMX global loading indicator (thin bar under the top edge). */
.app-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1100;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--app-transition);
}
.app-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--app-accent);
  animation: app-progress 1s ease-in-out infinite;
}
.app-progress.htmx-request { opacity: 1; }
@keyframes app-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------------------------------------------------------- empty states */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
}
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--app-surface-2);
  color: var(--app-text-muted);
  font-size: 1.375rem;
}
.empty-state h1, .empty-state h2 { margin-bottom: 0.375rem; }
/* 404 / 403 / 500: one empty state in a card. */
.error-card { width: 100%; max-width: 32rem; margin: 3rem auto 0; }
@media (max-width: 575.98px) { .error-card { margin-top: 1rem; } }

/* Single-column pages (profile, settings, password) and form cards. */
.page-column { width: 100%; max-width: 48rem; margin-inline: auto; }
.page-column-sm { max-width: 28rem; }
.card-form { max-width: 44rem; }
.empty-state p { max-width: 30rem; margin: 0 auto 1.25rem; color: var(--app-text-muted); }

/* ----------------------------------------------------------------- alerts */

.alert {
  --bs-alert-border-radius: var(--app-radius);
  --bs-alert-padding-x: 0.875rem;
  --bs-alert-padding-y: 0.625rem;
  font-size: 0.875rem;
}
.alert-danger {
  --bs-alert-bg: color-mix(in srgb, var(--prio-critical) 10%, var(--app-surface));
  --bs-alert-border-color: color-mix(in srgb, var(--prio-critical) 30%, var(--app-surface));
  --bs-alert-color: color-mix(in srgb, var(--prio-critical) var(--prio-fg-ratio), var(--prio-mix-fg));
}
/* Warnings (no S3, purge, future meetings) in the high-priority hue. */
.alert-warning {
  --bs-alert-bg: color-mix(in srgb, var(--prio-high) 10%, var(--app-surface));
  --bs-alert-border-color: color-mix(in srgb, var(--prio-high) 30%, var(--app-surface));
  --bs-alert-color: color-mix(in srgb, var(--prio-high) var(--prio-fg-ratio), var(--prio-mix-fg));
  --bs-alert-link-color: var(--bs-alert-color);
}
.text-danger-emphasis { color: color-mix(in srgb, var(--prio-critical) var(--prio-fg-ratio), var(--prio-mix-fg)) !important; }

/* ---------------------------------------------------------------- avatars */

.avatar {
  --avatar-size: 2rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  font-size: calc(var(--avatar-size) * 0.4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  user-select: none;
  background: var(--app-surface-2);
  color: var(--app-text);
}
.avatar-xs { --avatar-size: 1.25rem; }
.avatar-sm { --avatar-size: 1.625rem; }
.avatar-md { --avatar-size: 2rem; }
.avatar-lg { --avatar-size: 3rem; }
.avatar-xl { --avatar-size: 6rem; }

/* Muted hues for initials; background and text are mixed from one hue per slot. */
.avatar-c0 { --avatar-hue: #6366f1; }
.avatar-c1 { --avatar-hue: #0ea5a4; }
.avatar-c2 { --avatar-hue: #d97706; }
.avatar-c3 { --avatar-hue: #db2777; }
.avatar-c4 { --avatar-hue: #2563eb; }
.avatar-c5 { --avatar-hue: #65a30d; }
.avatar-c6 { --avatar-hue: #9333ea; }
.avatar-c7 { --avatar-hue: #dc2626; }
[class*="avatar-c"] {
  background: color-mix(in srgb, var(--avatar-hue) 16%, var(--app-surface));
  color: color-mix(in srgb, var(--avatar-hue) var(--prio-fg-ratio), var(--prio-mix-fg));
}

.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.user-menu { min-width: 15rem; }
.user-menu-header { padding: 0.5rem 0.625rem 0.625rem; }
.user-menu-header .name { font-weight: 600; }
.user-menu-header .email { color: var(--app-text-muted); font-size: 0.8125rem; }

/* ------------------------------------------------------------ status badges */

.badge-status {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--app-radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--app-surface-2);
  color: var(--app-text-muted);
}
.badge-status.status-pending { background: var(--app-accent-subtle); color: var(--app-accent-fg); }
.badge-status.badge-private { background: var(--app-accent-subtle); color: var(--app-accent-fg); }
.badge-status.status-accepted {
  background: color-mix(in srgb, var(--app-success) 14%, var(--app-surface));
  color: color-mix(in srgb, var(--app-success) var(--prio-fg-ratio), var(--prio-mix-fg));
}
.badge-status.status-warning {
  background: color-mix(in srgb, var(--prio-high) 16%, var(--app-surface));
  color: color-mix(in srgb, var(--prio-high) var(--prio-fg-ratio), var(--prio-mix-fg));
}
.badge-status.status-revoked {
  background: color-mix(in srgb, var(--prio-critical) 14%, var(--app-surface));
  color: color-mix(in srgb, var(--prio-critical) var(--prio-fg-ratio), var(--prio-mix-fg));
}

/* -------------------------------------------------------------- auth pages */

.auth-page {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card { width: 100%; max-width: 25rem; }
.auth-card .card-body { padding: 2rem; }
.auth-brand { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.5rem; }
.auth-brand .app-logo { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.auth-card h1 { margin-bottom: 0.25rem; }
.auth-footer { margin-top: 1.25rem; text-align: center; color: var(--app-text-muted); }
@media (max-width: 575.98px) { .auth-card .card-body { padding: 1.5rem; } }

.form-text ul { padding-left: 1.1rem; margin: 0.25rem 0 0; }

/* ------------------------------------------------------------------ panel */

.panel-nav { display: flex; flex-direction: column; gap: 0.125rem; }
.panel-nav a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--app-radius);
  color: var(--app-text);
  transition: background-color var(--app-transition);
}
.panel-nav a .bi { color: var(--app-text-muted); font-size: 1rem; }
.panel-nav a:hover { background: var(--app-surface-2); text-decoration: none; }
.panel-nav a.active { background: var(--app-accent-subtle); color: var(--app-accent-fg); font-weight: 500; }
.panel-nav a.active .bi { color: var(--app-accent-fg); }
.panel-nav .disabled { color: var(--app-text-muted); pointer-events: none; opacity: 0.6; }

.table-card { overflow: hidden; }
.table-card .table { margin: 0; }
.table-card .table > :not(caption) > * > * { padding: 0.75rem 1rem; }
.table-card .table > tbody > tr:last-child > * { border-bottom: 0; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.min-w-0 { min-width: 0; }
.cell-muted { color: var(--app-text-muted); font-size: 0.8125rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 11rem; }
@media (max-width: 575.98px) { .filter-bar .form-control, .filter-bar .form-select { flex: 1 1 100%; } }

.profile-avatar { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.dl-grid dt { font-weight: 400; color: var(--app-text-muted); }
.dl-grid dd { margin: 0; }

[x-cloak] { display: none !important; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.badge-inherited {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.375rem;
  border-radius: var(--app-radius-sm);
  background: var(--app-surface-2);
  color: var(--app-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: nowrap;
}

/* Panel (stage 7): overview numbers, bulk bar, user card tabs, role matrix, department tree,
   accent preview, audit log. */
.filter-bar-wrap .filter-search { flex: 1 1 16rem; }
@media (min-width: 1200px) { .filter-bar-wrap .form-select { min-width: 9.5rem; } }
.filter-date { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--app-text-muted); }
.filter-bar .filter-date .form-control { min-width: 0; }
@media (max-width: 575.98px) { .filter-date { flex: 1 1 100%; } .filter-bar .filter-date .form-control { flex: 1 1 auto; } }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  color: var(--app-text);
  transition: border-color var(--app-transition);
}
a.stat-card:hover { border-color: var(--app-border-strong); text-decoration: none; color: var(--app-text); }
.stat-card.is-alert { border-color: color-mix(in srgb, var(--prio-critical) 45%, var(--app-border)); }
.stat-card.is-alert .stat-value { color: color-mix(in srgb, var(--prio-critical) var(--prio-fg-ratio), var(--prio-mix-fg)); }
.stat-label { display: flex; align-items: center; gap: 0.5rem; color: var(--app-text-muted); font-size: 0.8125rem; }
.stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-of { font-size: 1rem; font-weight: 500; color: var(--app-text-muted); }
.stat-note { color: var(--app-text-muted); font-size: 0.8125rem; }
.stat-meter { height: 0.375rem; border-radius: 999px; background: var(--app-surface-2); overflow: hidden; margin: 0.25rem 0; }
.stat-meter > span { display: block; height: 100%; background: var(--app-accent); }
.stat-meter.is-low > span { background: var(--prio-critical); }

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--app-accent) 35%, var(--app-border));
  border-radius: var(--app-radius-lg);
  background: var(--app-accent-subtle);
}
.bulk-bar .form-select { width: auto; min-width: 12rem; }
@media (max-width: 575.98px) {
  .bulk-bar { position: sticky; bottom: 0.5rem; z-index: 5; box-shadow: var(--app-shadow-overlay); }
  .bulk-bar .form-select { flex: 1 1 100%; }
}
.users-table .col-check { width: 2.5rem; padding-right: 0 !important; }
.users-table tr.is-selected > * { background: var(--app-accent-subtle); }
.users-table td { max-width: 16rem; }
.users-table .google-email { max-width: 12rem; margin-top: 0.125rem; }
.user-card-row.is-selected { border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-border)); }
.sort-link { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; white-space: nowrap; }
.sort-link .bi { font-size: 0.75rem; color: var(--app-text-muted); opacity: 0.6; }
.sort-link.is-active .bi { opacity: 1; color: var(--app-accent-fg); }
.sort-link:hover { text-decoration: none; color: var(--app-accent-fg); }
.rights-icons { display: inline-flex; gap: 0.25rem; }
.right-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--app-radius-sm);
  background: var(--app-accent-subtle);
  color: var(--app-accent-fg);
}

.card-tabs { border-bottom: 1px solid var(--app-border); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; gap: 0.125rem; }
.card-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: 0.625rem 0.75rem;
  color: var(--app-text-muted);
  white-space: nowrap;
}
.card-tabs .nav-link:hover { color: var(--app-text); }
.card-tabs .nav-link.active { color: var(--app-accent-fg); border-bottom-color: var(--app-accent); background: transparent; font-weight: 500; }
.user-card .tab-form { max-width: 46rem; }
.user-card .tab-content > .tab-pane { padding-top: 0.5rem; }

.role-matrix { min-width: 40rem; }
.role-matrix .matrix-perm { min-width: 15rem; font-weight: 400; }
/* The permission names stay in view while the roles scroll sideways. */
.role-matrix tbody .matrix-perm, .role-matrix thead .matrix-perm {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--app-surface);
}
@media (max-width: 575.98px) {
  .role-matrix .matrix-perm { min-width: 10.5rem; max-width: 10.5rem; }
  .role-matrix .matrix-role { min-width: 7rem; }
}
.role-matrix .matrix-hint { font-size: 0.75rem; max-width: 26rem; }
.role-matrix .matrix-role { text-align: center; vertical-align: top; min-width: 8.5rem; }
.role-matrix .matrix-role-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin-top: 0.25rem; font-weight: 400; }
.role-matrix .matrix-role-actions { display: flex; justify-content: center; gap: 0.125rem; margin-top: 0.25rem; }
.role-matrix .matrix-cell { text-align: center; }
.role-matrix .matrix-cell .form-check-input { width: 1.125rem; height: 1.125rem; float: none; margin: 0; }
.role-matrix .matrix-section th {
  background: var(--app-surface-2);
  color: var(--app-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.dept-tree { list-style: none; margin: 0; padding: 0; }
.dept-tree .dept-tree { margin-left: 1.25rem; padding-left: 0.5rem; border-left: 1px solid var(--app-border); }
.dept-tree[hidden] { display: none; }
.dept-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 14rem) 5.5rem;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.25rem;
  border-radius: var(--app-radius);
}
.dept-row:hover { background: var(--app-surface-2); }
.dept-toggle .bi { transition: transform var(--app-transition); display: inline-block; }
.dept-toggle[aria-expanded="true"] .bi { transform: rotate(90deg); }
.dept-toggle-spacer { width: 2rem; }
.dept-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dept-head { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: 0.8125rem; }
.dept-people { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 575.98px) {
  .dept-row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .dept-head { grid-column: 2 / 4; grid-row: 2; }
}
.people-list { display: flex; flex-direction: column; }
.people-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: var(--app-radius); }
a.people-row:hover { background: var(--app-surface-2); text-decoration: none; }

.accent-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.accent-sample {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border);
}
.accent-sample.sample-light { background: #ffffff; color: #18181b; border-color: #e5e5e9; }
.accent-sample.sample-dark { background: #161618; color: #ececef; border-color: #36363c; }
.accent-sample .sample-title { flex: 1 1 100%; font-size: 0.75rem; opacity: 0.75; }
.accent-sample .sample-button {
  padding: 0.25rem 0.625rem;
  border-radius: var(--app-radius-sm);
  background: var(--preview-accent);
  color: var(--preview-on-accent);
  font-weight: 500;
}
.accent-sample.sample-light .sample-link { color: var(--preview-fg-light); text-decoration: underline; }
.accent-sample.sample-dark .sample-link { color: var(--preview-fg-dark); text-decoration: underline; }
.accent-sample .sample-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--preview-accent);
  color: var(--preview-on-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}
@media (max-width: 399.98px) { .accent-preview { grid-template-columns: 1fr; } }
.contrast-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.8125rem; color: var(--app-text-muted); }
.contrast-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.contrast-list strong { color: var(--app-text); font-variant-numeric: tabular-nums; }
.contrast-list .is-ok .bi { color: var(--app-success); }
.contrast-list .is-bad { color: color-mix(in srgb, var(--prio-critical) var(--prio-fg-ratio), var(--prio-mix-fg)); }

.audit-action { white-space: nowrap; }
.audit-action.tone-danger {
  background: color-mix(in srgb, var(--prio-critical) 14%, var(--app-surface));
  color: color-mix(in srgb, var(--prio-critical) var(--prio-fg-ratio), var(--prio-mix-fg));
}
.audit-action.tone-success {
  background: color-mix(in srgb, var(--app-success) 14%, var(--app-surface));
  color: color-mix(in srgb, var(--app-success) var(--prio-fg-ratio), var(--prio-mix-fg));
}
.audit-details { font-size: 0.8125rem; color: var(--app-text-muted); overflow-wrap: anywhere; }
.audit-table td { vertical-align: top; }

/* AI assistant usage on phones: one card per user (the table from md up). */
.usage-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--app-border); border-radius: var(--app-radius); }
.usage-card.is-total { background: var(--app-surface-2); }
.usage-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 1rem; margin: 0; }
.usage-counts dt { font-weight: 400; color: var(--app-text-muted); font-size: 0.75rem; }
.usage-counts dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Settings: working hours grid (one row per weekday), logo and accent fields. */
.wh-row {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--app-border);
}
.wh-row:first-child { padding-top: 0; }
.wh-row:last-child { border-bottom: 0; padding-bottom: 0; }
.wh-day { margin: 0; }
.wh-times { display: flex; align-items: center; gap: 0.5rem; grid-column: 2; grid-row: 1; }
.wh-times .form-control { width: 7.5rem; }
.wh-sep { color: var(--app-text-muted); }
.wh-off-label { grid-column: 2; grid-row: 1; color: var(--app-text-muted); }
.wh-row.is-off .wh-times { display: none; }
.wh-error { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 575.98px) {
  .wh-row { grid-template-columns: 1fr; }
  .wh-times, .wh-off-label { grid-column: 1; grid-row: auto; }
  .wh-times .form-control { flex: 1 1 0; width: auto; min-width: 0; }
}
.wh-summary { gap: 0.25rem 1rem; }
.logo-field { display: flex; align-items: center; gap: 1rem; }
.logo-preview {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 3.5rem;
  padding: 0.5rem;
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
}
.logo-preview img { max-width: 100%; max-height: 2.5rem; }
/* File picker: a visually hidden input followed by a button-styled label. */
.file-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.file-picker input:focus-visible + label { box-shadow: 0 0 0 3px var(--app-accent-ring); }
.file-picker-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-control-color { width: 3rem; height: 2.25rem; padding: 0.25rem; }
.accent-value { color: var(--app-text-muted); font-size: 0.8125rem; }

/* Tom Select (searchable selects) aligned with the form controls. */
.ts-wrapper .ts-control { border-color: var(--app-border-strong); border-radius: var(--app-radius); background: var(--app-surface); padding: 0.4375rem 0.75rem; font-size: 0.875rem; }
.ts-wrapper.focus .ts-control { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-ring); }
.ts-dropdown { border-color: var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow-overlay); font-size: 0.875rem; }
.ts-dropdown .active { background: var(--app-accent-subtle); color: var(--app-text); }

/* ---------------------------------------------------------- FullCalendar */

.fc {
  --fc-border-color: var(--app-border);
  --fc-page-bg-color: var(--app-surface);
  --fc-neutral-bg-color: var(--app-surface-2);
  --fc-neutral-text-color: var(--app-text-muted);
  --fc-today-bg-color: var(--app-accent-subtle);
  --fc-now-indicator-color: var(--app-accent);
  --fc-highlight-color: var(--app-accent-ring);
  --fc-non-business-color: color-mix(in srgb, var(--app-surface-2) 60%, transparent);
  --fc-event-border-color: transparent;
  --fc-event-selected-overlay-color: color-mix(in srgb, var(--app-text) 8%, transparent);
  --fc-small-font-size: 0.75rem;
  --fc-button-text-color: var(--app-text);
  --fc-button-bg-color: var(--app-surface);
  --fc-button-border-color: var(--app-border-strong);
  --fc-button-hover-bg-color: var(--app-surface-2);
  --fc-button-hover-border-color: var(--app-border-strong);
  --fc-button-active-bg-color: var(--app-surface-2);
  --fc-button-active-border-color: var(--app-border-strong);
  font-size: 0.8125rem;
}

/* The surface draws the outer frame; FullCalendar keeps only the inner grid lines. */
.calendar-surface .fc .fc-scrollgrid { border-width: 0; }
.calendar-surface .fc .fc-scrollgrid-section > * { border-right-width: 0; }
.calendar-surface .fc .fc-scrollgrid-section:last-child > * { border-bottom-width: 0; }

.fc .fc-col-header-cell { background: var(--app-surface); }
.fc .fc-col-header-cell-cushion {
  display: inline-block;
  padding: 0.5rem 0.25rem;
  color: var(--app-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}
/* Ukrainian weekday names are lower case ("понеділок"): capitalised as headers. */
.fc .fc-col-header-cell-cushion::first-letter { text-transform: uppercase; }
.fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion { color: var(--app-accent-fg); font-weight: 600; }
.fc a.fc-col-header-cell-cushion,
.fc a.fc-daygrid-day-number { color: inherit; text-decoration: none; }
.fc .fc-daygrid-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.625rem;
  height: 1.625rem;
  margin: 0.25rem 0.25rem 0;
  padding: 0 0.375rem;
  border-radius: 999px;
  color: var(--app-text);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.fc .fc-day-today .fc-daygrid-day-number { background: var(--app-accent); color: var(--app-on-accent); font-weight: 600; }
.fc .fc-daygrid-day.fc-day-today { background: transparent; }
.fc .fc-timegrid-col.fc-day-today { background: color-mix(in srgb, var(--app-accent) 4%, transparent); }
.fc .fc-timegrid-slot { height: 1.75rem; }
.fc .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-axis-cushion { color: var(--app-text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.fc .fc-daygrid-more-link { color: var(--app-text-muted); font-size: 0.75rem; font-weight: 500; }
.fc .fc-daygrid-more-link:hover { color: var(--app-text); background: var(--app-surface-2); }
.fc .fc-popover { border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-overlay); overflow: hidden; }
.fc .fc-popover-header { background: var(--app-surface-2); padding: 0.375rem 0.625rem; font-size: 0.8125rem; font-weight: 500; }
.fc .fc-highlight { background: var(--app-accent-subtle); }

/* Events: compact boxes with a priority stripe on the left. */
.fc .gm-event {
  --fc-event-bg-color: var(--prio-bg);
  --fc-event-text-color: var(--prio-fg);
  background: var(--prio-bg);
  color: var(--prio-fg);
  border: 0;
  border-left: 3px solid var(--prio);
  border-radius: var(--app-radius-sm);
  font-size: 0.75rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color var(--app-transition);
}
.fc .gm-event:hover { background: color-mix(in srgb, var(--prio) 22%, var(--app-surface)); }
.fc .gm-event:focus-visible { outline: 2px solid var(--app-accent-fg); outline-offset: 1px; }
.fc .gm-event .fc-event-main { color: inherit; padding: 0; }
.fc .fc-daygrid-event.gm-event { margin: 1px 4px 2px; }
.fc .fc-timegrid-event.gm-event { box-shadow: 0 0 0 1px var(--app-surface); }
.gm-event-body { display: flex; align-items: baseline; gap: 0.375rem; min-width: 0; padding: 0.125rem 0.375rem; overflow: hidden; }
.gm-event-meta { display: inline-flex; flex: 0 0 auto; align-items: baseline; gap: 0.375rem; min-width: 0; }
.gm-event-time { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.gm-event-private { display: inline-flex; align-items: baseline; gap: 0.25rem; font-size: 0.6875rem; font-weight: 500; }
.gm-event-private .bi { font-size: 0.625rem; }
/* The "Private" word only where there is room: tall week/day events. */
.fc-daygrid-event .gm-event-private-label,
.fc-timegrid-event-short .gm-event-private-label { display: none; }
.gm-event-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-event-meet { flex: 0 0 auto; font-size: 0.75rem; }
.fc-timegrid-event .gm-event-body { position: relative; flex-direction: column; align-items: stretch; gap: 0; height: 100%; padding: 0.1875rem 0.375rem; }
.fc-timegrid-event .gm-event-body.has-meet { padding-right: 1.375rem; }
@media (max-width: 575.98px) {
  /* Week columns are too narrow on phones: the card shows the Meet link instead. */
  .fc-timeGridWeek-view .gm-event-meet,
  .fc-timeGridWeek-view .gm-event-private-label { display: none; }
  .fc-timeGridWeek-view .gm-event-body.has-meet { padding-right: 0.375rem; }
}
.fc-timegrid-event .gm-event-title { font-weight: 500; white-space: normal; }
.fc-timegrid-event .gm-event-meet { position: absolute; top: 0.25rem; right: 0.375rem; }
.fc-timegrid-event-short .gm-event-body { flex-direction: row; align-items: baseline; gap: 0.375rem; }
.fc-timegrid-event-short .gm-event-title { white-space: nowrap; }
/* Past meetings: grey and dimmed; not draggable (the API marks them read-only). */
.fc .gm-event.is-past { --prio: var(--prio-low); opacity: 0.6; }
.fc .gm-event.is-past:hover { opacity: 0.8; }
.fc .fc-event-mirror.gm-event { opacity: 0.85; }

/* ------------------------------------------------------------ calendar page */

.calendar-shell { flex: 0 0 auto; height: calc(100dvh - var(--app-topbar-height)); min-height: 32rem; }
.calendar-main { min-height: 0; padding: 1rem 1.25rem 1.25rem; }
@media (max-width: 575.98px) { .calendar-main { padding: 0.75rem; } }

.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.cal-toolbar-nav,
.cal-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.cal-title { margin: 0 0 0 0.25rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-title::first-letter { text-transform: uppercase; }
@media (max-width: 575.98px) {
  .cal-toolbar-nav,
  .cal-toolbar-actions { flex: 1 1 100%; }
  .cal-toolbar-actions { justify-content: space-between; }
}

.calendar-surface {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  overflow: hidden;
}
#calendar { height: 100%; }

/* Segmented control: view switch, "All / Mine". */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
}
.segmented-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border: 0;
  border-radius: calc(var(--app-radius) - 2px);
  background: transparent;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: color var(--app-transition), background-color var(--app-transition);
}
.segmented-option:hover { color: var(--app-text); }
.segmented-option.active,
.btn-check:checked + .segmented-option {
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: 0 0 0 1px var(--app-border-strong);
}
.segmented-option:focus-visible,
.btn-check:focus-visible + .segmented-option { outline: 0; box-shadow: 0 0 0 3px var(--app-accent-ring); }

/* Sidebar filters: checkboxes (meeting scope and priority); nothing checked = all. */
.calendar-filters fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.calendar-filters legend { float: none; width: auto; }
.filter-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0; }
.filter-check .form-check-input { float: none; flex: 0 0 auto; margin: 0; }
.filter-check .form-check-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.prio-dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--prio); }
.sidebar-note { padding-top: 1.25rem; border-top: 1px solid var(--app-border); }

/* ------------------------------------------------------------ meeting form */

.meeting-form .form-label { font-size: 0.8125rem; }
/* A <legend> used as a field label looks like the other labels. */
legend.form-label { float: none; width: auto; font-size: 0.875rem; font-weight: 500; }
.meeting-form legend.form-label { font-size: 0.8125rem; }
/* Shown by Alpine (x-show): no !important display, unlike .d-block. */
.invalid-feedback.is-visible { display: block; }
.next-day { margin-top: 0.25rem; }
.organizer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-bottom: 0.5rem;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}
.organizer-row .fw-medium { color: var(--app-text); }
.person-option { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.person-name { font-weight: 500; }
.person-meta { color: var(--app-text-muted); font-size: 0.75rem; }
.person-chip { display: inline-flex; align-items: center; gap: 0.375rem; }
.ts-wrapper.multi .ts-control { gap: 0.25rem; padding: 0.3125rem 0.5rem; min-height: 2.375rem; }
.ts-wrapper.multi .ts-control > .item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.0625rem 0.25rem 0.0625rem 0.125rem;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface-2);
  color: var(--app-text);
  font-size: 0.8125rem;
}
.ts-wrapper.multi .ts-control > .item.active { border-color: var(--app-accent); background: var(--app-accent-subtle); color: var(--app-text); }
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  margin-left: 0.125rem;
  padding: 0 0.3125rem;
  border: 0;
  border-radius: 999px;
  color: var(--app-text-muted);
}
.ts-wrapper.plugin-remove_button .item .remove:hover { background: transparent; color: var(--prio-critical); }
.participants-select.is-invalid + .ts-wrapper .ts-control { border-color: var(--prio-critical); }
.ts-wrapper .ts-control input { color: var(--app-text); }
.ts-dropdown .option { padding: 0.375rem 0.625rem; }
/* User picker (static/js/user-picker.js): groups by department, indented by depth. */
.ts-dropdown .ts-dropdown-content { max-height: 20rem; }
.ts-dropdown .optgroup { --depth: 0; }
.ts-dropdown .optgroup::before { margin: 0.25rem 0; border-color: var(--app-border); }
.ts-dropdown .optgroup-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem 0.625rem 0.25rem calc(0.625rem + var(--depth) * 0.875rem);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.75rem;
  font-weight: 600;
}
.ts-dropdown .optgroup-parents { color: var(--app-text-muted); font-weight: 400; }
.ts-dropdown .optgroup .option { padding-left: calc(0.625rem + var(--depth) * 0.875rem); }
.ts-dropdown .create,
.ts-dropdown .no-results { padding: 0.5rem 0.625rem; color: var(--app-text-muted); }
.dept-menu { max-height: 16rem; min-width: 15rem; overflow-y: auto; }
.dept-menu .dropdown-item { padding-left: calc(0.625rem + var(--depth, 0) * 1rem); }
.dept-count { color: var(--app-text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.local-times {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  list-style: none;
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}
.local-times li { display: flex; align-items: baseline; gap: 0.5rem; }
.local-times .fw-medium { color: var(--app-text); }

/* Availability (SPEC 6): status line, common free slots, conflicts toast. The status region
   stays in the DOM (live region); only its lines are toggled. */
.availability-status { color: var(--app-text-muted); font-size: 0.8125rem; }
.availability-line { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.5rem 0 0; line-height: 1.4; }
.availability-line > span:last-child { min-width: 0; }
.availability-line .bi { flex: 0 0 auto; font-size: 0.875rem; }
.availability-line .spinner-border {
  --bs-spinner-width: 0.875rem;
  --bs-spinner-height: 0.875rem;
  --bs-spinner-border-width: 0.125rem;
  flex: 0 0 auto;
  align-self: center;
}
.availability-line.is-free { color: var(--app-success-fg); font-weight: 500; }
.availability-line.is-free .bi { color: var(--app-success); }
.availability-line.is-conflicts { color: var(--app-text); }
.availability-line.is-conflicts .bi { color: var(--prio-high); }
.availability-details {
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-accent-fg);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.availability-details:hover { color: var(--app-accent-hover); }
.common-slots { margin-top: 0.5rem; }
.common-slots-label { margin-bottom: 0.375rem; color: var(--app-text-muted); font-size: 0.75rem; font-weight: 500; }
.common-slots-list { display: flex; flex-wrap: wrap; gap: 0.375rem; transition: opacity var(--app-transition); }
.common-slots[aria-busy="true"] .common-slots-list { opacity: 0.6; }
.common-slots-empty { color: var(--app-text-muted); font-size: 0.8125rem; }
.slot-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--app-transition), border-color var(--app-transition), color var(--app-transition);
}
.slot-chip:hover { background: var(--app-surface-2); }
.slot-chip.active { border-color: var(--app-accent); background: var(--app-accent-subtle); color: var(--app-accent-fg); }
.slot-chip:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--app-accent-ring); }

.availability-toast { --bs-toast-max-width: 400px; }
.availability-toast-title { margin: 0 0 0.5rem; font-weight: 600; }
.availability-people {
  display: grid;
  gap: 0.75rem;
  max-height: min(55vh, 24rem);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.availability-person { --avatar-gap: 0.5rem; min-width: 0; }
.availability-person-head { display: flex; align-items: center; gap: var(--avatar-gap); min-width: 0; font-weight: 500; }
.availability-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Conflicts and free time are indented under the name (avatar-sm + gap). */
.availability-conflicts { margin: 0.25rem 0 0; padding: 0 0 0 calc(1.625rem + var(--avatar-gap)); list-style: none; }
.availability-conflict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.25rem; }
.availability-conflict::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.125rem;
  border-radius: 50%;
  background: var(--prio-critical);
}
.availability-conflict[data-type="outside_working_hours"]::before { background: var(--prio-high); }
.availability-time { font-weight: 500; font-variant-numeric: tabular-nums; }
.availability-free {
  margin: 0.25rem 0 0;
  padding-left: calc(1.625rem + var(--avatar-gap));
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.prio-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.prio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--app-transition), border-color var(--app-transition);
}
.prio-option:hover { background: var(--app-surface-2); }
.btn-check:checked + .prio-option { border-color: var(--prio); background: var(--prio-bg); color: var(--prio-fg); }
.btn-check:focus-visible + .prio-option { box-shadow: 0 0 0 3px var(--app-accent-ring); }
.meeting-switches {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}
.meeting-switches .form-check-input:disabled ~ .form-check-label { opacity: 0.6; }
@media (min-width: 768px) { .meeting-switches { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* ------------------------------------------------------------ meeting card */

.meeting-facts { display: grid; gap: 0.625rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.meeting-facts li { display: flex; align-items: flex-start; gap: 0.75rem; }
.meeting-facts .bi { flex: 0 0 auto; color: var(--app-text-muted); font-size: 1rem; line-height: 1.3; }
.meeting-description {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
  overflow-wrap: anywhere;
}
.meeting-section-title { margin-bottom: 0.5rem; color: var(--app-text-muted); font-size: 0.75rem; font-weight: 500; }
.participant-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.625rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.participant-list li { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }

/* ------------------------------------------------------------ motion / a11y */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------- Google (SPEC 7) */

/* The permanent banner under the top bar while Google is not connected. */
.google-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  padding: 0.5rem 1rem;
  background: var(--app-accent-subtle);
  border-bottom: 1px solid color-mix(in srgb, var(--app-accent) 22%, var(--app-surface));
  font-size: 0.875rem;
}
.google-banner.is-reconnect {
  background: color-mix(in srgb, var(--prio-high) 12%, var(--app-surface));
  border-bottom-color: color-mix(in srgb, var(--prio-high) 30%, var(--app-surface));
}
.google-banner-icon { flex: 0 0 auto; color: var(--app-accent-fg); font-size: 1rem; }
.google-banner.is-reconnect .google-banner-icon { color: var(--prio-high); }
.google-banner-text { flex: 1 1 16rem; margin: 0; min-width: 0; }
.google-banner-actions { display: flex; align-items: center; gap: 0.375rem; margin-left: auto; }
.google-banner-actions form { margin: 0; }

/* The calendar fills the height left under the top bar (and the banner, if any). */
.page-calendar { height: 100vh; height: 100dvh; }
.page-calendar .calendar-shell { flex: 1 1 0; height: auto; }

.menu-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--prio-high);
}

.google-card h2 { display: flex; align-items: center; }
.google-note,
.google-question {
  padding: 0.75rem 0.875rem;
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
}
.google-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.google-note .bi { color: var(--prio-high); }
.google-note form { margin: 0; }
.google-question { border: 1px solid color-mix(in srgb, var(--app-accent) 30%, var(--app-surface)); background: var(--app-accent-subtle); }
.google-steps summary { cursor: pointer; font-weight: 500; }
.google-steps ol { margin: 0.625rem 0 0.5rem; padding-left: 1.25rem; }
.google-steps li + li { margin-top: 0.25rem; }

.google-required { display: flex; gap: 0.875rem; align-items: flex-start; }
.google-required-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--app-accent-subtle);
  color: var(--app-accent-fg);
  font-size: 1.125rem;
}

/* Sync state in the meeting card. */
.meeting-facts .sync-state.is-synced .bi { color: var(--app-success); }
.meeting-facts .sync-state.is-pending .bi { color: var(--prio-normal); }
.meeting-facts .sync-state.is-error .bi { color: var(--prio-high); }
.sync-error { margin-top: 0.125rem; color: var(--app-text-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.meeting-facts .sync-retry { padding: 0; margin-top: 0.25rem; font-size: 0.8125rem; }
.meeting-facts .sync-retry .bi { color: inherit; font-size: inherit; }

.availability-line.is-google { color: var(--app-text-muted); }

/* ------------------------------------------------------ public pages (7.6) */

.public-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin-top: 1.25rem;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}
.public-footer-links { display: flex; gap: 0.5rem; }
.public-footer a { color: var(--app-text-muted); }
.public-footer a:hover { color: var(--app-text); }
.public-footer-languages { display: flex; gap: 0.25rem; margin: 0; }
.public-footer-languages .btn { padding: 0 0.25rem; color: var(--app-text-muted); font-size: inherit; text-decoration: none; }
.public-footer-languages .btn.active { color: var(--app-text); font-weight: 500; }
.auth-page { flex-direction: column; }

.legal-page { max-width: 46rem; }
.legal-text { padding: 2rem; line-height: 1.6; }
.legal-text h1 { margin-bottom: 0.25rem; }
.legal-text h2 { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
.legal-text ul { padding-left: 1.25rem; }
.legal-text li + li { margin-top: 0.375rem; }
.legal-updated { color: var(--app-text-muted); font-size: 0.8125rem; }
.legal-table { margin: 0.5rem 0 1rem; font-size: 0.875rem; line-height: 1.5; }
.legal-table th { white-space: nowrap; }
.legal-table td:first-child { white-space: nowrap; }
.legal-table td { vertical-align: top; }
@media (max-width: 575.98px) {
  /* Phones: one card per scope instead of a wide table. */
  .legal-table thead { display: none; }
  .legal-table tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--app-border); }
  .legal-table td { display: block; padding: 0.125rem 0; border: 0; white-space: normal; }
}
@media (max-width: 575.98px) { .legal-text { padding: 1.25rem; } }

/* --------------------------------------------- public home page (12А.1) */

.landing { max-width: 56rem; padding: 1.5rem 0 0.5rem; }
.landing-hero { max-width: 40rem; margin: 0 auto 2rem; text-align: center; }
.landing-logo { width: 3rem; height: 3rem; margin-bottom: 1rem; font-size: 1.25rem; border-radius: 10px; }
.landing-hero h1 { font-size: 1.75rem; margin-bottom: 0.75rem; }
.landing-lead { color: var(--app-text-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; }
.landing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.landing-note { margin: 1rem 0 0; color: var(--app-text-muted); font-size: 0.8125rem; }
.landing-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.landing-feature .card-body { padding: 1.25rem; }
.landing-feature .bi { display: inline-flex; margin-bottom: 0.625rem; color: var(--app-accent-fg); font-size: 1.25rem; }
.landing-feature h2 { margin-bottom: 0.375rem; font-size: 1rem; }
.landing-feature p { margin: 0; color: var(--app-text-muted); line-height: 1.55; }
.landing-google .card-body { padding: 1.25rem 1.5rem; line-height: 1.6; }
.landing-google h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.landing-google ul { padding-left: 1.25rem; margin-bottom: 0.75rem; }
.landing-google li + li { margin-top: 0.25rem; }
@media (max-width: 767.98px) {
  .landing { padding-top: 0.5rem; }
  .landing-features { grid-template-columns: minmax(0, 1fr); }
  .landing-hero h1 { font-size: 1.5rem; }
}

/* ------------------------------------------------ recurring meetings (5.4) */

.badge-recurring { background: var(--app-accent-subtle); color: var(--app-accent-fg); }
.fc .gm-event-repeat-icon { flex: 0 0 auto; font-size: 0.6875rem; }
.gm-event-repeat { display: none; color: inherit; font-size: 0.6875rem; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-timegrid-event:not(.fc-timegrid-event-short) .gm-event-repeat { display: block; }

/* The "Custom…" dialog is drawn over the meeting form, inside the same modal. */
.recurrence-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.4);
}
.recurrence-dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  max-height: 100%;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-overlay);
}
.recurrence-dialog-header,
.recurrence-dialog-footer { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1rem; }
.recurrence-dialog-header { justify-content: space-between; border-bottom: 1px solid var(--app-border); }
.recurrence-dialog-footer { justify-content: flex-end; border-top: 1px solid var(--app-border); }
.recurrence-dialog-body { display: grid; gap: 1rem; padding: 1rem; overflow-y: auto; }
.recurrence-every { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.recurrence-every .form-control { width: 4.5rem; }
.recurrence-every .form-select { width: auto; min-width: 8rem; }
.recurrence-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.recurrence-section legend { float: none; width: auto; margin-bottom: 0.375rem; }
.recurrence-section .form-check + .form-check { margin-top: 0.375rem; }
.recurrence-end-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.recurrence-end-row .form-check-label { min-width: 3.5rem; }
.recurrence-end-row input[type="date"] { width: auto; }
.recurrence-end-row input[type="number"] { width: 4.5rem; }
.recurrence-unit { color: var(--app-text-muted); font-size: 0.875rem; }
.weekday-picker { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.weekday-toggle {
  min-width: 2.375rem;
  height: 2.125rem;
  padding: 0 0.5rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--app-transition), border-color var(--app-transition), color var(--app-transition);
}
.weekday-toggle:hover { background: var(--app-surface-2); }
.weekday-toggle.active { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-on-accent); }
.weekday-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--app-accent-ring); }
.recurrence-preview {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
  font-size: 0.8125rem;
}
.recurrence-preview .bi { color: var(--app-text-muted); }

/* "This meeting / This and following / All meetings". */
.scope-options { display: grid; gap: 0.5rem; }
.scope-option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  cursor: pointer;
  transition: background-color var(--app-transition), border-color var(--app-transition);
}
.scope-option:hover { background: var(--app-surface-2); }
.scope-option:has(input:checked) { border-color: var(--app-accent); background: var(--app-accent-subtle); }
.scope-option:has(input:disabled) { cursor: not-allowed; opacity: 0.65; }
.scope-option:has(input:disabled):hover { background: transparent; }
.scope-option .form-check-input { flex: 0 0 auto; margin: 0.1875rem 0 0; }
.scope-option-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.scope-option-label { font-weight: 500; }
.scope-option-hint { color: var(--app-text-muted); font-size: 0.75rem; line-height: 1.4; }
.scope-option-hint:empty { display: none; }
.scope-confirm { display: flex; gap: 0.75rem; align-items: flex-start; }
.scope-confirm .bi { flex: 0 0 auto; color: var(--prio-critical); font-size: 1.125rem; line-height: 1.3; }

/* ------------------------------------------------------------ AI assistant */

/* The floating button (SPEC 7А.2): bottom right, above the page, below modals. */
.assistant-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--app-accent);
  color: var(--app-on-accent);
  font-size: 1.375rem;
  box-shadow: var(--app-shadow-overlay);
  transition: background-color var(--app-transition), transform var(--app-transition);
}
.assistant-fab:hover { background: var(--app-accent-hover); }
.assistant-fab:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--app-accent-ring), var(--app-shadow-overlay); }
@media (max-width: 575.98px) { .assistant-fab { right: 1rem; bottom: 1rem; } }

.assistant-panel { --bs-offcanvas-width: 420px; }
@media (max-width: 575.98px) { .assistant-panel { --bs-offcanvas-width: 100vw; } }
.assistant-header { gap: 0.5rem; border-bottom: 1px solid var(--app-border); padding: 0.75rem 1rem; }
.assistant-header .offcanvas-title { display: flex; align-items: center; font-size: 1rem; font-weight: 600; }
.assistant-header .offcanvas-title .bi { color: var(--app-accent-fg); }
.assistant-header .btn-close { margin: 0; }

.assistant-log { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; }

.assistant-empty { margin: auto 0; text-align: center; padding: 1rem 0.5rem; }
.assistant-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--app-accent-subtle);
  color: var(--app-accent-fg);
  font-size: 1.375rem;
}
.assistant-empty-title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.375rem; }
.assistant-empty-text { color: var(--app-text-muted); margin: 0 auto 1rem; max-width: 22rem; }
.assistant-examples { display: grid; gap: 0.5rem; text-align: left; }
.assistant-example {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  color: var(--app-text);
  text-align: left;
  transition: background-color var(--app-transition), border-color var(--app-transition);
}
.assistant-example:hover { background: var(--app-surface-2); border-color: var(--app-border-strong); }
.assistant-example:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--app-accent-ring); }
.assistant-example .bi { flex: 0 0 auto; color: var(--app-text-muted); margin-top: 0.125rem; }

.assistant-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.assistant-row.is-user { align-items: flex-end; }
.assistant-bubble {
  max-width: 88%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--app-radius-lg);
  background: var(--app-surface-2);
  overflow-wrap: anywhere;
}
.assistant-text { white-space: pre-wrap; }
.assistant-row.is-user .assistant-bubble { background: var(--app-accent-subtle); border-bottom-right-radius: var(--app-radius-sm); }
.assistant-row.is-assistant .assistant-bubble { border-bottom-left-radius: var(--app-radius-sm); }
.assistant-row.is-error .assistant-bubble { background: transparent; border: 1px solid var(--app-border); color: var(--prio-critical); }
.assistant-bubble.is-failed { opacity: 0.6; }

.assistant-typing { display: inline-flex; gap: 0.25rem; padding: 0.75rem; }
.assistant-typing span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--app-text-muted);
  animation: assistant-dot 1.2s infinite ease-in-out;
}
.assistant-typing span:nth-child(2) { animation-delay: 0.15s; }
.assistant-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes assistant-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .assistant-typing span { animation: none; opacity: 0.6; } }

/* The meeting draft card: "Open in form" opens the normal meeting form. */
.assistant-draft {
  width: 88%;
  padding: 0.75rem;
  border: 1px solid var(--app-border);
  border-left: 3px solid var(--app-accent);
  border-radius: var(--app-radius);
  background: var(--app-surface);
}
.assistant-draft-head { display: flex; align-items: center; gap: 0.375rem; color: var(--app-text-muted); font-size: 0.75rem; }
.assistant-draft-head .bi-calendar-plus { color: var(--app-accent-fg); }
.assistant-draft-flag { margin-left: auto; }
.assistant-draft-title { font-weight: 600; margin: 0.25rem 0 0.5rem; overflow-wrap: anywhere; }
.assistant-draft-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
}
.assistant-draft-facts dt { color: var(--app-text-muted); font-weight: 400; }
.assistant-draft-facts dd { margin: 0; display: flex; align-items: center; gap: 0.375rem; min-width: 0; overflow-wrap: anywhere; }
.assistant-draft-note { margin: 0.5rem 0 0; color: var(--app-text-muted); font-size: 0.75rem; }

.assistant-footer { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--app-border); }
.assistant-google-note { margin: 0 0 0.5rem; color: var(--app-text-muted); font-size: 0.8125rem; }
.assistant-form { display: flex; align-items: flex-end; gap: 0.375rem; }
.assistant-input { resize: none; min-height: 2.375rem; max-height: 10rem; line-height: 1.45; }
.assistant-mic.is-listening { color: var(--prio-critical); background: var(--app-surface-2); }
.assistant-send { flex: 0 0 auto; width: 2.375rem; height: 2.375rem; }
.assistant-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; margin: 0.5rem 0 0; font-size: 0.75rem; }
.assistant-status.is-muted { color: var(--app-text-muted); }
.assistant-processor { margin: 0.5rem 0 0; color: var(--app-text-muted); font-size: 0.75rem; }
.assistant-processor a { color: inherit; text-decoration: underline; }
.assistant-rec-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--prio-critical); align-self: center; }
.assistant-interim { color: var(--app-text-muted); }