/* =============================================================================
   Plutus Analytics — Component styles (references theme tokens in theme.css)
   ========================================================================== */

/* --- Global ------------------------------------------------------------ */
html { -webkit-font-smoothing: antialiased; }
html, body { font-family: var(--tk-font-body); }
button, input, optgroup, select, textarea { font-family: inherit; }
/* All icons site-wide use one size (token in theme.css) */
.ph { font-size: var(--tk-icon-size); }
body {
  font-family: var(--tk-font-body);
  color: var(--tk-text);
  background-color: var(--tk-primary-soft);
  background-image: linear-gradient(var(--tk-bg-overlay), var(--tk-bg-overlay)), var(--tk-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-right: 0 !important;
  padding-top: 0 !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-weight: 500;
}

main.container-main {
  flex: 1 0 auto;
}

/* --- Top navigation (solid deep navy) ----------------------------------- */
.navbar-container {
  background: var(--tk-navbar-bg);
  box-shadow: var(--tk-navbar-shadow);
  font-weight: 500;
}
.navbar {
  min-width: var(--tk-container-max);
  max-width: var(--tk-container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 8px 0;
  min-height: var(--tk-navbar-height);
}
.navbar-brand img { height: var(--tk-logo-height); width: auto; margin-right: 66px; }
.navbar-nav > .nav-item { padding-left: 40px; }
.navbar-nav > .nav-item > .nav-link {
  color: var(--tk-nav-link-color) !important;
  font-size: 1rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 3px solid transparent !important;
}
.navbar-nav > .nav-item > .nav-link:hover { border-bottom-color: var(--tk-accent) !important; }
.navbar-nav > .nav-item > .nav-link.active { border-bottom-color: var(--tk-accent) !important; }
.navbar-nav .navbar-text { color: var(--tk-nav-link-color) !important; font-size: var(--tk-nav-auth-size); }
/* top-right account icons: dedicated size + space before label */
.navbar-nav .navbar-text i {
  font-size: var(--tk-icon-size-auth);
  vertical-align: middle;
  padding-right: var(--tk-nav-auth-icon-gap) !important;
}
/* subtle divider between auth items (Login | Register) and (user | Log Out) */
.navbar-nav.pr-2 > .nav-item + .nav-item {
  border-left: 1px solid var(--tk-nav-divider) !important;
  margin-left: 20px;
  padding-left: 20px;
}
.navbar-nav.pr-2 > .nav-item { padding-left: 0; }
.username { text-align: right; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the current auth page (e.g. Register) is highlighted as a filled CTA */
.pt-nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--tk-btn-primary-gradient);
  color: var(--tk-surface-solid) !important;
  border-radius: var(--tk-radius-sm);
  padding: 9px 22px;
  font-weight: 650;
}
.pt-nav-cta:hover { background: var(--tk-btn-primary-gradient-hover); text-decoration: none; }
.pt-nav-cta .ph { display: none; }

/* --- Page footer (copyright + Contact) ------------------------------------ */
/* the design uses a light (regular) weight here, not the body's medium 500 */
footer { font-weight: 100; }

/* --- Layout frame: two separate white cards over background ---------------- */
.pt-layout {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: stretch;
  width: var(--tk-container-max);
  max-width: var(--tk-container-max);
  margin: 22px auto 44px;
}

/* Standalone white card used by login/register etc. (previously .sub-content) */
.sub-content {
  background: var(--tk-surface);
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-card);
  padding: 24px;
  backdrop-filter: blur(12px);
}

/* Sidebar (own white rounded card) */
.pt-sidebar {
  flex: 0 0 var(--tk-sidebar-width);
  width: var(--tk-sidebar-width);
  background: var(--tk-surface);
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-card);
  padding: 22px 0 30px;
  backdrop-filter: blur(12px);
}
.pt-sidebar .nav { flex-direction: column; padding: 0; align-items: stretch; }
/* items must never grow past the sidebar card (long nowrap labels otherwise widen the <li>) */
.pt-sidebar .nav-item { padding-left: 22px; width: 100%; min-width: 0; }
/* only the top-level items are inset; nested <li> wrappers must not add their own indent
   (some sidebars wrap sub-items in `li.nav-item`, others put the <a> straight in the <ul>) */
