/*


 */

/* Shared interaction material. Use broder-selectable for selected controls and
   broder-focus-surface when a compound card owns its children's focus. Legacy
   Tabler selectors below adapt existing screens to those same two components. */
body:is(.brand-app, .brand-auth, .brand-simple) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 1px solid var(--broder-state-border);
  outline-offset: 2px;
}

body:is(.brand-app, .brand-auth, .brand-simple) :is(.form-control, .form-select, .ts-control):is(:focus, :focus-visible),
body:is(.brand-app, .brand-auth, .brand-simple) .ts-wrapper.focus .ts-control {
  border-color: var(--broder-state-border);
  outline: none;
  box-shadow: none;
}

body:is(.brand-app, .brand-auth, .brand-simple) :is(
  .broder-selectable, .personal-nav-link, .personal-filter-link, .nav-link,
  .assistant-history-item, .assistant-history-tabs a, .assistant-suggestion, .fc-button-primary,
  .page-link, .dropdown-item, .btn, .broder-account
):is(.active, .is-active, .is-prepared, .fc-button-active, [aria-selected='true'], [aria-current='page'], [aria-pressed='true'], [aria-expanded='true']):not(.broder-theme-toggle),
body:is(.brand-app, .brand-auth, .brand-simple) .page-item.active .page-link,
body:is(.brand-app, .brand-auth, .brand-simple) .btn-check:checked + .btn,
body:is(.brand-app, .brand-auth, .brand-simple) .form-selectgroup-input:checked + .form-selectgroup-label,
body:is(.brand-app, .brand-auth, .brand-simple) .form-check-input:is(:checked, :indeterminate),
body:is(.brand-app, .brand-auth, .brand-simple) .ts-dropdown .option:is(.active, .selected) {
  background-color: var(--surface-strong) !important;
  color: var(--text-primary) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Keep native check marks legible on neutral selections in either theme. */
:root {
  --broder-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23222323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 8 3 3 5-6'/%3E%3C/svg%3E");
  --broder-radio-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='%23222323' r='3' cx='8' cy='8'/%3E%3C/svg%3E");
  --broder-indeterminate-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23222323' stroke-width='2' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
  --broder-switch-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle fill='%23616568' r='3'/%3E%3C/svg%3E");
}
html[data-bs-theme='dark'] {
  --broder-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f2f1ef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 8 3 3 5-6'/%3E%3C/svg%3E");
  --broder-radio-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='%23f2f1ef' r='3' cx='8' cy='8'/%3E%3C/svg%3E");
  --broder-indeterminate-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23f2f1ef' stroke-width='2' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
  --broder-switch-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle fill='%23aaa9a6' r='3'/%3E%3C/svg%3E");
}
body:is(.brand-app, .brand-auth, .brand-simple) .form-check-input:checked[type='checkbox'] { --tblr-form-check-bg-image: var(--broder-checkmark); }
body:is(.brand-app, .brand-auth, .brand-simple) .form-check-input:checked[type='radio'] { --tblr-form-check-bg-image: var(--broder-radio-mark); }
body:is(.brand-app, .brand-auth, .brand-simple) .form-check-input:indeterminate { --tblr-form-check-bg-image: var(--broder-indeterminate-mark); }
body:is(.brand-app, .brand-auth, .brand-simple) .form-switch .form-check-input { --tblr-form-switch-bg: var(--broder-switch-mark); }
body:is(.brand-app, .brand-auth, .brand-simple) .form-check-input:focus-visible { outline: 1px solid var(--broder-state-border); outline-offset: -1px; border-color: transparent; box-shadow: none; }

body:is(.brand-app, .brand-auth, .brand-simple) :is(
  .broder-focus-surface, .broder-search, .broder-composer, .assistant-composer, .input-group
):focus-within {
  border-color: transparent;
  outline: 1px solid var(--broder-state-border);
  outline-offset: -1px;
  box-shadow: none;
}

/* One card, one indicator; never stack a ring on the field inside it. */
body:is(.brand-app, .brand-auth, .brand-simple) :is(
  .broder-focus-surface, .broder-search, .broder-composer, .assistant-composer, .input-group
) :is(input, textarea, button, select):is(:focus, :focus-visible) {
  border-color: transparent;
  outline: none;
  box-shadow: none;
}

body.broder-app .personal-profile-tabs .nav-link.active { border-color: transparent; }
body.broder-app .pagination .page-link { color: var(--text-secondary); }
body.broder-app .personal-calendar-page .fc .fc-button-primary:is(:focus, .fc-button-active) { border-color: transparent; box-shadow: none; }
body.broder-app .assistant-composer--prepared { border-color: var(--border); box-shadow: none; }

/* The toolbar and every page share one horizontal grid, without page-specific
   centered maximum widths. Component-internal padding remains intentional. */
body.broder-app .page-wrapper > #main-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: 0;
  padding: 20px var(--broder-page-inset) 32px;
}
body.broder-app .page-wrapper > .broder-toolbar { padding-inline: var(--broder-page-inset); }
body.broder-app :is(.broder-home, .personal-content) { width: 100%; max-width: none; margin-inline: 0; }
body.broder-app .page-wrapper .footer { padding-inline: var(--broder-page-inset); }
body.broder-app.assistant-page .page-wrapper > #main-content { padding-block: 16px 24px; }

