/* JobCity UI — a Material Design 3 layer over Bootstrap 5.
   Colours are generated from the brand colours in Settings (--jc-primary, --jc-accent), so a new brand colour
   restyles the whole app. Fonts: Roboto (built into Android) — no font download. */
:root {
  --jc-primary: #0B6E4F;
  --jc-accent: #F2A541;

  --md-primary: var(--jc-primary);
  --md-on-primary: #fff;
  --md-primary-container: color-mix(in srgb, var(--jc-primary) 30%, #fff);
  --md-on-primary-container: color-mix(in srgb, var(--jc-primary) 35%, #000);
  --md-secondary-container: color-mix(in srgb, var(--jc-primary) 17%, #fff);
  --md-on-secondary-container: color-mix(in srgb, var(--jc-primary) 22%, #000);
  --md-tertiary-container: color-mix(in srgb, var(--jc-accent) 42%, #fff);
  --md-on-tertiary-container: color-mix(in srgb, var(--jc-accent) 18%, #000);
  --md-surface: color-mix(in srgb, var(--jc-primary) 1.6%, #fff);
  --md-card-border: #E2E8E4;
  --md-surface-lowest: #fff;
  --md-surface-low: color-mix(in srgb, var(--jc-primary) 5%, #fff);
  --md-surface-container: color-mix(in srgb, var(--jc-primary) 7%, #f7f7f7);
  --md-surface-high: color-mix(in srgb, var(--jc-primary) 9%, #f0f0f0);
  --md-surface-highest: color-mix(in srgb, var(--jc-primary) 11%, #e9e9e9);
  --md-on-surface: #171D1A;
  --md-on-surface-variant: #404943;
  --md-outline: #707973;
  --md-outline-variant: #C0C9C2;
  --md-error: #BA1A1A;
  --md-error-container: #FFDAD6;
  --md-on-error-container: #410002;
  --md-info-container: #D3E4FF;
  --md-on-info-container: #001C38;
  --md-success-container: #C9EFD3;
  --md-on-success-container: #002110;
  --md-warning-container: #FFE08D;
  --md-on-warning-container: #261A00;
  --md-inverse-surface: #2C322E;
  --md-inverse-on-surface: #EDF2EE;
  --md-inverse-primary: color-mix(in srgb, var(--jc-primary) 45%, #fff);

  --md-shape-xs: 4px; --md-shape-sm: 8px; --md-shape-md: 12px; --md-shape-lg: 16px; --md-shape-xl: 28px;
  --md-elev-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px 1px rgba(0,0,0,.05);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.10), 0 2px 6px 2px rgba(0,0,0,.06);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);
  --md-ease: cubic-bezier(.2, 0, 0, 1);
  --md-ease-decel: cubic-bezier(.05, .7, .1, 1);
  --md-ease-accel: cubic-bezier(.3, 0, .8, .15);
  --md-font: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap hooks */
  --bs-body-font-family: var(--md-font);
  --bs-body-bg: var(--md-surface);
  --bs-body-color: var(--md-on-surface);
  --bs-secondary-color: var(--md-on-surface-variant);
  --bs-border-color: var(--md-outline-variant);
  --bs-border-radius: var(--md-shape-md);
  --bs-border-radius-lg: var(--md-shape-lg);
  --bs-border-radius-sm: var(--md-shape-sm);
  --bs-link-color: var(--md-primary);
  --bs-link-hover-color: var(--md-on-primary-container);
  --bs-primary: var(--jc-primary);
  --bs-primary-rgb: 11, 110, 79;
  --bs-focus-ring-color: color-mix(in srgb, var(--jc-primary) 30%, transparent);
  --jc-bg: var(--md-surface);
  --jc-text: var(--md-on-surface);
  --jc-muted: var(--md-on-surface-variant);
  --jc-radius: var(--md-shape-lg);
}

/* Page transitions between screens (Chrome on Android; others just switch instantly) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 90ms var(--md-ease-accel) both jc-fade-out; }
::view-transition-new(root) { animation: 220ms var(--md-ease-decel) both jc-rise-in; }
.jc-topbar { view-transition-name: jc-topbar; }
.jc-bottomnav { view-transition-name: jc-bottomnav; }
@keyframes jc-fade-out { to { opacity: 0; } }
@keyframes jc-rise-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes jc-fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes jc-shimmer { 100% { transform: translateX(100%); } }
@keyframes jc-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes jc-ripple { to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

html { -webkit-tap-highlight-color: transparent; }
body { font-family: var(--md-font); background: var(--md-surface); color: var(--md-on-surface); font-size: 16px; line-height: 1.5; letter-spacing: .1px; -webkit-font-smoothing: antialiased; }
h1, .h1 { font-size: 1.75rem; font-weight: 400; line-height: 2.25rem; letter-spacing: 0; }
h2, .h2 { font-size: 1.5rem; font-weight: 400; line-height: 2rem; }
h3, .h3, h4, .h4 { font-size: 1.375rem; font-weight: 400; line-height: 1.75rem; }
h5, .h5 { font-size: 1.125rem; font-weight: 500; line-height: 1.5rem; }
h6, .h6 { font-size: 1rem; font-weight: 500; line-height: 1.5rem; letter-spacing: .15px; }
.fw-bold, b, strong { font-weight: 500; }
.text-muted, .text-secondary { color: var(--md-on-surface-variant) !important; }
.small, small { font-size: .875rem; letter-spacing: .25px; }
a { color: var(--md-primary); text-underline-offset: 2px; }
::selection { background: var(--md-primary-container); }
:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
hr { border-color: var(--md-outline-variant); opacity: 1; }

/* ---------- Buttons (filled, tonal, outlined, text) ---------- */
.btn {
  --bs-btn-font-weight: 500; --bs-btn-font-size: .9375rem; --bs-btn-border-radius: 999px;
  --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .5rem; --bs-btn-focus-box-shadow: none;
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 40px; letter-spacing: .1px; transition: background-color .2s var(--md-ease), box-shadow .2s var(--md-ease), color .2s, border-color .2s;
  -webkit-user-select: none; user-select: none;
}
.btn.w-100, .btn.d-block { display: flex; }
.btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-x: 1.75rem; min-height: 52px; }
.btn-sm { --bs-btn-font-size: .8125rem; --bs-btn-padding-x: .875rem; --bs-btn-padding-y: .25rem; --bs-btn-border-radius: 999px; min-height: 32px; gap: .375rem; }
.btn:disabled, .btn.disabled { opacity: .45; }
.btn-primary { --bs-btn-bg: var(--md-primary); --bs-btn-border-color: var(--md-primary); --bs-btn-color: var(--md-on-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--md-primary) 90%, #fff); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--md-primary) 84%, #fff); --bs-btn-active-border-color: transparent; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--md-primary); --bs-btn-disabled-border-color: var(--md-primary); }
.btn-primary:hover { box-shadow: var(--md-elev-1); }
.btn-success { --bs-btn-bg: var(--md-primary); --bs-btn-border-color: var(--md-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--md-primary) 90%, #fff); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: color-mix(in srgb, var(--md-primary) 84%, #fff); --bs-btn-disabled-bg: var(--md-primary); --bs-btn-disabled-border-color: var(--md-primary); }
.btn-light, .btn-secondary { --bs-btn-bg: var(--md-secondary-container); --bs-btn-border-color: transparent; --bs-btn-color: var(--md-on-secondary-container);
  --bs-btn-hover-bg: color-mix(in srgb, var(--md-secondary-container) 88%, var(--md-on-secondary-container)); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--md-on-secondary-container);
  --bs-btn-active-bg: color-mix(in srgb, var(--md-secondary-container) 80%, var(--md-on-secondary-container)); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--md-on-secondary-container);
  --bs-btn-disabled-bg: var(--md-secondary-container); --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-color: var(--md-on-secondary-container); }
.btn-light.border { border-color: transparent !important; }
.btn-accent, .btn-warning { --bs-btn-bg: var(--md-tertiary-container); --bs-btn-border-color: transparent; --bs-btn-color: var(--md-on-tertiary-container);
  --bs-btn-hover-bg: color-mix(in srgb, var(--md-tertiary-container) 88%, var(--md-on-tertiary-container)); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--md-on-tertiary-container);
  --bs-btn-active-bg: color-mix(in srgb, var(--md-tertiary-container) 80%, var(--md-on-tertiary-container)); --bs-btn-active-color: var(--md-on-tertiary-container);
  background: var(--bs-btn-bg); color: var(--bs-btn-color); border: 0; font-weight: 500; }
.btn-accent:hover { background: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-dark {
  --bs-btn-color: var(--md-primary); --bs-btn-border-color: var(--md-outline); --bs-btn-bg: transparent;
  --bs-btn-hover-bg: color-mix(in srgb, var(--md-primary) 8%, transparent); --bs-btn-hover-border-color: var(--md-outline); --bs-btn-hover-color: var(--md-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--md-primary) 14%, transparent); --bs-btn-active-border-color: var(--md-outline); --bs-btn-active-color: var(--md-primary);
  --bs-btn-disabled-color: var(--md-primary); --bs-btn-disabled-border-color: var(--md-outline-variant); }
.btn-outline-secondary, .btn-outline-dark { --bs-btn-color: var(--md-on-surface-variant); --bs-btn-hover-color: var(--md-on-surface); --bs-btn-hover-bg: color-mix(in srgb, var(--md-on-surface) 6%, transparent); --bs-btn-active-color: var(--md-on-surface); --bs-btn-active-bg: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
.btn-danger { --bs-btn-bg: var(--md-error); --bs-btn-border-color: var(--md-error); --bs-btn-hover-bg: color-mix(in srgb, var(--md-error) 88%, #fff); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: color-mix(in srgb, var(--md-error) 80%, #fff); }
.btn-outline-danger, .btn-outline-warning { --bs-btn-color: var(--md-error); --bs-btn-border-color: var(--md-outline); --bs-btn-hover-bg: color-mix(in srgb, var(--md-error) 8%, transparent); --bs-btn-hover-color: var(--md-error); --bs-btn-hover-border-color: var(--md-outline); --bs-btn-active-bg: color-mix(in srgb, var(--md-error) 14%, transparent); --bs-btn-active-color: var(--md-error); --bs-btn-active-border-color: var(--md-outline); }
.btn-link { --bs-btn-color: var(--md-primary); --bs-btn-hover-color: var(--md-primary); --bs-btn-active-color: var(--md-primary); --bs-btn-disabled-color: var(--md-on-surface-variant); text-decoration: none; --bs-btn-padding-x: .75rem; }
.btn-link:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.btn-link.p-0:hover, .btn-link.px-0:hover { background: transparent; text-decoration: underline; }
.btn-close { border-radius: 50%; width: 2rem; height: 2rem; padding: .5rem; }
/* Icon-only buttons stay round */
.btn-icon { width: 40px; height: 40px; padding: 0; min-height: 0; border-radius: 50%; }

/* Ripple (added by ui.js) */
.jc-ripple-ink { position: absolute; border-radius: 50%; transform: scale(0); opacity: .28; background: currentColor; pointer-events: none; animation: jc-ripple .55s var(--md-ease) forwards; }

/* Choice buttons (radio / checkbox styled as buttons) -> Material chips */
.btn-check + .btn { --bs-btn-border-radius: var(--md-shape-sm); min-height: 36px; }
.btn-check:checked + .btn, .btn-check:active + .btn { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; border-color: transparent !important; }
.btn-check + .btn-outline-primary { --bs-btn-color: var(--md-on-surface-variant); }

/* ---------- Chips ---------- */
.jc-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--md-shape-sm); border: 1px solid var(--md-outline-variant); background: transparent; color: var(--md-on-surface-variant); font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .2s; position: relative; overflow: hidden; }
.jc-chip:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); color: var(--md-on-surface); }
.jc-chip.active, .jc-chip[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; padding-left: 8px; }
.jc-chip.active::before, .jc-chip[aria-pressed="true"]::before { content: "\e5ca"; font-family: jc-sym; font-size: 18px; line-height: 1; }
.jc-chip .bi { font-size: .95rem; }
.jc-chiprow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; -webkit-overflow-scrolling: touch; }
.jc-chiprow::-webkit-scrollbar { display: none; }
.jc-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 500; line-height: 1.3; padding: 3px 8px; border-radius: 6px; background: var(--md-surface-high); color: var(--md-on-surface-variant); white-space: nowrap; }
.jc-tag-primary { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.jc-tag-accent { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.jc-tag-error { background: var(--md-error-container); color: var(--md-on-error-container); }
.jc-tag-info { background: var(--md-info-container); color: var(--md-on-info-container); }

/* ---------- Badges ---------- */
.badge { --bs-badge-font-weight: 500; --bs-badge-border-radius: 6px; --bs-badge-padding-x: .5rem; --bs-badge-padding-y: .3rem; letter-spacing: .2px; }
.text-bg-success, .bg-success { background-color: var(--md-success-container) !important; color: var(--md-on-success-container) !important; }
.text-bg-warning, .bg-warning { background-color: var(--md-warning-container) !important; color: var(--md-on-warning-container) !important; }
.text-bg-danger, .bg-danger { background-color: var(--md-error-container) !important; color: var(--md-on-error-container) !important; }
.text-bg-info, .bg-info { background-color: var(--md-info-container) !important; color: var(--md-on-info-container) !important; }
.text-bg-secondary, .bg-secondary, .text-bg-light { background-color: var(--md-surface-highest) !important; color: var(--md-on-surface-variant) !important; }
.text-bg-primary, .bg-primary { background-color: var(--md-primary) !important; color: var(--md-on-primary) !important; }
.bg-light { background-color: var(--md-surface-container) !important; }
.bg-white { background-color: var(--md-surface-lowest) !important; }
.text-success { color: color-mix(in srgb, var(--md-primary) 85%, #000) !important; }
.text-danger { color: var(--md-error) !important; }
.text-primary { color: var(--md-primary) !important; }
.border { border-color: var(--md-outline-variant) !important; }

/* ---------- Cards & lists ---------- */
.card { --bs-card-border-width: 0; --bs-card-border-radius: var(--md-shape-lg); --bs-card-inner-border-radius: var(--md-shape-lg); --bs-card-bg: var(--md-surface-lowest); --bs-card-cap-bg: transparent; --bs-card-spacer-y: 1.125rem; --bs-card-spacer-x: 1.125rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); border: 1px solid var(--md-card-border) !important; }
.card.shadow-sm, .card.border-0 { box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; }
.card-header { border-bottom: 1px solid color-mix(in srgb, var(--md-outline-variant) 60%, transparent); font-weight: 500; }
.card-footer { border-top: 1px solid color-mix(in srgb, var(--md-outline-variant) 60%, transparent); }
.card-title { font-weight: 500; }
.jc-card-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-radius: 20px; }
.list-group { --bs-list-group-border-radius: var(--md-shape-lg); --bs-list-group-border-color: color-mix(in srgb, var(--md-outline-variant) 55%, transparent); --bs-list-group-item-padding-y: .875rem; --bs-list-group-item-padding-x: 1rem; --bs-list-group-action-hover-bg: var(--md-surface-low); --bs-list-group-action-active-bg: var(--md-surface-container); --bs-list-group-bg: var(--md-surface-lowest); }
.list-group:not(.list-group-flush) { box-shadow: 0 1px 2px rgba(0,0,0,.04); border: 1px solid var(--md-card-border); }
.list-group:not(.list-group-flush) .list-group-item { border-left: 0; border-right: 0; }
.list-group:not(.list-group-flush) .list-group-item:first-child { border-top: 0; }
.list-group:not(.list-group-flush) .list-group-item:last-child { border-bottom: 0; }
.list-group-item.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.list-group-item-action { position: relative; overflow: hidden; }

/* ---------- Text fields ---------- */
.form-label { font-size: .875rem; font-weight: 500; color: var(--md-on-surface-variant); margin-bottom: .375rem; letter-spacing: .1px; }
.form-control, .form-select {
  border-radius: var(--md-shape-md); border: 1px solid var(--md-outline); background-color: var(--md-surface-lowest);
  min-height: 52px; padding: .75rem 1rem; font-size: 1rem; color: var(--md-on-surface); transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-right: 2.5rem; }
textarea.form-control { min-height: 96px; }
.form-control-sm, .form-select-sm { min-height: 40px; padding: .4rem .75rem; font-size: .9rem; border-radius: var(--md-shape-sm); }
.form-select-sm { padding-right: 2rem; }
.form-control-lg { min-height: 56px; }
.form-control:hover, .form-select:hover { border-color: var(--md-on-surface); }
.form-control:focus, .form-select:focus { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); background-color: var(--md-surface-lowest); }
.form-control::placeholder { color: color-mix(in srgb, var(--md-on-surface-variant) 75%, transparent); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--md-error); background-image: none; padding-right: 1rem; }
.form-control.is-invalid:focus { box-shadow: inset 0 0 0 1px var(--md-error); }
.invalid-feedback { color: var(--md-error); font-size: .8125rem; margin-top: .25rem; }
.form-text { color: var(--md-on-surface-variant); font-size: .8125rem; }
.input-group > .form-control, .input-group > .form-select { min-height: 52px; }
.input-group-text { background: var(--md-surface-container); border-color: var(--md-outline); color: var(--md-on-surface-variant); border-radius: var(--md-shape-md); }
.form-floating > .form-control, .form-floating > .form-select { min-height: 56px; }
.form-check-input { width: 1.25em; height: 1.25em; margin-top: .15em; border: 2px solid var(--md-on-surface-variant); }
.form-check-input[type=checkbox] { border-radius: 4px; }
.form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary); }
.form-check-input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 6px color-mix(in srgb, var(--md-primary) 14%, transparent); }
.form-switch .form-check-input { width: 3.25em; height: 2em; margin-top: -.25em; border-radius: 1em; border: 2px solid var(--md-outline); background-color: var(--md-surface-highest);
  --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='2.2' fill='%23707973'/%3e%3c/svg%3e"); transition: background-position .2s var(--md-ease), background-color .2s; }
.form-switch .form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary);
  --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='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-label { padding-left: .5rem; padding-top: .1rem; }
.form-check { min-height: 1.75rem; }
.form-range::-webkit-slider-thumb { background: var(--md-primary); }
.form-range::-moz-range-thumb { background: var(--md-primary); }

/* ---------- Tabs (Material primary tabs) & pills ---------- */
.nav-tabs { --bs-nav-tabs-border-color: var(--md-outline-variant); --bs-nav-tabs-border-width: 1px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { border: 0; border-radius: 0; color: var(--md-on-surface-variant); font-weight: 500; font-size: .9375rem; padding: .75rem 1rem; white-space: nowrap; position: relative; margin-bottom: 0; }
.nav-tabs .nav-link:hover { color: var(--md-on-surface); background: color-mix(in srgb, var(--md-on-surface) 5%, transparent); }
.nav-tabs .nav-link.active { color: var(--md-primary); background: transparent; }
.nav-tabs .nav-link.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--md-primary); }
.nav-pills { --bs-nav-pills-border-radius: 999px; --bs-nav-pills-link-active-bg: var(--md-secondary-container); --bs-nav-pills-link-active-color: var(--md-on-secondary-container); gap: 6px; }
.nav-pills .nav-link { color: var(--md-on-surface-variant); font-weight: 500; }

/* ---------- Alerts -> tonal banners ---------- */
.alert { --bs-alert-border-radius: var(--md-shape-lg); --bs-alert-border-color: transparent; --bs-alert-padding-x: 1rem; --bs-alert-padding-y: .875rem; font-size: .9375rem; }
.alert-info, .alert-primary { --bs-alert-bg: var(--md-info-container); --bs-alert-color: var(--md-on-info-container); --bs-alert-link-color: var(--md-on-info-container); }
.alert-success { --bs-alert-bg: var(--md-success-container); --bs-alert-color: var(--md-on-success-container); --bs-alert-link-color: var(--md-on-success-container); }
.alert-warning { --bs-alert-bg: #FFF4D6; --bs-alert-color: #3F2E00; --bs-alert-link-color: #3F2E00; }
.alert-danger { --bs-alert-bg: var(--md-error-container); --bs-alert-color: var(--md-on-error-container); --bs-alert-link-color: var(--md-on-error-container); }
.alert-light, .alert-secondary { --bs-alert-bg: var(--md-surface-container); --bs-alert-color: var(--md-on-surface); }

/* ---------- Menus, dialogs, bottom sheets ---------- */
.dropdown-menu { --bs-dropdown-border-width: 0; --bs-dropdown-border-radius: var(--md-shape-md); --bs-dropdown-bg: var(--md-surface-container); --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--md-on-surface) 8%, transparent); --bs-dropdown-link-active-bg: var(--md-secondary-container); --bs-dropdown-link-active-color: var(--md-on-secondary-container); --bs-dropdown-item-padding-y: .625rem; --bs-dropdown-item-padding-x: 1rem; box-shadow: var(--md-elev-2); padding: .5rem 0; }
.modal { --bs-modal-border-radius: var(--md-shape-xl); --bs-modal-inner-border-radius: var(--md-shape-xl); --bs-modal-bg: var(--md-surface-low); --bs-modal-border-width: 0; --bs-modal-header-border-width: 0; --bs-modal-footer-border-width: 0; --bs-modal-padding: 1.5rem; --bs-modal-header-padding: 1.5rem 1.5rem .5rem; }
.modal-title { font-size: 1.375rem; font-weight: 400; }
.modal-footer { gap: .5rem; }
.modal-backdrop { --bs-backdrop-opacity: .32; }
@media (max-width: 575.98px) {
  /* On phones every dialog slides up from the bottom (Material bottom sheet) */
  .modal-dialog:not(.modal-fullscreen) { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; max-height: 92vh; display: flex; }
  .modal-dialog:not(.modal-fullscreen) .modal-content { border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0; max-height: 92vh; overflow: auto; padding-bottom: env(safe-area-inset-bottom); }
  .modal-dialog:not(.modal-fullscreen) .modal-content::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 2px; background: var(--md-outline-variant); margin: 12px auto 0; flex: none; }
  .modal.fade .modal-dialog:not(.modal-fullscreen) { transform: translateY(100%); transition: transform .3s var(--md-ease-decel); }
  .modal.show .modal-dialog:not(.modal-fullscreen) { transform: none; }
}
.offcanvas { --bs-offcanvas-bg: var(--md-surface-low); --bs-offcanvas-border-width: 0; }
.offcanvas-bottom { border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0; height: auto; max-height: 90vh; }