.pt-sidebar .nav .nav .nav-item { padding-left: 0; }
.pt-sidebar .nav-link {
  color: var(--tk-text);
  padding: 9px 10px;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
  border-radius: 0;
  display: block;
  margin-right: var(--tk-sidebar-item-inset);
  /* labels never wrap; if one is wider than the sidebar it is ellipsised instead of spilling */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pt-sidebar .nav-link:hover { background: var(--tk-primary-soft); text-decoration: none; }
/* sidebar icons: dedicated size + gap to label */
.pt-sidebar .nav-link i {
  font-size: var(--tk-icon-size-sidebar);
  margin-right: var(--tk-sidebar-icon-gap);
  display: inline-block;
  vertical-align: middle;
}

/* Level 1 — group heading (BONDS / DERIVATIVES / MODEL PERFORMANCE) */
.pt-sidebar .nav-link.group-title {
  text-transform: uppercase;
  color: var(--tk-sidebar-group-color);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 16px;
  position: relative;      /* anchor for the absolutely positioned chevron */
}
/* chevron only on group headings that have a child list (CSS-drawn) */
.pt-sidebar .nav-item:has(> ul) > .nav-link.group-title {
  padding-right: 26px;     /* keep the label clear of the chevron */
}
.pt-sidebar .nav-item:has(> ul) > .nav-link.group-title::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);   /* chevron-right */
  transition: transform 0.15s ease;
}
/* rotate chevron down when the group list is expanded */
.pt-sidebar .nav-item:has(> ul:not(.d-none)) > .nav-link.group-title::after {
  transform: translateY(-50%) rotate(45deg);
}
.pt-sidebar .nav-link.group-title.active { background: transparent; }

/* Level 2 & 3 — progressive indentation + guide lines make the hierarchy clear.
   Level 2 (product) is lighter than level 1 (category); level 3 (actions) is
   lighter still. Unselected text & icon share --tk-text. */
.pt-sidebar .nav .nav .nav-link {
  color: var(--tk-text);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--tk-radius-sm);
}
.pt-sidebar .nav .nav .nav .nav-link {
  color: var(--tk-text);
  font-size: 0.86rem;
  font-weight: 400;
  border-radius: var(--tk-radius-sm);
}
.pt-sidebar .nav .nav .nav-link i,
.pt-sidebar .nav .nav .nav .nav-link i {
  color: currentColor;
}
.pt-sidebar .nav .nav .nav-link i { font-size: 1.15rem; }
.pt-sidebar .nav .nav .nav .nav-link i { font-size: 1rem; }
/* selected: pill background + left blue bar + blue text/icon (as level 1) */
.pt-sidebar .nav .nav .nav-link.active,
.pt-sidebar .nav .nav .nav .nav-link.active {
  color: var(--tk-primary);
  background: var(--tk-primary-soft);
  box-shadow: inset 3px 0 0 var(--tk-sidebar-active-bar);
}
/* `!important` to beat Bootstrap's `.pl-3` (1rem) that some sidebars put on nested lists.
   Each level gets its own indent and guide line: level 2 = 14px, level 3 = 28px. */
.pt-sidebar .nav .nav {
  padding-left: 14px !important;
  border-left: 1px solid var(--tk-border-strong);
}
.pt-sidebar .nav .nav .nav {
  padding-left: 28px !important;
  border-left-color: var(--tk-border);
}
/* selected menu item: use the filled icon variant */
.pt-sidebar .nav-link.active i { font-family: "Phosphor-Fill" !important; }

/* Main content (own white rounded card) */
.pt-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 700px;
  padding: 20px 20px 20px;
  background: var(--tk-surface);
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-card);
  backdrop-filter: blur(12px);
}

