/* Component catalog: source markup is always in the HTML pages. */
.components-menu-row { position: relative; }
.components-menu-row>.nav-link { padding-right: 32px; }
#components-toggle { display: none; position: absolute; right: 8px; top: 9px; width: 27px; height: 27px; border-radius: 50%; color: var(--nav-text); }
#components-toggle svg { width: 12px; height: 12px; }
#components-toggle:hover { background: var(--accent-soft); }
.sidebar-expanded #components-toggle { display: grid; place-items: center; }
.components-group .submenu { display: none; }
.sidebar-expanded .components-group:has(#components-toggle[aria-expanded=true]) .submenu { display: grid; gap: 3px; }
.components-group:has(.submenu a.selected) .components-menu-row>.nav-link { background: var(--accent-soft); color: var(--accent-soft-text); }
body:not(.sidebar-expanded) .components-menu-row>.nav-link { padding-right: 12px; }
.demo-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--accent-soft); border-radius: 18px; padding: 28px; margin-bottom: 24px; }
.demo-intro h2 { font-size: 25px; letter-spacing: -.7px; margin-bottom: 10px; }
.demo-intro p:last-child { font-size: 12px; color: var(--muted); max-width: 600px; line-height: 1.8; }
.demo-intro-mark { color: var(--accent-deep); font-size: 64px; }
.demo-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-bottom: 24px; }
.catalog-card { display: flex; flex-direction: column; align-items: flex-start; transition: border-color .15s,transform .15s; }
.catalog-card:hover { border-color: var(--accent-mid); transform: translateY(-2px); }
.catalog-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 11px; color: var(--accent-soft-text); background: var(--accent-soft); margin-bottom: 20px; }
.catalog-card h2 { font-size: 15px; }
.catalog-card p { font-size: 11px; line-height: 1.8; margin: 10px 0 20px; color: var(--muted); }
.catalog-link { margin-top: auto; font-size: 10px; color: var(--accent-deep); }
.demo-card { margin-bottom: 23px; }
.demo-description { font-size: 11px; color: var(--muted); line-height: 1.9; margin: -4px 0 22px; max-width: 780px; }
.demo-card h3 { font-size: 14px; }
.demo-card .panel-heading { margin-bottom: 18px; }
.demo-grid { display: grid; gap: 22px; min-width: 0; }
.demo-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.demo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.demo-toolbar { justify-content: space-between; margin: 0 0 20px; }
.demo-feature-card { color: var(--accent-soft-text); background: var(--accent-soft); }
.demo-feature-card .eyebrow { color: inherit; opacity: .7; }
.demo-badge { display: inline-block; border-radius: 9999px; padding: 5px 9px; font-size: 9px; background: var(--accent-soft); color: var(--accent-soft-text); }
.demo-badge.warning { background: #fff1ce; color: #795006; }
.demo-badge.danger { background: #ffe5ed; color: #9a2146; }
.demo-badge.neutral { background: var(--soft); color: var(--soft-text); }
.dark .demo-badge.warning { background: #51401d; color: #f8d58a; }
.dark .demo-badge.danger { background: #512b37; color: #ffbdcc; }
.btn.demo-danger { border: 1px solid var(--danger); color: var(--danger); background: transparent; }
.btn:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.demo-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; gap: 10px; margin-bottom: 12px; }
.demo-progress { width: 100%; height: 8px; border: 0; border-radius: 9999px; overflow: hidden; background: var(--soft); accent-color: var(--accent); }
.demo-progress::-webkit-progress-bar { background: var(--soft); }
.demo-progress::-webkit-progress-value { background: var(--accent); border-radius: 9999px; }
.demo-progress::-moz-progress-bar { background: var(--accent); }
.code-example { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 13px; min-width: 0; }
.code-example summary { cursor: pointer; color: var(--muted); font-size: 10px; padding: 5px 0; }
.code-example[open] summary { color: var(--ink); }
.copy-code { margin-top: 12px; font-size: 9px; }
.code-example pre { max-height: 300px; max-width: 100%; overflow: auto; padding: 18px; margin: 12px 0 0; background: var(--soft); color: var(--soft-text); border-radius: 10px; font-size: 10px; line-height: 1.9; tab-size: 2; }
.demo-steps { counter-reset: steps; list-style: decimal; padding-left: 20px; font-size: 12px; color: var(--ink); line-height: 2.5; margin-bottom: 15px; }
.demo-form { display: grid; gap: 22px; }
.demo-form label:not(.choice), .demo-label-block { display: grid; gap: 10px; font-size: 11px; color: var(--ink); min-width: 0; }
.demo-input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 12px 13px; color: var(--ink); background: var(--surface); font: inherit; font-size: 12px; }
.demo-input::placeholder { color: var(--muted); }
textarea.demo-input { resize: vertical; min-height: 90px; }
.demo-input:disabled { opacity: .6; background: var(--soft); }
.demo-fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 15px; display: flex; gap: 20px; flex-wrap: wrap; }
.demo-fieldset legend { font-size: 10px; padding: 0 7px; color: var(--muted); }
.choice { display: flex; align-items: center; gap: 9px; font-size: 11px; line-height: 1.8; }
.choice input { flex-shrink: 0; accent-color: var(--accent-deep); width: 16px; height: 16px; }
input[role=switch] { width: 32px; }
input[type=range] { accent-color: var(--accent-deep); width: 100%; }
.password-control { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.password-control .btn { font-size: 9px; flex-shrink: 0; }
.demo-alert { padding: 15px 17px; font-size: 11px; line-height: 1.8; border: 1px solid var(--line); border-radius: 10px; color: var(--soft-text); background: var(--soft); margin-bottom: 14px; }
.demo-alert.success { border-left: 3px solid var(--success); }
.demo-alert.warning { border-left: 3px solid #d3a739; }
.demo-alert.danger { border-left: 3px solid var(--danger); }
.demo-form .demo-alert { margin-bottom: 0; }
.demo-dialog h2 { font-size: 24px; }
.demo-tabs { display: flex; gap: 5px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.demo-tabs button { border-radius: 8px 8px 0 0; padding: 12px 18px; font-size: 11px; color: var(--muted); }
.demo-tabs button[aria-selected=true] { background: var(--accent-soft); color: var(--accent-soft-text); border-bottom: 2px solid var(--accent-mid); }
.demo-tab-panel { padding: 23px 0; }
.demo-tab-panel h3 { margin-bottom: 8px; }
.demo-accordion { border: 1px solid var(--line); border-radius: 10px; padding: 15px; margin-top: 12px; font-size: 11px; }
.demo-accordion summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.demo-accordion p { color: var(--muted); line-height: 1.8; margin-top: 15px; }
.demo-summary { border-radius: 11px; padding: 20px; background: var(--soft); display: grid; gap: 10px; align-content: center; }
.demo-summary>span { color: var(--muted); font-size: 10px; }
.demo-summary output { color: var(--ink); font-size: 16px; font-weight: 500; }
.demo-inline-output { display: block; font-size: 11px; color: var(--muted); margin-top: 20px; }
.library-note { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border: 1px dashed var(--line); border-radius: 12px; padding: 16px; margin: 5px 0 22px; font-size: 10px; color: var(--muted); }
.library-note strong { color: var(--ink); }
.library-note a { margin-left: auto; color: var(--accent-deep); }
.demo-list { list-style: disc; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 2; }
.demo-timeline { list-style: none; padding: 0 0 0 12px; margin: 24px 0; }
.demo-timeline>li { position: relative; padding: 0 0 23px 25px; border-left: 1px solid var(--line); }
.demo-timeline>li:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -5px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); outline: 1px solid var(--accent-mid); }
.timeline-card { background: var(--soft); border-radius: 12px; padding: 18px; }
.timeline-card .demo-row { justify-content: space-between; gap: 8px; }
.timeline-card h3 { font-size: 12px; }
.timeline-card time { font-size: 9px; color: var(--muted); }
.timeline-card p { font-size: 11px; line-height: 1.8; color: var(--muted); margin: 10px 0; }
.demo-history-filters { width: fit-content; flex-wrap: wrap; }
.canvas-container { position: relative; height: 310px; width: 100%; min-width: 0; }
.canvas-container.compact { max-width: 500px; margin: auto; height: 300px; }
.canvas-container canvas { max-width: 100%; }

/* Local library skins inherit the same theme tokens as the dashboard. */
.datatable-wrapper { font-size: 11px; min-width: 0; }
.datatable-top, .datatable-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 0; }
.datatable-dropdown, .datatable-search { min-width: 0; }
.datatable-input, .datatable-selector { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; padding: 9px 11px; max-width: 100%; }
.datatable-container { border-color: var(--line); overflow-x: auto; max-width: 100%; }
.datatable-table th { color: var(--muted); padding: 13px 10px; border-bottom: 1px solid var(--line); }
.datatable-table td { color: var(--ink); padding: 15px 10px; border-color: var(--line); }
.datatable-pagination-list { display: flex; flex-wrap: wrap; gap: 4px; }
.datatable-pagination-list-item a, .datatable-pagination-list-item button { border-radius: 7px; color: var(--muted); background: transparent; padding: 7px 10px; }
.datatable-pagination-list-item.datatable-active button, .datatable-pagination-list-item.datatable-active a { background: var(--accent); color: var(--accent-text); }
.datatable-pagination-list-item a:hover, .datatable-pagination-list-item button:hover { background: var(--accent-soft); color: var(--accent-soft-text); }
.datatable-sorter { color: var(--ink); }
.datatable-info { color: var(--muted); }
.flatpickr-calendar { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px #10251a22; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-weekdays, span.flatpickr-weekday { background: var(--surface); color: var(--ink); }
.flatpickr-current-month input.cur-year, .flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--ink); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--ink); fill: var(--ink); }
.flatpickr-day { color: var(--ink); }
.flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.inRange { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-soft-text); box-shadow: none; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: var(--muted); }
.flatpickr-time, .flatpickr-time input:hover, .flatpickr-time input:focus, .numInputWrapper:hover { background: var(--soft); }
.fc { --fc-border-color: var(--line); --fc-page-bg-color: var(--panel); --fc-neutral-bg-color: var(--soft); --fc-list-event-hover-bg-color: var(--soft); --fc-today-bg-color: var(--accent-soft); font-size: 11px; color: var(--ink); }
.fc .fc-toolbar { flex-wrap: wrap; gap: 12px; }
.fc .fc-toolbar-title { font-size: 19px; letter-spacing: -.4px; }
.fc .fc-button-primary { background: var(--soft); color: var(--soft-text); border-color: var(--line); font-size: 10px; padding: 8px 10px; }
.fc .fc-button-primary:hover, .fc .fc-button-primary:focus { background: var(--accent-soft); color: var(--accent-soft-text); border-color: var(--accent-mid); }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number, .fc .fc-list-day-cushion { color: var(--ink); }
.fc .fc-daygrid-day-number { font-size: 11px; padding: 8px; }
.fc .fc-daygrid-event { white-space: normal; }
.fc .fc-event-title { font-size: 10px; }
.fc .fc-list-event-title a { color: var(--ink); }
.fc .fc-list-table td { color: var(--ink); }
.dropzone.demo-dropzone { background: var(--soft); border: 1px dashed var(--accent-mid); border-radius: 14px; min-height: 240px; padding: 20px; color: var(--ink); }
.demo-dropzone .dz-message { margin: 20px 0; }
.demo-dropzone .dz-message h3 { font-size: 17px; margin: 14px 0 8px; }
.demo-dropzone .dz-message p { font-size: 10px; color: var(--muted); line-height: 1.8; max-width: 400px; margin: 0 auto 18px; }
.upload-symbol { font-size: 29px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-soft-text); width: 50px; height: 50px; margin: auto; border-radius: 15px; }
.upload-picker { position: relative; cursor: pointer; }
.upload-picker input { width: 1px; height: 1px; position: absolute; opacity: 0; }
.upload-picker:focus-within { outline: 2px solid var(--accent-mid); outline-offset: 3px; }
.dropzone .dz-preview { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px; min-width: 150px; max-width: calc(100% - 20px); }
.dropzone .dz-preview .dz-image { border-radius: 9px; width: 100%; min-width: 120px; height: 90px; background: var(--soft); }
.dropzone .dz-preview .dz-image img { max-height: 90px; object-fit: cover; margin: auto; }
.dropzone .dz-preview .dz-details { position: static; opacity: 1; padding: 10px 0; color: var(--ink); line-height: 1.7; min-width: 0; }
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { background: var(--soft); color: var(--ink); }
.dropzone .dz-preview .dz-details .dz-filename { white-space: normal; overflow-wrap: anywhere; }
.dropzone .dz-preview.dz-error .dz-error-message { display: block; opacity: 1; position: static; width: auto; background: transparent; color: var(--danger); padding: 5px 0; font-size: 10px; }
.dropzone .dz-preview .dz-error-message::after { display: none; }
.dropzone .dz-preview .btn { width: 100%; font-size: 9px; margin-top: 6px; }
@media(max-width:1050px) { .demo-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { #sidebar #components-toggle { display: grid; place-items: center; } #sidebar .components-menu-row>.nav-link { padding-right: 32px; } #sidebar .components-group:has(#components-toggle[aria-expanded=true]) .submenu { display: grid; gap: 3px; } }
@media(max-width:640px) {
  .demo-catalog, .demo-grid.two { grid-template-columns: minmax(0,1fr); }
  .demo-intro { padding: 22px; gap: 12px; }
  .demo-intro h2 { font-size: 22px; }
  .demo-intro-mark { display: none; }
  .demo-card .panel-heading>.tag { font-size: 7px; }
  .demo-form { gap: 18px; }
  .demo-row .btn { max-width: 100%; }
  .demo-tabs button { padding: 11px 13px; }
  .library-note a { margin-left: 0; }
  .demo-toolbar { align-items: flex-start; }
  .demo-toolbar .demo-label-block { width: 100%; }
  .datatable-top, .datatable-bottom { flex-direction: column; align-items: flex-start; }
  .datatable-search, .datatable-input { width: 100%; }
  .datatable-container table { min-width: 560px; }
  .datatable-container table, .fc table { display: table; white-space: normal; }
  .datatable-container thead, .fc thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .datatable-container tbody, .fc tbody { display: table-row-group; }
  .datatable-container tbody tr, .fc tbody tr { display: table-row; padding: 0; border: 0; }
  .datatable-container tbody td, .datatable-container tbody td:first-child { display: table-cell; padding: 12px 10px; border: 0; border-bottom: 1px solid var(--line); }
  .fc tbody td, .fc tbody td:first-child { display: table-cell; padding: 0; border: 1px solid var(--line); }
  .datatable-container td::before, .fc td::before { display: none; }
  .fc .fc-toolbar { align-items: flex-start; }
  .fc .fc-toolbar-title { font-size: 17px; }
  .fc .fc-button-primary { font-size: 9px; padding: 7px 9px; }
  .fc .fc-list-event-time { padding: 9px!important; }
  .fc .fc-list-event-title { padding: 9px!important; overflow-wrap: anywhere; }
  .canvas-container { height: 270px; }
  .dropzone.demo-dropzone { padding: 12px; }
  .dropzone .dz-preview { margin: 8px 0; max-width: 100%; width: 100%; }
}
.datatable-top::after, .datatable-bottom::after { display: none; }
/* Restoring the sidebar must not be counteracted by browser scroll anchoring. */
#sidebar, #sidebar nav { overflow-anchor: none; scroll-behavior: auto; }