/* ---------- Tables, progress, pagination ---------- */
.table { --bs-table-bg: transparent; --bs-table-border-color: color-mix(in srgb, var(--md-outline-variant) 60%, transparent); --bs-table-hover-bg: var(--md-surface-low); --bs-table-striped-bg: var(--md-surface-low); font-size: .9375rem; }
.table > thead { color: var(--md-on-surface-variant); }
.table > thead th { font-weight: 500; font-size: .8125rem; letter-spacing: .3px; }
.progress { --bs-progress-height: .375rem; --bs-progress-border-radius: 999px; --bs-progress-bg: var(--md-surface-highest); --bs-progress-bar-bg: var(--md-primary); }
.pagination { --bs-pagination-border-radius: 999px; --bs-pagination-color: var(--md-on-surface); --bs-pagination-active-bg: var(--md-primary); --bs-pagination-active-border-color: var(--md-primary); --bs-pagination-border-color: var(--md-outline-variant); gap: 4px; }
.pagination .page-link { border-radius: 999px !important; min-width: 40px; text-align: center; }
.spinner-border { --bs-spinner-border-width: .2em; }
.placeholder { border-radius: 4px; }

/* ---------- Skeleton loading ---------- */
.jc-skeleton { position: relative; overflow: hidden; background: var(--md-surface-high); border-radius: 8px; color: transparent !important; }
.jc-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: jc-shimmer 1.3s infinite; }
.jc-skel-card { display: flex; gap: 14px; background: var(--md-surface-lowest); border-radius: 20px; padding: 16px; margin-bottom: 12px; }
.jc-skel-card .a { width: 48px; height: 48px; border-radius: 14px; flex: none; }
.jc-skel-card .l { height: 14px; margin: 6px 0 10px; }