@media (max-width: 991.98px) {
  body.broder-app { --broder-page-inset: 20px; }
  body.broder-app.assistant-page .page-wrapper > #main-content { padding-block: 10px 12px; }
}
@media (max-width: 575.98px) {
  body.broder-app { --broder-page-inset: 16px; }
}

/* Shared page chrome: one title, one action area on every workspace screen. */
body.broder-app .broder-toolbar { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-strong); }
body.broder-app .broder-toolbar-leading { flex: 1; min-width: 0; }
body.broder-app .broder-toolbar-trailing { display: flex; margin-left: 0; flex-shrink: 0; }
body.broder-app .broder-toolbar-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 25px/1.4 var(--font-display); letter-spacing: -.025em; color: var(--text-primary); }
body:is(.brand-app, .brand-auth, .brand-simple) .broder-field-error { margin: 8px 0 0; color: var(--status-danger, #c33e42); font-size: 13px; line-height: 1.5; }
body:is(.brand-app, .brand-auth, .brand-simple) :is(input, select, textarea, .ts-wrapper)[aria-invalid='true'] { border-color: var(--status-danger, #c33e42); }
body:is(.brand-app, .brand-auth, .brand-simple) .btn-primary:is(:hover, :focus, :focus-visible) { box-shadow: 0 0 0 3px rgb(255 211 42 / 18%); }
.broder-tour[hidden], .broder-tour [hidden] { display: none !important; }
.broder-tour { position: fixed; inset: 0; z-index: 1090; color: var(--text-primary); }
.broder-tour-shade { position: absolute; inset: 0; background: rgb(0 0 0 / 48%); }
.broder-tour.has-spotlight .broder-tour-shade { background: transparent; }
.broder-tour-spotlight { position: fixed; border: 2px solid var(--brand-primary); border-radius: 18px; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 48%); pointer-events: none; }
.broder-tour-card { position: fixed; width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 24px; border: 1px solid var(--border-strong); border-radius: 24px; background: var(--background); box-shadow: 0 16px 70px rgb(0 0 0 / 22%); outline: none; animation: broder-tour-enter 160ms ease-out; }
.broder-tour-topline { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12px; color: var(--text-secondary); }
.broder-tour-topline > button { margin-left: auto; min-height: 44px; min-width: 44px; }
.broder-tour-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-deep); }
.broder-tour-card h2 { margin: 0 0 12px; font: 500 28px/1.15 var(--font-display); letter-spacing: -.02em; }
.broder-tour-card p { font-size: 14px; line-height: 1.65; margin-bottom: 24px; color: var(--text-secondary); }
.broder-tour-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.broder-tour-footer > div { display: flex; gap: 8px; }
.broder-tour-footer .btn { font-size: 13px; min-height: 44px; padding: 10px 14px; border-radius: 12px; }
@keyframes broder-tour-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .broder-tour-card { bottom: max(12px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px); padding: 20px; }
  .broder-tour-footer { flex-wrap: wrap; }
  .broder-tour-footer > div { margin-left: auto; }
  body.broder-app .broder-toolbar-title { font-size: 23px; }
}
@media (max-height: 420px) {
  .broder-tour-card { padding: 14px 18px; }
  .broder-tour-topline { margin-bottom: 8px; }
  .broder-tour-card h2 { font-size: 24px; }
  .broder-tour-card p { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .broder-tour-card { animation: none; } }
body.broder-app .broder-tour-card:focus-visible { outline: none; }
/* Reusable glass surface. Consumers own layout, radius and interaction. */
:root {
  --broder-glass-tint: rgb(255 255 255 / 56%);
  --broder-glass-edge: rgb(255 255 255 / 48%);
  --broder-glass-highlight: rgb(255 255 255 / 56%);
  --broder-glass-shadow: rgb(0 0 0 / 12%);
  --broder-glass-fallback: var(--surface, #f6f8f9);
  --broder-glass-sheen: linear-gradient(135deg, rgb(255 255 255 / 12%), transparent 65%);
  --broder-glass-blur: 28px;
  --broder-glass-saturation: 125%;
}

html[data-bs-theme='dark'] {
  --broder-glass-tint: rgb(24 24 24 / 40%);
  --broder-glass-edge: rgb(255 255 255 / 16%);
  --broder-glass-highlight: rgb(255 255 255 / 18%);
  --broder-glass-shadow: rgb(0 0 0 / 24%);
  --broder-glass-sheen: linear-gradient(135deg, rgb(255 255 255 / 6%), transparent 65%);
}

.broder-glass-material--neutral {
  --text-secondary: var(--text-primary);
  --broder-glass-tint: rgb(246 248 249 / 48%);
  --broder-glass-fallback: #f6f8f9;
  --broder-glass-edge: var(--border-strong);
  --broder-glass-highlight: var(--glass-reflection);
  --broder-glass-sheen: linear-gradient(135deg, rgb(255 255 255 / 6%), transparent 65%);
  --broder-glass-blur: 44px;
  --broder-glass-saturation: 110%;
}

html[data-bs-theme='dark'] .broder-glass-material--neutral {
  --broder-glass-tint: rgb(37 37 37 / 40%);
  --broder-glass-fallback: #252525;
  --broder-glass-sheen: linear-gradient(135deg, rgb(255 255 255 / 2%), transparent 65%);
}

.broder-glass-material--yellow {
  --text-secondary: #655b3b;
  --broder-glass-tint: rgb(255 211 42 / 12%);
  --broder-glass-edge: rgb(255 211 42 / 35%);
  --broder-glass-highlight: rgb(255 253 232 / 65%);
  --broder-glass-fallback: #fff6cf;
  --broder-glass-sheen: linear-gradient(135deg, rgb(255 246 181 / 30%), rgb(255 211 42 / 4%) 58%, rgb(255 246 181 / 14%));
  --broder-glass-saturation: 135%;
}

html[data-bs-theme='dark'] .broder-glass-material--yellow {
  --text-secondary: #c2bdab;
  --broder-glass-tint: rgb(164 132 32 / 18%);
  --broder-glass-edge: rgb(255 211 42 / 22%);
  --broder-glass-highlight: rgb(255 246 181 / 18%);
  --broder-glass-fallback: #3b351f;
  --broder-glass-sheen: linear-gradient(135deg, rgb(255 246 181 / 8%), rgb(255 211 42 / 2%) 58%, rgb(255 246 181 / 4%));
}

.broder-glass-material {
  background: var(--broder-glass-fallback);
  border: 1px solid var(--broder-glass-edge);
  box-shadow: inset 0 1px 0 var(--broder-glass-highlight),
    0 8px 30px var(--broder-glass-shadow);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .broder-glass-material {
    background: var(--broder-glass-sheen), var(--broder-glass-tint);
    -webkit-backdrop-filter: blur(var(--broder-glass-blur)) saturate(var(--broder-glass-saturation));
    backdrop-filter: blur(var(--broder-glass-blur)) saturate(var(--broder-glass-saturation));
  }
}

@media (prefers-reduced-transparency: reduce) {
  .broder-glass-material {
    background: var(--broder-glass-fallback);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .broder-glass-material {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}