/* Tabler handles component styles, sidebar offsets and responsive breakpoints. */
.page-wrapper, .min-w-0 { min-width: 0; }
#portal-header .nav-item > button { border: 0; background: transparent; }
#portal-header .page-title { font-size: 1.125rem; }
#portal-header .breadcrumb { font-size: .75rem; }
@media (max-width: 991.98px) {
  #portal-sidebar { --tblr-offcanvas-width: 18rem; }
  #portal-sidebar > .container-fluid { align-items: flex-start; }
  #portal-sidebar .navbar-collapse { flex-grow: 0; }
  #portal-header .container-xl { flex-wrap: nowrap; }
}

/* Settings shares the existing sidebar drawer and fold behaviour. */
#portal-sidebar .settings-submenu { padding-left: 1rem; }
#portal-sidebar .settings-submenu .nav-link-title { white-space: normal; }
#portal-sidebar .settings-submenu.collapse:not(.show) { display: none; }
@media (min-width: 992px) {
  [data-bs-sidebar="folded"] #portal-sidebar .settings-submenu { display: none; }
}

/* Rendered correspondence keeps line breaks and wraps safely on narrow screens. */
.email-body-preview { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius); }

/* Shared workspace tokens extend the locally vendored Tabler components. */
:root {
  --ymk-content-gap: 1.5rem;
  --ymk-form-width: 48rem;
  --tblr-body-bg: #f5f7fb;
}
#portal-sidebar { border-right: 1px solid var(--tblr-border-color); }
#portal-sidebar .navbar-brand { padding-block: 1.25rem; }
#portal-sidebar .nav-link { border-radius: .5rem; margin: .125rem .5rem; min-height: 2.75rem; }
#portal-sidebar .nav-item.active > .nav-link { background: var(--tblr-primary-lt); color: var(--tblr-primary); font-weight: 600; }
#portal-sidebar .settings-submenu { padding-left: .75rem; }
#portal-sidebar .settings-submenu .nav-link { font-size: .875rem; }
#portal-sidebar button.nav-link[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-chevron { transition: transform .15s ease; }
#portal-header { background: var(--tblr-bg-surface); }
#portal-header .page-title { line-height: 1.4; }
#content { padding-bottom: 1rem; }
#content .table td.text-end { font-variant-numeric: tabular-nums; }
.ymk-form { max-width: var(--ymk-form-width); }
.skip-link:focus { position: fixed; inset: .5rem auto auto .5rem; z-index: 1100; background: white; padding: .75rem 1rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--tblr-primary); outline-offset: 3px;
}
@media (min-width: 992px) {
  #portal-sidebar { overflow-y: auto; max-height: 100vh; }
  [data-bs-sidebar="folded"] #portal-sidebar .nav-link { justify-content: center; }
}
@media (max-width: 991.98px) {
  #portal-header .page-title { font-size: 1rem; }
  #portal-header .breadcrumb { overflow-wrap: anywhere; }
  #portal-header .container-xl { gap: .75rem !important; }
  #portal-sidebar .navbar-nav { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nav-chevron { transition: none; } }
/* Business labels remain readable without widening the sidebar. */
#portal-sidebar .nav-link-title { white-space: normal; overflow: visible; text-overflow: clip; }
#portal-sidebar .nav-link-icon { flex-shrink: 0; }
#portal-sidebar .nav-chevron { flex-shrink: 0; }
.ymk-filter-field { flex: 1 1 10rem; max-width: 20rem; }
.ymk-filters { padding: 1rem; background: var(--tblr-bg-surface); border-radius: .5rem; }
.ymk-filters .form-label { font-size: .8125rem; margin-bottom: .25rem; }
.ymk-filters summary { cursor: pointer; padding-block: .5rem; }
.ymk-filters .badge { font-weight: 500; }
[data-field="business_permissions"] > div { display: grid; gap: .5rem; max-height: 24rem; overflow: auto; padding: .75rem; }
[data-field="business_permissions"] label { display: flex; gap: .5rem; }
[data-field="business_permissions"] input { flex-shrink: 0; }
@media (max-width: 575.98px) { .ymk-filter-field { max-width: none; } .ymk-filters > .d-flex { align-items: stretch !important; } }
.ymk-timeline { display: flex; flex-wrap: wrap; gap: .75rem; padding: 1rem; background: var(--tblr-bg-surface); border-radius: .5rem; }
.ymk-timeline span { font-size: .875rem; color: var(--tblr-secondary); }
.ymk-workflow-step { padding-block: 1rem; }

/* Shared task surfaces and long business references remain usable at 360px. */
#portal-header .page-title, #content .card-title, #content dd { overflow-wrap: anywhere; }
#content .page-header:empty { display: none; }
#content .table th { white-space: nowrap; }
#content .btn-list { flex-wrap: wrap; }
#content .ymk-filters .badge { white-space: normal; text-align: left; }
#content .ymk-permissions { display: grid; gap: .5rem; max-height: 24rem; overflow: auto; padding: .75rem; }
@media (max-width: 575.98px) {
  #content .btn { min-height: 2.75rem; }
  #content .table-responsive .btn { min-height: 2.5rem; }
  #content .card-body { overflow-wrap: anywhere; }
}
.ymk-confirmation { width: min(32rem, calc(100% - 2rem)); border: 0; border-radius: .75rem; padding: 1.5rem; box-shadow: var(--tblr-box-shadow-dropdown); }
.ymk-confirmation::backdrop { background: rgba(24, 36, 51, .4); }
/* Dark semantic text preserves readable contrast on Tabler's pale status surfaces. */
#content .bg-success-lt, #content .alert-success { color: #176b2c !important; }
#content .bg-warning-lt, #content .alert-warning { color: #795200 !important; }
#content .bg-danger-lt, #content .alert-danger { color: #9e2222 !important; }
#content .bg-azure-lt, #content .alert-info { color: #135b8a !important; }

/* Accessible feedback shared by portal and account screens. */
.ymk-feedback { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 8px; box-shadow: none; line-height: 1.5; }
.ymk-feedback > .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.ymk-feedback-body { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.ymk-feedback .btn-close { position: static; flex-shrink: 0; margin-left: auto; }
.ymk-error-summary ul { margin-top: 8px; margin-bottom: 0; padding-left: 20px; }
.ymk-error-summary a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ymk-error-summary:focus { outline: 2px solid currentColor; outline-offset: 3px; }
.ymk-confirmation { line-height: 1.6; }
.ymk-confirmation p { overflow-wrap: anywhere; }
.ymk-confirmation .btn { min-height: 44px; white-space: normal; }
.ymk-error-summary ul:empty { display: none; }