/* ---------- Snackbar & dialog (ui.js) ---------- */
.jc-snackbar { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 2000;
  min-width: 288px; max-width: min(560px, calc(100vw - 24px)); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: var(--md-shape-xs);
  box-shadow: var(--md-elev-3); display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; font-size: .875rem; line-height: 1.35; transition: transform .25s var(--md-ease-decel), opacity .2s; }
.jc-snackbar.show { transform: translate(-50%, 0); opacity: 1; }
.jc-snackbar .msg { flex: 1; }
.jc-snackbar .bi { font-size: 1.05rem; }
.jc-snackbar .bi-check-circle-fill { color: var(--md-inverse-primary); }
.jc-snackbar .bi-exclamation-circle-fill { color: #FFB4AB; }
.jc-snackbar button { background: transparent; border: 0; color: var(--md-inverse-primary); font-weight: 500; font-size: .875rem; padding: 8px 12px; border-radius: 999px; }
@media (min-width: 768px) { .jc-snackbar { bottom: 24px; } }
.jc-dialog-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 2050; opacity: 0; transition: opacity .2s; display: flex; align-items: center; justify-content: center; padding: 24px; }
.jc-dialog-scrim.show { opacity: 1; }
.jc-dialog { background: var(--md-surface-high); color: var(--md-on-surface); border-radius: var(--md-shape-xl); width: 100%; max-width: 400px; padding: 24px; box-shadow: var(--md-elev-3); transform: scale(.92); transition: transform .25s var(--md-ease-decel); text-align: left; }
.jc-dialog-scrim.show .jc-dialog { transform: none; }
.jc-dialog .ic { display: flex; justify-content: center; margin-bottom: 16px; }
.jc-dialog .ic .bi { font-size: 1.5rem; color: var(--md-primary); }
.jc-dialog .ic .bi-exclamation-triangle-fill, .jc-dialog .ic .bi-x-circle-fill { color: var(--md-error); }
.jc-dialog h2 { font-size: 1.5rem; line-height: 2rem; margin: 0 0 16px; text-align: center; }
.jc-dialog .body { color: var(--md-on-surface-variant); font-size: .9375rem; line-height: 1.45; }
.jc-dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* ---------- App shell: top app bar, navigation bar, FAB ---------- */
.jc-app { padding-bottom: calc(80px + env(safe-area-inset-bottom)); background: var(--md-surface); }
.jc-topbar { background: var(--md-surface); position: sticky; top: 0; z-index: 1020; transition: background-color .2s, box-shadow .2s; }
.jc-topbar.scrolled { background: var(--md-surface-container); box-shadow: 0 1px 0 color-mix(in srgb, var(--md-outline-variant) 50%, transparent); }
.jc-topbar .container { min-height: 64px; }
.jc-toplink { color: var(--md-on-surface-variant); text-decoration: none; font-weight: 500; font-size: .9375rem; border-radius: 999px; padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.jc-toplink:hover { color: var(--md-on-surface); background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
.jc-toplink.active { color: var(--md-on-secondary-container); background: var(--md-secondary-container); }
.jc-iconbtn { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--md-on-surface-variant); text-decoration: none; border: 0; background: transparent; position: relative; overflow: hidden; font-size: 1.15rem; flex: none; }
.jc-iconbtn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); }
.jc-avatar-sm { width: 36px; height: 36px; border-radius: 50%; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: .875rem; text-decoration: none; overflow: hidden; flex: none; }
.jc-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.jc-lang-btn { height: 36px; border-radius: 999px; border: 1px solid var(--md-outline-variant); padding: 0 12px; color: var(--md-on-surface-variant); font-size: .8125rem; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; }
.jc-lang-btn:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); color: var(--md-on-surface); }