/* --- Page header (title + subtitle + right action) ------------------------ */
.pt-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.pt-page-title {
  font-family: var(--tk-font-header);
  color: var(--tk-text-strong);
  font-size: 2.0rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
/* the design no longer shows a subtitle under the page title (kept in the markup,
   hidden centrally here so every page follows it) */
.pt-page-subtitle { display: none; }
.pt-page-action a { color: var(--tk-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.pt-page-action a:hover { text-decoration: underline; }
/* plain links with a leading icon (e.g. "How it works"): centre the icon on the text.
   `.pt-btn` links already handle this themselves. */
.pt-page-action a:not(.pt-btn) { display: inline-flex; align-items: center; gap: 6px; }

/* --- Home page hero (vertically centered, right of center) ----------------- */
.home-page main.container-main {
  display: flex;
  align-items: center;        /* vertical middle of the viewport */
  justify-content: center;  /* push content to the right */
}
.home-hero { max-width: 960px; text-align: left; }
.home-slogan {
  color: var(--tk-navy);
  font-size: 2rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.home-hero__sub {
  color: var(--tk-text);
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0;
}

/* --- About page (upper-middle of the viewport) ----------------------------- */
.about-page main.container-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.about-content {
  width: 100%;
  max-width: 700px;
  margin-bottom: 10vh;   /* bias the centered block upward */
  text-align: left;
}
.about-content .about {
  color: var(--tk-text);
  font-size: 1.15rem;
  line-height: 1.7;
}
.about-content .contact-us { font-size: 1.1rem; }

/* --- Section cards (moved to sections.css) ---------------------------------
   Section card styles are now in theme/sections.css for centralized maintenance.
   ========================================================================== */

/* --- Fields grid ----------------------------------------------------------- */
.pt-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 16px;
}
.pt-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .pt-cols-3, .pt-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pt-field { display: flex; flex-direction: column; }
.pt-field-label {
  color: var(--tk-text);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 7px;
}
.pt-field-label i { color: var(--tk-icon-color); }
.pt-input {
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-sm);
  padding: 10px 12px;
  font-size: 0.95rem;
  color: var(--tk-text-strong);
  background: var(--tk-input-bg);
  height: auto;
  min-height: var(--tk-input-height);
}
.pt-input::placeholder { color: var(--tk-placeholder); opacity: 1; }
.pt-input:hover { border-color: var(--tk-input-hover-border); }
.pt-input:focus { border-color: var(--tk-accent); box-shadow: var(--tk-focus-ring); }
.pt-input.is-invalid { border-color: var(--tk-danger-text); }
/* Term Structure Model selector: fixed width so the "Shifted Log-normal
   Stochastic Vol" option plus three trailing spaces is fully visible. */
select[name="vol_type"] { width: 296px !important; max-width: 100%; }
/* Flat, non-bold group heading in the yield-curve selector (see NestedSelectWidget). */
select option.pt-select-group { font-weight: 400 !important; color: var(--tk-text); }
.pt-field-error { color: var(--tk-danger-text); font-size: 0.85rem; margin-top: 5px; }
.pt-field-hint { color: var(--tk-text-muted); font-size: 0.88rem; margin-top: 8px; }
.pt-input-wrap { position: relative; }

/* Yield curve field: select + Customize button side by side */
.pt-yield-row { display: flex; align-items: center; gap: 12px; }
.pt-yield-row .pt-input { flex: 1 1 auto; min-width: 0; }

/* --- Buttons ---------------------------------------------------------------- */
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--tk-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pt-btn-primary {
  background: var(--tk-btn-primary-gradient);
  color: var(--tk-surface-solid);
  box-shadow: var(--tk-btn-shadow);
}
.pt-btn-primary:hover {
  background: var(--tk-btn-primary-gradient-hover);
  color: var(--tk-surface-solid);
  text-decoration: none;
}
.pt-btn-outline { background: var(--tk-surface-solid); color: var(--tk-primary); border-color: var(--tk-btn-outline-border); }
.pt-btn-outline:hover { background: var(--tk-primary-soft); border-color: var(--tk-primary); text-decoration: none; }
.pt-btn-danger { background: var(--tk-surface-solid); color: var(--tk-danger-text); border-color: var(--tk-danger-text); }
.pt-btn-danger:hover { background: var(--tk-danger-text); color: var(--tk-surface-solid); border-color: var(--tk-danger-text); text-decoration: none; }
/* Delete buttons stay red even next to .pt-btn-outline (this file loads last) */
.pt-btn.pt-curve-del, .pt-btn.pt-curve-del i { color: var(--tk-danger-text); }
.pt-btn.pt-curve-del { border-color: var(--tk-danger-text); }
.pt-btn.pt-curve-del:hover { color: var(--tk-surface-solid); background: var(--tk-danger-text); border-color: var(--tk-danger-text); text-decoration: none; }
.pt-btn.pt-curve-del:hover i { color: var(--tk-surface-solid); }
.pt-btn-navy { background: var(--tk-navy); color: var(--tk-surface-solid); }
.pt-btn-navy:hover { background: var(--tk-navy-2); color: var(--tk-surface-solid); text-decoration: none; }
.pt-btn-lg { padding: 10px 40px; font-size: 1.15rem; }
.pt-btn-sm { padding: 8px 16px; font-size: 0.92rem; }

/* --- Action row (bottom of form) ------------------------------------------- */
.pt-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
.pt-form-actions .pt-btn-lg { min-width: 170px; }

/* --- Calculation Mode boxes ------------------------------------------------- */
.pt-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap: 18px;
  align-items: stretch;
}
.pt-mode-box {
  border: 1.5px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-md);
  padding: 18px 20px;
  cursor: pointer;
  background: var(--tk-surface-solid);
  display: block;
  margin: 0;
}
.pt-mode-box.selected { border-color: var(--tk-accent); }
.pt-mode-box .pt-mode-title {
  display: flex; align-items: center; gap: 10px;
  color: var(--tk-text-strong); font-weight: 700; font-size: 1.05rem;
  margin-bottom: 6px;
}
/* the label text and its trailing info icon share one line */
.pt-mode-box .pt-field-label { display: inline-flex; align-items: center; gap: 6px; }
.pt-mode-box .pt-field-label .ph { flex-shrink: 0; }
/* centre the radio circle on its label text (the title font is larger than the
   Bootstrap default, which left the circle sitting slightly high) */
