/* Loaded after legacy responsive rules by both shells. */
/* Keep hierarchy picker actions outside the scrolling list at desktop zoom. */
/* Asset preview owns its scroll; do not reserve a page scrollbar behind it. */
html:has(.ft-asset-preview.show), body:has(.ft-asset-preview.show) { overflow: hidden !important; scrollbar-gutter: auto; }
.modal.ft-asset-preview { overflow: hidden !important; }
.ft-asset-preview .modal-dialog { margin-top: 16px; margin-bottom: 16px; }
.ft-asset-preview .modal-content { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; scrollbar-width: thin; }
.ft-location-picker .modal-dialog { margin: 16px auto; width: calc(100% - 24px); }
.ft-location-picker .modal-content { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ft-location-picker .modal-header,
.ft-location-picker .modal-footer,
.ft-location-picker-search { flex: 0 0 auto; padding: 12px 16px; }
.ft-location-picker .modal-title { margin: 0; font-size: 22px; }
.ft-location-picker .modal-header .close { margin-left: auto; }
.ft-location-picker-search label { display: block; font-size: 13px; margin-bottom: 5px; }
.ft-location-picker .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 12px 12px; scrollbar-width: thin; }
.ft-location-picker .modal-footer { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid #dee2e6; background: white; }
.ft-location-selection { flex: 0 0 100%; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-location-save-error { flex: 0 0 100%; font-size: 13px; }
.ft-location-option { display: flex; align-items: center; border: 1px solid #e0e5eb; border-radius: 5px; margin: 5px 0; padding: 4px 8px; }
.ft-location-option.is-selected { background: #e6f6f8; border-color: #159caf; }
.ft-location-toggle { flex: 0 0 28px; width: 28px; padding: 6px 0; border: 0; background: transparent; color: #137d8e; }
.ft-location-choice { display: flex; flex: 1; gap: 8px; min-width: 0; align-items: center; text-align: left; border: 0; background: transparent; color: #24364b; padding: 8px 4px; }
.ft-location-choice > span { min-width: 0; overflow-wrap: anywhere; }
.ft-location-choice small { display: block; color: #526477; margin-top: 3px; }
.ft-location-choice > i { flex: 0 0 16px; color: #138b9c; }
.ft-location-choice:focus-visible, .ft-location-toggle:focus-visible { outline: 2px solid #138b9c; outline-offset: -2px; }
/* Desktop navigation: animate only the expanding rail and label opacity. */
.ft-viewport-shell .subnavbar ul.mainnav {
    transition: width .22s ease, padding-left .22s ease;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    overflow-y: auto;
    box-sizing: border-box;
}
.ft-viewport-shell .subnavbar ul.mainnav:not(.mainnav--close) { width: 200px; padding-right: 12px; }
.ft-viewport-shell .subnavbar ul.mainnav:not(.mainnav--close) > li > a { padding-left: 10px; padding-right: 4px; }
.ft-viewport-shell .subnavbar ul.mainnav:not(.mainnav--close) > li > a > .spn-upper { padding-right: 0; }
.ft-viewport-shell .subnavbar ul.mainnav > li { width: 100%; min-width: 0; margin-right: 0; }
.ft-viewport-shell .subnavbar ul.mainnav > li > a {
    display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
    box-sizing: border-box; border-radius: 5px;
}
.ft-viewport-shell .subnavbar ul.mainnav > li > a > i { flex: 0 0 24px; text-align: center; }
.ft-viewport-shell .subnavbar ul.mainnav > li > a > .spn-upper { min-width: 0; white-space: normal; }
.ft-viewport-shell .subnavbar ul.mainnav > li > a:hover,
.ft-viewport-shell .subnavbar ul.mainnav > li > a:focus-visible { background: rgba(255,255,255,.18); color: white !important; }
.ft-viewport-shell .subnavbar ul.mainnav .spn-upper:hover { background: transparent; color: inherit; }
.ft-viewport-shell .subnavbar ul.mainnav.mainnav--close > li > a > .spn-upper { position: absolute; }
.ft-viewport-shell .subnavbar ul.mainnav > li > a:focus-visible { outline: 2px solid white; outline-offset: -2px; }
.ft-viewport-shell .subnavbar ul.mainnav:hover,
.ft-viewport-shell .subnavbar ul.mainnav:focus-within { scrollbar-color: rgba(255,255,255,.55) transparent; }
.ft-viewport-shell .subnavbar ul.mainnav::-webkit-scrollbar { display: block; width: 6px; }
.ft-viewport-shell .subnavbar ul.mainnav::-webkit-scrollbar-track { background: transparent; }
.ft-viewport-shell .subnavbar ul.mainnav::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.ft-viewport-shell .subnavbar ul.mainnav:hover::-webkit-scrollbar-thumb,
.ft-viewport-shell .subnavbar ul.mainnav:focus-within::-webkit-scrollbar-thumb { background: rgba(255,255,255,.55); }
.ft-viewport-shell .subnavbar .mainnav .spn-upper {
    display: inline; opacity: 1; visibility: visible;
    transition: opacity .16s ease;
}
.ft-viewport-shell .subnavbar .mainnav--close .spn-upper {
    display: inline; opacity: 0; visibility: hidden; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .ft-viewport-shell .subnavbar ul.mainnav,
    .ft-viewport-shell .subnavbar .mainnav .spn-upper { transition: none; }
}
.ft-viewport-shell .ft-filter-toolbar,
.ft-viewport-shell .al-directory .al-toolbar {
    display: flex; flex-wrap: nowrap; align-items: center;
    gap: 8px; max-width: 100%; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
}
.ft-viewport-shell .ft-filter-toolbar > .ft-filter-controls,
.ft-viewport-shell .ft-filter-toolbar > .filter-stat,
.ft-viewport-shell .al-toolbar-filters {
    display: flex; flex-wrap: nowrap; flex: 1 0 auto;
    width: auto; gap: 6px;
}
.ft-viewport-shell .ft-filter-toolbar .ft-filter-actions,
.ft-viewport-shell .al-toolbar-actions { flex: 0 0 auto; margin-left: auto; width: auto; }
.ft-viewport-shell .ft-filter-toolbar .ft-filter-actions > .row,
.ft-viewport-shell .ft-filter-toolbar .filter-stat-opt { flex-wrap: nowrap; }
.ft-viewport-shell .ft-filter-toolbar .btn,
.ft-viewport-shell .al-toolbar .btn { white-space: nowrap; }
.ft-viewport-shell .ft-filter-toolbar input:is([type="search"], [type="text"]):not(.dropdown-menu *) {
    flex: 0 1 180px; width: 180px !important; min-width: 100px;
}
.ft-viewport-shell .ft-filter-toolbar [custom-select]:not(.modal *) {
    flex: 0 0 130px; width: 130px !important; min-width: 100px;
}
.ft-viewport-shell .al-directory .al-search { flex: 0 1 220px; min-width: 160px; }
.ft-viewport-shell .work-list-filter-row .work-list-filter-status > .filter-stat-opt {
    flex: 0 0 auto; margin-left: auto; overflow: visible;
}
.ft-viewport-shell .work-list-filter-row .work-list-create-action { flex: 0 0 auto; }
/* Fixed descendants escape the toolbar's overflow clip, without moving Angular DOM. */
.ft-viewport-shell .ft-filter-toolbar [data-tooltip]::before {
    display: none; /* The shared tooltip directive supplies the visible tooltip. */
}
.ft-viewport-shell .cs-custom-select > .dropdown-toggle {
    display: flex; align-items: center; gap: 8px; min-width: 0;
}
.ft-viewport-shell .cs-custom-select > .dropdown-toggle > span {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-right: 0;
}
.ft-viewport-shell .cs-custom-select .dropdown-menu {
    border: 1px solid #d5d9df; border-radius: 8px; padding: 6px;
    box-shadow: 0 6px 18px rgba(35,55,75,.14);
}
.ft-viewport-shell .cs-custom-select-search input {
    box-sizing: border-box; width: 100% !important; min-width: 0;
    height: 36px; padding: 8px 10px; border: 1px solid #d5d9df; border-radius: 6px;
}
.ft-viewport-shell .cs-custom-select .dropdown-menu ul { padding: 0; margin: 6px 0 0; max-height: 240px; overflow-y: auto; }
.ft-viewport-shell .cs-custom-select .dropdown-menu li > a {
    display: block; padding: 8px 10px; font-size: 13px; line-height: 1.4;
    white-space: normal; overflow-wrap: anywhere; border-radius: 4px;
}
.ft-viewport-shell .cs-custom-select > .dropdown-menu > ul > li > a:hover,
.ft-viewport-shell .cs-custom-select > .dropdown-menu > ul > li > a:focus {
    background: #e9f6f8; color: #24364b;
}
.ft-viewport-shell .cs-custom-select > .dropdown-menu > ul > li > a:hover .text-muted,
.ft-viewport-shell .cs-custom-select > .dropdown-menu > ul > li > a:focus .text-muted {
    color: #526477 !important;
}
.ft-viewport-shell .ft-detail-selector { min-width: 0; margin-bottom: 14px; }
.ft-viewport-shell .ft-detail-selector > [class*="col-md-"],
.ft-viewport-shell .ft-detail-selector .dyn-string > [class*="col-md-"] {
    flex: 0 0 100%; max-width: 100%; min-width: 0;
}
.ft-viewport-shell .ft-detail-selector > :first-child { margin-bottom: 6px; }
.ft-viewport-shell .ft-detail-selector .input-group { display: flex; flex-wrap: nowrap; width: 100%; }
.ft-viewport-shell .ft-detail-selector .input-group input { min-width: 0; flex: 1 1 0; width: 100%; }
.ft-viewport-shell .ft-detail-selector .dyn-string { white-space: normal; overflow-wrap: anywhere; }
.ft-viewport-shell .ft-detail-selector .dropdown-menu {
    padding: 6px; border: 1px solid #d5dce5; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(35,55,75,.16); overflow-x: hidden !important;
}
.ft-viewport-shell .ft-detail-selector .dropdown-item {
    white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4;
    padding: 8px 10px !important;
}
.ft-viewport-shell .ft-detail-selector [data-tooltip]::before { display: none; }
.ft-viewport-shell .ft-toolbar-popup {
    position: fixed !important; z-index: 1080 !important;
    left: var(--ft-popup-left) !important; top: var(--ft-popup-top) !important;
    right: auto !important; bottom: auto !important;
    width: var(--ft-popup-width) !important; min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: var(--ft-popup-height) !important;
    overflow-y: auto; transform: none !important; margin: 0 !important;
}

/* Share available width between controls instead of keeping their intrinsic widths.
   Breakpoints use CSS viewport pixels, so browser zoom is handled naturally. */
.ft-viewport-shell .ft-more-filters, .ft-viewport-shell .ft-extra-statuses { flex: 0 0 auto; }
.ft-viewport-shell .ft-more-filter-menu, .ft-viewport-shell .ft-status-menu {
    padding: 16px; border: 1px solid #d5dee7; border-radius: 9px;
    box-shadow: 0 8px 24px rgba(32,51,76,.15); white-space: normal;
}
.ft-viewport-shell .ft-more-flag { display: flex; align-items: center; gap: 8px; }
.ft-viewport-shell .ft-more-flag input { position: static !important; opacity: 1 !important; display: inline-block !important; width: 16px !important; height: 16px !important; margin: 0 !important; appearance: auto !important; }
.ft-viewport-shell .ft-more-approval { display: flex; gap: 6px; }
.ft-viewport-shell .ft-status-menu .filter-btn { display: flex; justify-content: space-between; margin: 4px 0; padding: 9px 12px; }
.ft-viewport-shell .ft-status-menu { padding: 8px; }
.ft-viewport-shell .ft-status-overflow-toggle { display: inline-flex; align-items: center; gap: 6px; }
.ft-viewport-shell .work-list-filter-status .filter-stat-opt { display: flex; align-items: center; }
.ft-viewport-shell .work-list-filter-row > .work-list-filter-controls {
    flex: 1 1 auto; min-width: min-content; width: auto; padding: 0;
}
.ft-viewport-shell .work-list-filter-row .work-list-filter-controls > input[type="search"] {
    flex: 0 1 112px; width: 112px !important; min-width: 88px;
}
.ft-viewport-shell .work-list-filter-row .work-list-filter-controls > [custom-select] {
    flex: 1 1 128px; width: 128px !important; min-width: 104px; max-width: 180px;
}
.ft-viewport-shell .work-list-filter-row .work-list-filter-status > .filter-stat-opt {
    margin-left: 0; gap: 4px;
}
.ft-viewport-shell .work-list-filter-row .ft-filter-clear {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 36px; width: 36px; min-width: 36px; height: 36px;
    padding: 6px; font-size: 14px;
}
@media (max-width: 1600px) {
    .ft-viewport-shell .work-list-filter-row { gap: 5px; }
    .ft-viewport-shell .work-list-filter-row > .work-list-filter-controls { gap: 4px; }
    .ft-viewport-shell .work-list-filter-row .work-list-filter-controls > [custom-select] {
        flex-basis: 112px; width: 112px !important; min-width: 96px;
    }
    .ft-viewport-shell .work-list-filter-row [custom-select] > .dropdown-toggle {
        padding: 6px 8px; gap: 4px; font-size: 12px;
    }
    .ft-viewport-shell .work-list-filter-row .btn:not(.dropdown-menu *) {
        padding: 6px 8px; font-size: 12px;
    }
    .ft-viewport-shell .work-list-filter-row .filter-btn {
        padding: 5px 4px; font-size: 11px;
    }
    .ft-viewport-shell .work-list-filter-row .work-list-filter-status > .filter-stat-opt { gap: 3px; }
}
.ft-setup .ft-setup-tabs { display: flex; width: max-content; }
.ft-setup .ft-setup-tabs > .btn { flex: 0 0 auto; white-space: nowrap; padding: 9px 12px; font-size: 13px; line-height: 20px; }
.ft-setup .ft-category-add { float: right; position: relative; z-index: 1; margin: 12px 16px 0 12px; }
.ft-category-list .card-body { padding: 12px 16px; }
.ft-category-list .input-group { max-width: 360px; margin-bottom: 12px; }
.ft-category-list table { table-layout: fixed; }
.ft-category-list table td { padding: 10px 12px; vertical-align: middle; overflow-wrap: anywhere; }
.ft-category-list td > .display-flex { align-items: flex-start; gap: 8px; }
.ft-category-list .dyn-string { white-space: normal; overflow: visible; text-overflow: clip; }
.ft-category-list .ft-calendar-tags { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; flex: 1; }
.ft-category-list .ft-calendar-tag { display: inline-block; max-width: 100%; background: #edf2f6; color: #334155; border-radius: 6px; padding: 4px 8px; font-size: 12px; line-height: 18px; white-space: normal; overflow-wrap: anywhere; }
.ft-category-list .ft-calendar-tags + div { display: flex; flex: 0 0 auto; }
.ft-calendar-summary { font-size: 12px; color: #087d91; white-space: nowrap; }
.ft-calendar-dialog { max-width: 460px; }
.ft-calendar-options { max-height: 40vh; overflow-y: auto; }
.ft-calendar-options label { display: flex; gap: 10px; padding: 10px 0; margin: 0; border-bottom: 1px solid #edf2f6; font-weight: normal; overflow-wrap: anywhere; }
.ft-calendar-options input[type="checkbox"] { flex: none; margin: 4px 0 0; position: static; left: auto; opacity: 1; appearance: auto; width: 16px; height: 16px; pointer-events: auto; accent-color: #159db2; }
.ft-calendar-options label { padding: 10px 8px; border-radius: 5px; cursor: pointer; color: #334155; }
.ft-calendar-options label.is-selected { background: #e9f6f8; }
.ft-viewport-shell .subnavbar ul.mainnav--close { scrollbar-width: none; }
.ft-viewport-shell .subnavbar ul.mainnav--close::-webkit-scrollbar { display: none; width: 0; }
.ft-entity-field { margin: 0 0 16px; min-width: 0; }
.ft-entity-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ft-entity-heading .btn { padding:4px 0; font-size:13px; }
.ft-entity-value { display:block; width:100%; text-align:left; white-space:normal; overflow-wrap:anywhere; padding:4px 0; border:0; background:transparent; color:#087d91; }
.ft-entity-field small { display:block; }
.ft-entity-dialog { max-width:520px; }
.ft-entity-results { max-height:40vh; overflow-y:auto; margin-top:12px; }
.ft-entity-results button { display:block; width:100%; text-align:left; white-space:normal; overflow-wrap:anywhere; padding:12px; border:0; border-bottom:1px solid #e2e8f0; background:white; color:#334155; }
.ft-entity-results button.is-selected { background:#e9f6f8; box-shadow:inset 3px 0 #159db2; }
.ft-entity-results small { display:block; color:#64748b; }
.ft-setup { margin: 0 !important; padding: 20px; overflow-x: hidden; box-sizing: border-box; }
.ft-setup > .col-md-12 { padding: 0; }
.ft-setup-overview { max-width: 1320px; margin: 0 auto; }
.ft-setup-overview h2 { font-size: 22px; }
.ft-setup-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 22px; }
.ft-setup-grid > button { display: flex; align-items: center; gap: 10px; min-height: 88px; text-align: left; padding: 18px; background: white; border: 1px solid #dae3eb; border-radius: 10px; color: #334155; font-size: 14px; }
.ft-setup-grid > button:hover, .ft-setup-grid > button:focus-visible { background:#f2fafb; border-color:#159db2; }
.ft-setup-grid > button > i { color:#159db2; }
.ft-setup-grid > button > span { margin-left:auto; }
.ft-setup-switch { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.ft-setup-switch select { width:260px; max-width:65%; }
.ft-setup-section .form-group.row { clear:both; }
.ft-setup-section .ft-category-list .card-body { padding: 12px 0; }
.ft-setup-section .ft-category-list table { width:100% !important; }
.ft-setup-section { position:relative; }
.ft-setup-section .ft-category-add { position:absolute; top:66px; right:16px; float:none; width:max-content; margin:0; z-index:1; }
.ft-setup-section .ft-category-list .input-group { max-width: min(360px, calc(100% - 260px)); }
.ft-setup-section .pos-add-btn { position:static; display:block; width:max-content; margin-left:auto; }
@media(max-width:1100px){.ft-setup-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:700px){.ft-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ft-setup{padding:12px;}}
.ft-details-column { padding-right: 8px; padding-left: 12px; min-width: 0; }
.ft-details-card { background: #fff; border: 1px solid #dfe6ed; border-radius: 10px; box-shadow: 0 3px 12px rgba(35,55,75,.06); padding: 14px; margin-top: 12px; }
.ft-details-card > .card-title { margin-left: 0 !important; }
/* WO/HK/LG already have a bordered collapsible panel inside this layout wrapper. */
.wo-viewer-v2 .ft-work-details { border: 0; box-shadow: 0 3px 12px rgba(35,55,75,.06); padding: 0; background: transparent; }
.wo-viewer-v2 .ft-work-details > .wo-sidebar-body { padding: 14px; overflow: visible; }
.ft-details-card > .card-body { padding: 8px 0 0; }
.ft-details-card > .card-body > .row { display: grid; grid-template-columns: minmax(100px, 42%) minmax(0, 1fr); gap: 8px; margin: 0 0 12px; }
.ft-details-card > .card-body > .row > [class*="col-"] { width: auto; max-width: none; padding: 0; min-width: 0; }
.ft-details-card .form-control, .ft-details-card .cs-custom-select { width: 100%; min-width: 0; }
.ft-details-card .ft-entity-field { display:grid; grid-template-columns:minmax(100px,42%) minmax(0,1fr); gap:8px; align-items:start; }
.ft-details-card .ft-entity-heading { padding-top:4px; }
.ft-entity-selection { min-width:0; }
.ft-entity-value-line { display:flex; align-items:flex-start; gap:6px; }
.ft-entity-value-line .ft-entity-value { flex:1; min-width:0; width:auto; }
.ft-entity-value-line .ft-entity-edit { flex:none; padding:4px 6px; color:#087d91; }
.ft-details-card .cs-custom-select .ft-toolbar-popup { min-width:0 !important; }
.ft-details-card .cs-custom-select .dropdown-menu ul { width:100%; margin:0; padding-right:0; }
.ft-details-card .cs-custom-select .dropdown-menu li { white-space:normal; word-break:normal; overflow-wrap:break-word; }
@media (max-width: 1200px) {
 .ft-details-card > .card-body > .row, .ft-details-card .ft-entity-field { grid-template-columns:minmax(0,1fr); gap:4px; }
}
.kpi-strip-grid.kpi-strip-summary {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid #dfe6ed;
  border-radius: 10px;
  background: #f8fafc;
  padding: 8px 0;
}
.kpi-strip-summary > .kpi-strip-cell + .kpi-strip-cell { border-left: 1px solid #dfe6ed; }
.kpi-strip-summary .kpi-tile.kpi-tile--compact {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: 0 12px; min-height: 54px;
}
.kpi-strip-summary .kpi-tile__header { min-height: 22px; margin-bottom: 3px; align-items: center; }
.kpi-strip-summary .kpi-tile__label { font-size: 11px; line-height: 1.2; }
.kpi-strip-summary .kpi-tile__info { width: 22px; height: 22px; min-width: 22px; font-size: 11px; }
.kpi-strip-summary .kpi-tile__body,
.kpi-strip-summary .kpi-tile__no-data-wrap { margin-top: auto; min-height: 28px; justify-content: center; }
.kpi-strip-summary .kpi-tile__value { font-size: 22px; line-height: 28px; }
.kpi-strip-summary .kpi-tile__no-data-badge { font-size: 13px; line-height: 28px; color: #52647a; }
.kpi-strip-summary .kpi-tile__no-data-badge > i { display: none; }
.kpi-strip-summary .kpi-tile__no-data-wrap { justify-content: flex-start; }
.popover.kpi-formula-popover > .arrow { margin-left: 0; margin-right: 0; }
@container asset-kpis (max-width: 800px) {
  .kpi-strip-summary .kpi-tile.kpi-tile--compact { padding: 0 8px; }
  .kpi-strip-summary .kpi-tile__header { gap: 3px; }
}
@container asset-kpis (max-width: 560px) {
  .kpi-strip-grid.kpi-strip-summary { grid-auto-flow: row; grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 10px; }
  .kpi-strip-summary > .kpi-strip-cell:nth-child(odd) { border-left: 0; }
  .kpi-strip-summary > .kpi-strip-cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-top: 1px solid #dfe6ed; padding-top: 8px; }
}