.jc-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(80px + env(safe-area-inset-bottom)); background: var(--md-surface-container); display: flex; justify-content: space-around; align-items: flex-start; padding: 12px 4px env(safe-area-inset-bottom); z-index: 1030; border: 0; }
.jc-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--md-on-surface-variant); text-decoration: none; font-size: .75rem; font-weight: 500; letter-spacing: .5px; min-height: 0; max-width: 96px; }
.jc-bottomnav .ind { width: 64px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; transition: background-color .2s var(--md-ease); }
.jc-bottomnav .ind .bi { font-size: 1.25rem; }
.jc-bottomnav a.active { color: var(--md-on-surface); font-weight: 700; }
.jc-bottomnav a.active .ind { background: var(--md-secondary-container); color: var(--md-on-secondary-container); animation: jc-ind .3s var(--md-ease-decel); }
@keyframes jc-ind { from { transform: scaleX(.4); } }
.jc-bottomnav .jc-badge { top: 0; right: 12px; }
.jc-fab { position: fixed; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 1029; height: 56px; border-radius: var(--md-shape-lg); background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); display: inline-flex; align-items: center; gap: 10px; padding: 0 20px 0 16px; text-decoration: none; font-weight: 500; font-size: .9375rem; box-shadow: var(--md-elev-3); overflow: hidden; transition: box-shadow .2s, transform .2s var(--md-ease); }
.jc-fab:hover { color: var(--md-on-tertiary-container); box-shadow: 0 6px 12px 4px rgba(0,0,0,.10), 0 2px 3px rgba(0,0,0,.14); }
.jc-fab .bi { font-size: 1.35rem; }
.jc-fab.hide { transform: translateY(160px); }
@media (min-width: 768px) {
  .jc-app { padding-bottom: 0; }
  .jc-fab { display: none; }
}