.pt-mode-box .pt-mode-title .custom-control { display: inline-flex; align-items: center; min-height: 0; }
.pt-mode-box .pt-mode-title .custom-control-label { line-height: 1.5; }
.pt-mode-box .pt-mode-title .custom-control-label::before,
.pt-mode-box .pt-mode-title .custom-control-label::after { top: 50%; transform: translateY(-50%); }
.pt-mode-box .pt-mode-sub { color: var(--tk-text-muted); font-size: 0.92rem; margin-bottom: 14px; }
.pt-mode-info {
  background: var(--tk-primary-soft);
  border-radius: var(--tk-radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.pt-mode-info i { color: var(--tk-icon-color); }
.pt-mode-info p { color: var(--tk-text-muted); font-size: 0.92rem; margin: 0; }

/* --- Need help floating card ----------------------------------------------- */
.pt-need-help {
  position: fixed;
  /* line the card's left edge up with the logo (the centred layout container) */
  left: max(22px, calc((100% - var(--tk-container-max)) / 2));
  bottom: 52px;
  width: 210px;
  background: var(--tk-text-strong);
  color: var(--tk-surface-solid);
  border-radius: var(--tk-radius-md);
  padding: 16px 16px;
  display: flex;
  align-items: flex-start;   /* keeps the icon on the "Need help?" title line */
  gap: 14px;
  box-shadow: var(--tk-shadow-card);
  z-index: 900;
}
.pt-need-help-icon {
  font-size: 1.6rem;
  color: var(--tk-surface-solid);
  line-height: 1;
  height: 1.5rem;            /* one title line (1rem x 1.5) so the glyph centres on it */
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.pt-need-help-title { font-size: 0.9rem; line-height: 1.5; font-weight: 700; margin: 0 0 6px; }
.pt-need-help-text { font-size: 0.8rem; margin: 0 0 10px; opacity: .84; }
.pt-need-help-link {
  display: inline-flex;      /* centres the trailing arrow on the text */
  align-items: center;
  gap: 6px;
  color: var(--tk-link-on-dark);
  text-decoration: none;
  font-size: 0.8rem;
}
.pt-need-help-link:hover { color: var(--tk-surface-solid); text-decoration: underline; }

/* --- Result area ------------------------------------------------------------- */
.pt-result-area { margin-top: 26px; }
.pt-result-card {
  border: 1px solid var(--tk-success-border);
  background: var(--tk-success-bg);
  border-radius: var(--tk-radius-md);
  padding: 24px;
}
.pt-result-values { display: flex; gap: 50px; flex-wrap: wrap; }
.pt-result-value { min-width: 160px; }
.pt-result-label { color: var(--tk-success-text); font-weight: 600; margin-bottom: 6px; }
.pt-result-number { color: var(--tk-success-text); font-size: 1.9rem; font-weight: 700; }
.pt-result-failure { border-color: var(--tk-danger-border); background: var(--tk-danger-bg); color: var(--tk-danger-text); }
.pt-result-loading { color: var(--tk-text-muted); display: flex; align-items: center; gap: 10px; }
.pt-result-values-divided { gap: 0; }
.pt-result-values-divided .pt-result-value { padding: 0 28px; }
.pt-result-values-divided .pt-result-value:first-child { padding-left: 0; }
.pt-result-values-divided .pt-result-value:last-child { padding-right: 0; }
.pt-result-values-divided .pt-result-value + .pt-result-value { border-left: 1px solid var(--tk-success-border); }

/* Inputs are read-only while a result is displayed (view mode) */
input.pt-input-locked, select.pt-input-locked, textarea.pt-input-locked {
  background: #f8f9fa;
  cursor: not-allowed;
}
/* ... and the parameter actions (Add Shock / Load / Custom YCurve / Reset / Save a Trade)
   cannot be operated either */
.pt-action-locked { pointer-events: none; opacity: .5; }

/* --- Inputs collapsed (when result shown) ------------------------------------- */
.pt-forms-wrap { transition: max-height .25s ease; }
.pt-forms-wrap.pt-forms-collapsed { max-height: 56px; overflow: hidden; }
.pt-forms-collapse-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tk-primary); font-weight: 600;
  margin: 6px 0 14px; cursor: pointer;
  background: none; border: none; padding: 0;
}

/* --- Extended form helpers -------------------------------------------------- */
.pt-field-span2 { grid-column: span 2; }
.pt-custom-curve {
  background: var(--tk-primary-soft);
  color: var(--tk-navy);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: normal;
  min-height: var(--tk-input-height);
  max-width: 100%;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-form .form-group { margin-bottom: 0; }

/* Input parameters (result page) — two-column label/value grid */
.pt-param-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 44px;
}
.pt-param {
  display: grid;
  grid-template-columns: minmax(150px, 46%) 1fr;
  align-items: center;
  gap: 14px;
}
.pt-param-label { color: var(--tk-text-muted); font-weight: 600; font-size: 0.95rem; margin: 0; }
.pt-param-value {
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-sm);
  padding: 9px 12px;
  background: var(--tk-input-bg);
  color: var(--tk-text);
  min-height: var(--tk-input-height);
  display: flex;
  align-items: center;
}
@media (max-width: 1000px) {
  .pt-param-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Bootstrap primitive re-skin (for large MBS sub-templates using .card/.form-control)
   ========================================================================== */
.card { border: 1px solid var(--tk-border); border-radius: var(--tk-radius-md); box-shadow: none;   background: var(--tk-surface-soft); }
.card-header {
  background: transparent; border-bottom: none;
  color: var(--tk-text-strong); font-family: var(--tk-font-header); font-weight: 700; padding: 0 0 14px;
}
.card-body { padding: 18px 4px; }
.form-group label, .form-group .col-form-label { color: var(--tk-text); font-weight: 600; font-size: 0.9rem; }
label { color: var(--tk-text); }
.form-control {
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-sm);
  padding: 6px 8px;
  font-size: 0.95rem;
  color: var(--tk-text-strong);
  background: var(--tk-input-bg);
  height: auto;
  min-height: var(--tk-input-height);
}
.form-control::placeholder { color: var(--tk-placeholder); opacity: 1; }
.form-control:hover { border-color: var(--tk-input-hover-border); }
.form-control:focus { border-color: var(--tk-accent); box-shadow: var(--tk-focus-ring); }
.input-group-text { background: var(--tk-surface-solid); border-color: var(--tk-border-strong); color: var(--tk-text-muted); }
.btn { border-radius: var(--tk-radius-sm); font-weight: 650; padding: 9px 20px; }
.btn-primary { background: var(--tk-btn-primary-gradient); border-color: var(--tk-primary); }
.btn-primary:hover { background: var(--tk-btn-primary-gradient-hover); border-color: var(--tk-primary-hover); }
.btn-outline-primary { color: var(--tk-primary); border-color: var(--tk-btn-outline-border); }
.btn-outline-primary:hover { background: var(--tk-primary-soft); color: var(--tk-primary); border-color: var(--tk-primary); }
.alert { border-radius: var(--tk-radius-sm); }
.alert-dark { background: var(--tk-primary-soft); color: var(--tk-text-strong); border: 1px solid var(--tk-border); font-weight: 600; }
.custom-control-label { color: var(--tk-text); }
.table .text-success { color: var(--tk-success-text) !important; }
.table .text-danger { color: var(--tk-danger-text) !important; }

/* =============================================================================
   Auth pages (Register / Login) — card centred, feature list on the right
   ========================================================================== */
.auth-page main.container-main {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* the form card keeps the middle column, so it stays centred on the page while
   the feature list sits immediately to its right */
.pt-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 583px minmax(0, 1fr);
  align-items: start;
  column-gap: 64px;
  width: 100%;
  margin: 40px 0;
}

/* --- card --------------------------------------------------------------- */
.pt-auth-card {
  grid-column: 2;   /* keeps the form centred; column 1 stays empty */
  width: 583px;
  max-width: 100%;
  background: var(--tk-surface-solid);
  border-radius: var(--tk-auth-radius);
  box-shadow: var(--tk-shadow-card);
  padding: 30px 48px 24px;
}
.pt-auth-title {
  font-family: var(--tk-font-header);
  color: var(--tk-navy);
  font-size: 1.8rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.pt-auth-sub { color: var(--tk-text-muted); font-size: 1rem; margin: 0 0 16px; }

/* --- fields ------------------------------------------------------------- */
.pt-auth-field { margin-bottom: 10px; }
.pt-auth-label {
  display: block;
  color: var(--tk-text-strong);
  font-size: 0.95rem;
  font-weight: 650;
  margin-bottom: 4px;
}
.pt-auth-input { position: relative; }
.pt-auth-input > .ph {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tk-text-muted);
  font-size: 1.15rem;
  pointer-events: none;
}
.pt-auth-input > .form-control { padding-left: 46px; padding-right: 44px; }
.pt-auth-input > .form-control:not([type="password"]) { padding-right: 14px; }
.pt-auth-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 4px 8px;
  color: var(--tk-text-muted);
  cursor: pointer;
  line-height: 1;
}
.pt-auth-eye:hover { color: var(--tk-primary); }
.pt-auth-hint { color: var(--tk-text-muted); font-size: 0.82rem; margin: 5px 0 0; }
.pt-auth-field .pt-field-error { display: block; }