/* ---------- Section headers & lists ---------- */
.jc-section-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.jc-section-head h2, .jc-section-head .t { font-size: 1rem; font-weight: 500; margin: 0; }
.jc-section-head a { font-size: .875rem; font-weight: 500; text-decoration: none; }
.jc-list-anim > * { animation: jc-fade-up .35s var(--md-ease-decel) both; }
.jc-list-anim > *:nth-child(2) { animation-delay: .03s; } .jc-list-anim > *:nth-child(3) { animation-delay: .06s; }
.jc-list-anim > *:nth-child(4) { animation-delay: .09s; } .jc-list-anim > *:nth-child(5) { animation-delay: .12s; }
.jc-list-anim > *:nth-child(n+6) { animation-delay: .15s; }
.jc-empty { text-align: center; padding: 40px 16px; color: var(--md-on-surface-variant); }
.jc-empty .bi { font-size: 2.5rem; color: var(--md-outline); display: block; margin-bottom: 8px; }
.jc-chiprow > .jc-chip { flex: none; }
.jc-footer a { text-decoration: none; }
.jc-footer a:hover { text-decoration: underline; }
.fw-bold { font-weight: 500 !important; }
.fw-semibold { font-weight: 500 !important; }
h1.fw-bold, .h1.fw-bold, h2.fw-bold, .h2.fw-bold, h3.fw-bold, .h3.fw-bold, h4.fw-bold, .h4.fw-bold { font-weight: 500 !important; letter-spacing: 0; }
.display-6, .display-5 { font-weight: 400; }