/* --- submit + alternatives --------------------------------------------- */
.pt-auth-submit { width: 100%; height: 46px; font-size: 1.05rem; margin-top: 2px; }
.pt-auth-or {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 14px 0 12px;
  color: var(--tk-text-muted);
  font-size: 0.95rem;
}
.pt-auth-or::before,
.pt-auth-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--tk-border); }
.pt-auth-alt { text-align: center; color: var(--tk-text-muted); font-size: 0.95rem; margin: 0; }
.pt-auth-alt a { color: var(--tk-primary); font-weight: 600; text-decoration: none; }
.pt-auth-alt a:hover { text-decoration: underline; }

/* --- feature list ------------------------------------------------------- */
.pt-auth__aside { grid-column: 3; justify-self: start; max-width: 300px; min-width: 0; display: flex; flex-direction: column; gap: 40px; margin-top: 60px; }
.pt-auth-feature { display: flex; align-items: flex-start; gap: 18px; }
.pt-auth-feature__icon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--tk-surface-solid);
  color: var(--tk-primary);
  box-shadow: var(--tk-shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.pt-auth-feature__title {
  font-family: var(--tk-font-header);
  color: var(--tk-text-strong);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 2px 0 4px;
}
.pt-auth-feature__text { color: var(--tk-text-muted); font-size: 0.95rem; line-height: 1.45; margin: 0; }

/* --- login variant: single centred card + a note bar underneath ---------- */
.auth-page--login main.container-main { justify-content: center; }
.pt-auth--login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 583px;
  margin: 40px auto;
}
.pt-auth--login .pt-auth-card { padding: 46px 48px 42px; }
.pt-auth--login .pt-auth-title { font-size: 2.1rem; text-align: center; margin-bottom: 8px; }
.pt-auth--login .pt-auth-sub { text-align: center; margin-bottom: 36px; }
.pt-auth--login .pt-auth-field { margin-bottom: 22px; }
.pt-auth--login .pt-auth-label { margin-bottom: 8px; }
.pt-auth--login .pt-auth-hint { margin-top: 8px; }
.pt-auth--login .pt-auth-or { margin: 34px 0 26px; }
.pt-auth-row { display: flex; align-items: center; justify-content: flex-end; margin: 2px 0 26px; }
.pt-auth-forgot { color: var(--tk-primary); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.pt-auth-forgot:hover { text-decoration: underline; }
.pt-auth-alt-btn { width: 100%; height: 46px; }
.pt-auth-note {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--tk-surface-solid);
  border-radius: var(--tk-radius-md);
  box-shadow: var(--tk-shadow-soft);
  color: var(--tk-text);
  font-size: 1rem;
  padding: 16px 28px;
  margin: 0;
}
.pt-auth-note > .ph { color: var(--tk-text-strong); font-size: 1.3rem; flex-shrink: 0; }