/* Choice buttons are hidden checkboxes; keeping them fixed stops the browser jumping the page when one is tapped. */
.btn-check { position: fixed; top: 0; left: 0; }
.jc-cat-scroll { position: relative; overscroll-behavior: contain; }
.btn-check:disabled + .btn { opacity: .38; }

/* Searchable picker (pickers.js) */
.jc-pick-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; }
.jc-pick-btn { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md-on-surface); display: block; width: 100%; }
.jc-pick-btn.is-empty { color: var(--md-on-surface-variant); }
.jc-pick-btn.is-invalid { border-color: var(--md-error); }
.jc-pick-btn.is-invalid ~ .invalid-feedback, .jc-pick-native.is-invalid ~ .invalid-feedback { display: block; }
.jc-sheet-scrim { position: fixed; inset: 0; z-index: 2060; background: rgba(0,0,0,0); transition: background-color .2s; display: flex; align-items: flex-end; justify-content: center; }
.jc-sheet-scrim.show { background: rgba(0,0,0,.32); }
.jc-sheet-panel { background: var(--md-surface-low); width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; border-radius: 28px 28px 0 0; transform: translateY(100%); transition: transform .3s var(--md-ease-decel); padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--md-elev-3); }
.jc-sheet-scrim.show .jc-sheet-panel { transform: none; }
@media (min-width: 768px) { .jc-sheet-scrim { align-items: center; } .jc-sheet-panel { border-radius: 28px; max-height: 76vh; } }
.jc-sheet-grip { width: 32px; height: 4px; border-radius: 2px; background: var(--md-outline-variant); margin: 10px auto 0; flex: none; }
.jc-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0 20px; font-size: 1.05rem; }
.jc-sheet-search { margin: 6px 16px 8px; height: 48px; border-radius: 24px; background: var(--md-surface-lowest); border: 1px solid var(--md-outline-variant); display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--md-on-surface-variant); }
.jc-sheet-search:focus-within { border-color: var(--md-primary); }
.jc-sheet-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 1rem; color: var(--md-on-surface); }
.jc-sheet-list { overflow-y: auto; padding: 0 8px 8px; flex: 1; overscroll-behavior: contain; }
.jc-sheet-group { font-size: .75rem; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--md-primary); padding: 12px 12px 4px; }
.jc-sheet-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left; padding: 12px; border-radius: 12px; color: var(--md-on-surface); font-size: .9375rem; min-height: 48px; }
.jc-sheet-item:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
.jc-sheet-item span { flex: 1; }
.jc-sheet-item small { color: var(--md-on-surface-variant); font-size: .75rem; }
.jc-sheet-item .bi { color: var(--md-primary); visibility: hidden; }
.jc-sheet-item.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 500; }
.jc-sheet-item.on .bi { visibility: visible; }
.jc-sheet-item.muted { color: var(--md-on-surface-variant); }
.jc-sheet-empty { padding: 20px 12px; color: var(--md-on-surface-variant); font-size: .875rem; text-align: center; }
.jc-sheet-foot { border-top: 1px solid var(--md-card-border); padding: 10px 16px 14px; }
.jc-area-missing { color: var(--md-primary) !important; font-weight: 500; font-size: .875rem; }
.jc-area-other { margin-top: 8px; padding: 14px; border: 1px solid var(--md-card-border); border-radius: 16px; background: var(--md-surface-lowest); }
.jc-area-other label { display: block; }