/* --- brand tagline (bottom-left of the viewport) ------------------------ */
.pt-auth-tagline {
  position: fixed;
  left: 36px;
  bottom: 92px;
  color: var(--tk-surface-solid);
  font-size: 1.05rem;
  line-height: 1.45;
  pointer-events: none;
}
.pt-auth-tagline__rule {
  display: block;
  width: 66px;
  height: 3px;
  background: var(--tk-gold);
  margin-bottom: 18px;
}
/* the support widget would sit on top of the brand tagline */
.auth-page .pt-need-help { display: none; }

@media (max-width: 1200px) {
  .pt-auth { grid-template-columns: minmax(0, 1fr) 520px minmax(0, 1fr); column-gap: 36px; }
  .pt-auth-card { width: 520px; padding: 36px 36px 32px; }
  .pt-auth__aside { gap: 30px; }
}
@media (max-width: 992px) {
  .pt-auth { display: flex; flex-direction: column; align-items: stretch; }
  .pt-auth-card { width: auto; }
  .pt-auth-tagline { display: none; }
}

/* --- Modal loading feedback ------------------------------------------------ */
/* A modal opened before its fragment loads shows a centered spinner; any htmx
   request whose target is a .modal-body shows a translucent overlay + spinner
   (used by in-modal pagination / sort / search). */
.modal-body { position: relative; }
.pt-modal-loading { display: flex; align-items: center; justify-content: center; min-height: 160px; }
.modal-body.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 3;
}
.modal-body.is-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 0.25rem solid var(--tk-primary-soft);
  border-top-color: var(--tk-accent);
  border-radius: 50%;
  animation: pt-spin 0.6s linear infinite;
  z-index: 4;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }