/* =========================================================
   APP PAGE SYSTEM - GLOBAL DESIGN FOUNDATION
   ========================================================= */

@import url('./public-generic-layout-preview-system.css');

/* -------------------------------
   PAGE SHELL
---------------------------------*/
.app-page-shell-root {
   min-height: 100vh;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
}

.app-page-bg-default {
   background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.app-page-width-default {
   max-width: 1280px;
   margin: 0 auto;
}

.app-page-hero {
   margin-bottom: 1rem;
}

.app-page-body {
   display: block;
}


/* -------------------------------
   SURFACE BASE (ALL CARDS / PANELS)
---------------------------------*/
.app-surface-card,
.app-panel,
.app-stat-card,
.app-launcher-card,
.app-info-card,
.app-loading-card {
   background: #ffffff;
   border: 1px solid #e9ecef;
   border-radius: 1rem;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}


/* -------------------------------
   SECTION HEADER
---------------------------------*/
.app-section-header {
   margin: .25rem 0 1rem 0;
}

.app-section-title {
   font-size: 1.15rem;
   font-weight: 700;
   color: #1f2937;
   margin-bottom: .35rem;
}

.app-section-description {
   color: #6c757d;
   font-size: .95rem;
   margin-bottom: 0;
}


/* -------------------------------
   PANEL
---------------------------------*/
.app-panel {
   overflow: hidden;
}

.app-panel-header {
   padding: 1.15rem 1.2rem;
   border-bottom: 1px solid #edf2f7;
}

.app-panel-body {
   padding: 1.2rem;
}


/* -------------------------------
   TABS WRAPPER
---------------------------------*/
.app-tabs-wrap {
   padding: .75rem;
   margin-bottom: 1rem;
}


/* -------------------------------
   LOADING
---------------------------------*/
.app-loading-card {
   padding: 1.25rem;
}

.app-loading-inline {
   display: flex;
   align-items: center;
   gap: .5rem;
   color: #6c757d;
}


/* -------------------------------
   STAT CARD
---------------------------------*/
.app-stat-card {
   padding: 1.25rem;
   position: relative;
   overflow: hidden;
   height: 100%;
}

   .app-stat-card::after {
      content: "";
      position: absolute;
      inset: auto -30px -30px auto;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: rgba(13, 110, 253, 0.05);
   }

.app-stat-card-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: .75rem;
   position: relative;
   z-index: 1;
}

.app-stat-card-label {
   font-size: .8rem;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: #6c757d;
   font-weight: 600;
   margin-bottom: .5rem;
}

.app-stat-card-title {
   font-weight: 700;
   font-size: 1.15rem;
   color: #1f2937;
}

.app-stat-card-value {
   font-size: 2rem;
   font-weight: 700;
   color: #212529;
   line-height: 1.1;
}

.app-stat-card-subtext {
   color: #6c757d;
   font-size: .92rem;
   margin-top: .35rem;
}

.app-stat-card-icon {
   width: 48px;
   height: 48px;
   border-radius: 1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.15rem;
   flex-shrink: 0;
}

   .app-stat-card-icon.primary {
      background: rgba(13, 110, 253, 0.12);
      color: #0d6efd;
   }

   .app-stat-card-icon.success {
      background: rgba(25, 135, 84, 0.12);
      color: #198754;
   }

   .app-stat-card-icon.warning {
      background: rgba(255, 193, 7, 0.16);
      color: #a66b00;
   }

   .app-stat-card-icon.purple {
      background: rgba(111, 66, 193, 0.12);
      color: #6f42c1;
   }


/* -------------------------------
   LAUNCHER CARD
---------------------------------*/
.app-launcher-card {
   padding: 1.4rem;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

   .app-launcher-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
      border-color: #cfd8e3;
   }

.app-launcher-icon {
   width: 64px;
   height: 64px;
   border-radius: 1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   margin-bottom: 1rem;
}

   .app-launcher-icon.primary {
      background: rgba(13, 110, 253, 0.12);
      color: #0d6efd;
   }

   .app-launcher-icon.success {
      background: rgba(25, 135, 84, 0.12);
      color: #198754;
   }

   .app-launcher-icon.purple {
      background: rgba(111, 66, 193, 0.12);
      color: #6f42c1;
   }

.app-launcher-title-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .75rem;
   margin-bottom: .45rem;
}

.app-launcher-title {
   font-size: 1.15rem;
   font-weight: 700;
   color: #1f2937;
}

.app-launcher-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 42px;
   height: 42px;
   padding: 0 .85rem;
   border-radius: 999px;
   font-size: 1rem;
   font-weight: 800;
   color: #fff;
}

   .app-launcher-badge.primary {
      background: linear-gradient(135deg, #0d6efd 0%, #5aa0ff 100%);
   }

   .app-launcher-badge.success {
      background: linear-gradient(135deg, #198754 0%, #43c98b 100%);
   }

   .app-launcher-badge.purple {
      background: linear-gradient(135deg, #6f42c1 0%, #a16eff 100%);
   }

.app-launcher-description {
   color: #6c757d;
   font-size: .95rem;
   margin-bottom: 1rem;
}

.app-launcher-meta {
   display: flex;
   justify-content: space-between;
   border-top: 1px solid #eef2f6;
   padding-top: .9rem;
}

.app-launcher-meta-label {
   font-size: .82rem;
   color: #6c757d;
}

.app-launcher-meta-value {
   font-weight: 700;
}


/* -------------------------------
   INFO CARD
---------------------------------*/
.app-info-card {
   padding: 1rem;
   background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.app-info-card-icon {
   width: 44px;
   height: 44px;
   border-radius: .9rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-bottom: .75rem;
}

   .app-info-card-icon.primary {
      background: rgba(13, 110, 253, .12);
      color: #0d6efd;
   }

   .app-info-card-icon.success {
      background: rgba(25, 135, 84, .12);
      color: #198754;
   }

   .app-info-card-icon.warning {
      background: rgba(255, 193, 7, .18);
      color: #b58105;
   }

   .app-info-card-icon.purple {
      background: rgba(111, 66, 193, .12);
      color: #6f42c1;
   }

.app-info-card-title {
   font-weight: 700;
   margin-bottom: .25rem;
   color: #1f2937;
}

.app-info-card-description {
   font-size: .92rem;
   color: #64748b;
}


/* -------------------------------
   ACTION BOX
---------------------------------*/
.app-action-box {
   border: 1px dashed #d8e2ec;
   border-radius: 1rem;
   padding: 1.25rem;
   background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.app-action-box-title {
   font-weight: 700;
   margin-bottom: .3rem;
   color: #1f2937;
}

.app-action-box-text {
   color: #6c757d;
   margin-bottom: 1rem;
}


/* -------------------------------
   INLINE INFO BOX
---------------------------------*/
.app-inline-info-box {
   background: #f8f9fb;
   border: 1px solid #e9ecef;
   border-radius: .85rem;
   padding: .9rem 1rem;
}

.app-inline-info-label {
   font-size: .8rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: #6c757d;
   margin-bottom: .3rem;
}

.app-inline-info-value {
   word-break: break-all;
   font-weight: 600;
   color: #212529;
}

/* Generic dynamic field styling
   - .ufs-dynamic-field: wrapper for a logical dynamic field (label + value)
   - .ufs-dynamic-field-label: label element for the field
   - .ufs-dynamic-field-value: value element for the field
   These are intentionally lightweight and designed to integrate with existing UFS styles.
*/
.ufs-dynamic-field {
   margin-bottom: 0.75rem;
}

.ufs-dynamic-field-label {
   display: block;
   font-size: 0.78rem;
   color: #6c757d; /* muted label color */
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-weight: 600;
   margin-bottom: 0.25rem;
}

.ufs-dynamic-field-value {
   display: block;
   color: #212529;
   font-size: 1rem;
   line-height: 1.4;
   word-wrap: break-word;
}



/* -------------------------------
   EMPTY STATE
---------------------------------*/
.app-empty-state {
   text-align: center;
   padding: 3rem 1rem;
}

.app-empty-state-icon {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: #eff6ff;
   color: #0d6efd;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.7rem;
   margin-bottom: 1rem;
}


/* -------------------------------
   ALERT (FILTER)
---------------------------------*/
.app-filter-alert {
   border-radius: 1rem;
   border: 1px solid #cfe2ff;
   background: #f4f8ff;
}


/* -------------------------------
   ICON BUTTON
---------------------------------*/
.app-action-icon-btn {
   width: 2.15rem;
   height: 2.15rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all 0.18s ease-in-out;
}

   .app-action-icon-btn:hover:not(:disabled) {
      transform: translateY(-1px);
   }

   .app-action-icon-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
   }


/* -------------------------------
   STATUS BADGE
---------------------------------*/
.app-status-badge {
   display: inline-flex;
   align-items: center;
   padding: .35rem .7rem;
   border-radius: 999px;
   font-size: .8rem;
   font-weight: 700;
   line-height: 1;
}

   .app-status-badge.is-success {
      background: rgba(25, 135, 84, .12);
      color: #146c43;
   }

   .app-status-badge.is-danger {
      background: rgba(220, 53, 69, .12);
      color: #b02a37;
   }

   .app-status-badge.is-secondary {
      background: rgba(108, 117, 125, .12);
      color: #495057;
   }

   .app-status-badge.is-warning {
      background: rgba(255, 193, 7, .18);
      color: #a66b00;
   }

   .app-status-badge.is-primary {
      background: rgba(13, 110, 253, .12);
      color: #0d6efd;
   }

   .app-status-badge.is-info {
      background: rgba(13, 202, 240, .14);
      color: #087990;
   }


/* -------------------------------
   BREADCRUMB
---------------------------------*/
.app-breadcrumb-wrap {
   margin-bottom: 1rem;
}

.app-breadcrumb-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: .35rem;
   list-style: none;
   padding: 0;
   margin: 0;
}

.app-breadcrumb-item {
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   font-size: .92rem;
}

.app-breadcrumb-link {
   color: #0d6efd;
   text-decoration: none;
   font-weight: 500;
}

   .app-breadcrumb-link:hover {
      text-decoration: underline;
   }

.app-breadcrumb-current {
   color: #6c757d;
   font-weight: 600;
}

.app-breadcrumb-separator {
   color: #adb5bd;
   user-select: none;
}


/* -------------------------------
   APP FORM TOOLBAR
---------------------------------*/
.app-form-toolbar {
   background: #fff;
   border: 1px solid #e9ecef;
   border-radius: 1rem;
   padding: 1rem 1.25rem;
   box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.app-form-toolbar-top {
   margin-bottom: 1rem;
}

.app-form-toolbar-bottom {
   position: sticky;
   bottom: 1rem;
   z-index: 10;
   margin-top: 1.5rem;
}

.app-form-toolbar-note {
   font-size: .92rem;
   color: #6c757d;
}


/* =========================================================
   APP FORM STANDARD
   ========================================================= */
.app-form-card {
   border: 0;
   border-radius: 1rem;
   box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .06);
   background: #fff;
}

   .app-form-card .card-body {
      padding: 1rem 1rem;
   }

.app-form-section-title {
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 1rem;
   color: #1f2937;
}

.app-form-row {
   padding: 1rem 0;
   border-bottom: 1px solid #eef1f4;
}

   .app-form-row:first-child {
      padding-top: 0;
   }

   .app-form-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
   }

.app-form-label {
   font-weight: 600;
   margin-bottom: .45rem;
   display: inline-block;
   color: #1f2937;
}

.app-form-help-box {
   background: #f8fafc;
   border: 1px solid #e9eef3;
   border-radius: .85rem;
   padding: .85rem 1rem;
   height: 100%;
}

.app-form-help-title {
   font-weight: 700;
   font-size: .92rem;
   margin-bottom: .35rem;
   color: #1f2937;
}

.app-form-help-text {
   font-size: .88rem;
   color: #5b6470;
   line-height: 1.55;
   margin-bottom: 0;
   white-space: normal;
}

.app-form-inline-note {
   font-size: .82rem;
   color: #6b7280;
   margin-top: .35rem;
}

.app-tab-section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1rem;
   flex-wrap: wrap;
}

.app-tab-section-badge {
   font-size: .8rem;
   font-weight: 700;
   color: #0d6efd;
   background: #eaf2ff;
   border: 1px solid #cfe2ff;
   padding: .35rem .7rem;
   border-radius: 999px;
}

/* Standard controls */
.app-form-card .form-control,
.app-form-card .form-select,
.app-form-card .form-check-input {
   box-shadow: none !important;
}

.app-form-card .form-control,
.app-form-card .form-select {
   border-radius: .75rem;
   min-height: 46px;
   border-color: #dbe2ea;
}

   .app-form-card .form-control:focus,
   .app-form-card .form-select:focus {
      border-color: #86b7fe;
      box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12) !important;
   }

.app-form-card textarea.form-control {
   min-height: 120px;
   resize: vertical;
}

/* Validation */
.app-form-card .validation-message,
.app-form-card .validation-errors,
.app-form-card .validation-summary-errors,
.app-form-card .text-danger,
.app-form-card .field-validation-error {
   color: #dc3545;
   font-size: .85rem;
   margin-top: .35rem;
}

   .app-form-card .validation-summary-errors ul {
      margin-bottom: 0;
      padding-left: 1rem;
   }

   .app-form-card .validation-summary-errors li {
      margin-bottom: .2rem;
   }

.app-form-card .form-check {
   margin-bottom: 0;
}

.app-form-card .form-check-label {
   color: #1f2937;
   font-weight: 600;
}

.app-form-help-box.is-warning {
   background: #fffaf0;
   border-color: #fde7b2;
}

.app-form-help-box.is-success {
   background: #f2fbf6;
   border-color: #cfead9;
}

.app-form-help-box.is-info {
   background: #f3f8ff;
   border-color: #dbe8fb;
}


/* =========================================================
   APP FIELD ROW - SHARED LAYOUT FOR INPUT + HELP
   ========================================================= */
.app-field-row {
   display: grid;
   grid-template-columns: 1fr minmax(280px, 340px);
   gap: 2rem;
   padding: 1rem;
   border-radius: 0.375rem;
   background-color: transparent;
   margin-bottom: 1rem;
   min-width: 0;
   width: 100%;
}

.app-field-row-left {
   min-width: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.app-field-label {
   font-weight: 600;
   display: block;
   margin-bottom: 0.5rem;
   font-size: 0.95rem;
   color: var(--bs-body-color);
}

.app-field-subtitle {
   font-size: 0.85rem;
   color: var(--bs-secondary);
   margin-bottom: 0.5rem;
}

.app-field-input {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   min-width: 0;
   flex: 1;
}

.app-field-row-right {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   min-width: 0;
   flex-shrink: 0;
}

/* Grouped field inputs container - for max 2 related fields side by side */
.app-field-row-grouped {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
   min-width: 0;
}

   .app-field-row-grouped > div {
      min-width: 0;
      display: flex;
      flex-direction: column;
   }


/* =========================================================
   APP DASHBOARD / DIRECTORY / ENTITY LIST
   ========================================================= */

/* Filter / toolbar row */
.app-filter-toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
   align-items: end;
}

.app-filter-toolbar-item {
   min-width: 220px;
}

   .app-filter-toolbar-item.is-search {
      min-width: 260px;
      flex: 1 1 320px;
   }

.app-view-toggle .btn {
   min-width: 110px;
}

/* Shared data table */
.app-data-table {
   margin-bottom: 0;
}

   .app-data-table thead th {
      background: #f8fafc;
      border-bottom: 1px solid #e9eef5;
      color: #475569;
      font-weight: 700;
      white-space: nowrap;
      font-size: .92rem;
   }

   .app-data-table tbody tr:hover {
      background: #fbfdff;
   }

/* Shared entity identity */
.app-entity-name {
   font-weight: 700;
   color: #0f172a;
}

.app-entity-meta {
   font-size: .875rem;
   color: #64748b;
}

/* Small inline badge */
.app-mini-badge {
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   padding: .3rem .58rem;
   border-radius: 999px;
   font-size: .75rem;
   font-weight: 700;
   border: 1px solid transparent;
   line-height: 1;
}

   .app-mini-badge.is-primary {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #dbeafe;
   }

   .app-mini-badge.is-success {
      background: #ecfdf3;
      color: #15803d;
      border-color: #d1fadf;
   }

   .app-mini-badge.is-warning {
      background: #fff8e6;
      color: #a16207;
      border-color: #fde68a;
   }

   .app-mini-badge.is-muted {
      background: #f8fafc;
      color: #64748b;
      border-color: #e5e7eb;
   }

/* Shared entity card */
.app-entity-card {
   padding: 1rem;
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: .9rem;
}

.app-entity-card-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: .75rem;
}

.app-entity-card-title-wrap {
   min-width: 0;
}

.app-entity-card-identity {
   display: flex;
   gap: .75rem;
   min-width: 0;
}

.app-entity-card-icon {
   width: 48px;
   height: 48px;
   border-radius: 1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.15rem;
   flex-shrink: 0;
   background: rgba(13, 110, 253, .10);
   color: #0d6efd;
}

   .app-entity-card-icon.is-primary {
      background: rgba(13, 110, 253, .10);
      color: #0d6efd;
   }

   .app-entity-card-icon.is-success {
      background: rgba(25, 135, 84, .12);
      color: #198754;
   }

   .app-entity-card-icon.is-warning {
      background: rgba(255, 193, 7, .16);
      color: #a66b00;
   }

   .app-entity-card-icon.is-purple {
      background: rgba(111, 66, 193, .12);
      color: #6f42c1;
   }

.app-entity-card-description {
   font-size: .92rem;
   color: #6b7280;
   margin-bottom: 0;
}

.app-entity-card-meta-row {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
}

.app-entity-card-actions {
   display: flex;
   flex-wrap: wrap;
   gap: .55rem;
   margin-top: auto;
}


/* =========================================================
   APP EDITOR GRID
   ========================================================= */


/* -------------------------------
   RESPONSIVE
---------------------------------*/
@media (max-width: 1024px) {
   .app-field-row {
      grid-template-columns: 1fr minmax(260px, 300px);
      gap: 1.5rem;
   }
}

@media (max-width: 768px) {
   .app-field-row {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 0.75rem;
   }

   .app-field-row-right {
      order: 1;
      margin-top: 0.5rem;
   }

   .app-field-row-grouped {
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
   }

   .app-filter-toolbar-item,
   .app-filter-toolbar-item.is-search {
      min-width: 100%;
      flex: 1 1 100%;
   }

   .app-entity-card-top {
      flex-direction: column;
      align-items: stretch;
   }
}

@media (max-width: 480px) {
   .app-field-row {
      padding: 0.5rem 0;
      margin-bottom: 0.75rem;
   }

   .app-field-row-grouped {
      grid-template-columns: 1fr;
      gap: 0.75rem;
   }
}


.app-filter-toolbar-item-view {
   min-width: 320px;
   flex: 1 1 360px;
}

   .app-filter-toolbar-item-view .path-tabs,
   .app-filter-toolbar-item-view .path-tabs-content,
   .app-filter-toolbar-item-view .path-tab-body {
      width: 100%;
   }

   .app-filter-toolbar-item-view .profile-tabs-card {
      margin-bottom: 0;
      padding: .55rem;
      border-radius: .85rem;
   }

   .app-filter-toolbar-item-view .profile-tab-nav {
      gap: .5rem;
   }

   .app-filter-toolbar-item-view .profile-tab-btn {
      flex: 1 1 0;
      min-width: 0;
      padding: .65rem .85rem;
      border-radius: .85rem;
   }

@media (max-width: 768px) {
   .app-filter-toolbar-item-view {
      min-width: 100%;
      flex: 1 1 100%;
   }
}

.app-editor-shell {
   overflow: hidden;
}

.app-editor-label {
   font-size: .68rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: #4b5563;
}

.app-editor-footer {
   position: sticky;
   bottom: 0;
   z-index: 30;
}
/* --------------------------------------------------------------------------
   UFS Step BV - Modal stack + floating toolbar suppression
   Purpose:
   - Right-side drawers/modals must always sit above editor/view floating toolbars.
   - Floating toolbars must be hidden while any right-side/modal editing surface is open.
   -------------------------------------------------------------------------- */

:root {
   --app-modal-backdrop-z-index: 14000;
   --app-modal-surface-z-index: 14010;
}

/* Public Generic / Facility right-side modal backdrops */
.facility-display-setting-backdrop,
.public-generic-visibility-backdrop,
.public-generic-layout-selector-backdrop,
.public-generic-color-drawer-backdrop,
.context-area-request-backdrop,
.app-modal-backdrop,
.app-drawer-backdrop,
.app-side-drawer-backdrop {
   z-index: var(--app-modal-backdrop-z-index) !important;
}

/* Public Generic / Facility right-side modal surfaces */
.facility-display-setting-modal,
.public-generic-visibility-drawer,
.public-generic-layout-selector-drawer,
.public-generic-color-drawer,
.context-area-request-modal,
.app-modal,
.app-drawer,
.app-side-drawer,
.app-side-panel {
   z-index: var(--app-modal-surface-z-index) !important;
}

/*
   When a modal/drawer is open, the editor/view floating toolbar must not remain
   clickable above the modal layer. :has() is supported by current Chromium/Edge
   and keeps this behavior centralized without requiring every component to
   maintain its own toolbar-hidden flag.
*/
body:has(.facility-display-setting-backdrop) .public-generic-editor-floating-toolbar,
body:has(.facility-display-setting-backdrop) .public-generic-view-floating-toolbar,
body:has(.public-generic-visibility-backdrop) .public-generic-editor-floating-toolbar,
body:has(.public-generic-visibility-backdrop) .public-generic-view-floating-toolbar,
body:has(.public-generic-layout-selector-backdrop) .public-generic-editor-floating-toolbar,
body:has(.public-generic-layout-selector-backdrop) .public-generic-view-floating-toolbar,
body:has(.public-generic-color-drawer-backdrop) .public-generic-editor-floating-toolbar,
body:has(.public-generic-color-drawer-backdrop) .public-generic-view-floating-toolbar,
body:has(.context-area-request-backdrop) .public-generic-editor-floating-toolbar,
body:has(.context-area-request-backdrop) .public-generic-view-floating-toolbar,
body:has(.app-modal-backdrop) .public-generic-editor-floating-toolbar,
body:has(.app-modal-backdrop) .public-generic-view-floating-toolbar,
body:has(.app-drawer-backdrop) .public-generic-editor-floating-toolbar,
body:has(.app-drawer-backdrop) .public-generic-view-floating-toolbar,
body:has(.app-side-drawer-backdrop) .public-generic-editor-floating-toolbar,
body:has(.app-side-drawer-backdrop) .public-generic-view-floating-toolbar {
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;
   transform: translateX(-50%) translateY(1rem) scale(.98) !important;
}

/* Hide sticky editor mini controls too, so the modal remains the only active UI. */
body:has(.facility-display-setting-backdrop) .public-generic-editor-area-control,
body:has(.public-generic-visibility-backdrop) .public-generic-editor-area-control,
body:has(.public-generic-layout-selector-backdrop) .public-generic-editor-area-control,
body:has(.public-generic-color-drawer-backdrop) .public-generic-editor-area-control,
body:has(.context-area-request-backdrop) .public-generic-editor-area-control,
body:has(.app-modal-backdrop) .public-generic-editor-area-control,
body:has(.app-drawer-backdrop) .public-generic-editor-area-control,
body:has(.app-side-drawer-backdrop) .public-generic-editor-area-control {
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;
}

/* Ensure drawer footers remain above any fixed page controls. */
.facility-display-setting-footer,
.public-generic-visibility-drawer__footer,
.public-generic-layout-selector-drawer__footer,
.public-generic-color-drawer__footer,
.context-area-request-modal-footer {
   position: sticky;
   bottom: 0;
   z-index: calc(var(--app-modal-surface-z-index) + 1) !important;
}

/* Facility setup / identity editor shared UI -------------------------------- */
.facility-setup-editor-shell {
   border: 1px solid rgba(148, 163, 184, .24);
   border-radius: 1.5rem;
   overflow: hidden;
   background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
   box-shadow: 0 24px 70px rgba(15, 23, 42, .10);
}

.facility-setup-editor-header {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   padding: 1.25rem;
   background:
      radial-gradient(circle at top left, rgba(59, 130, 246, .13), transparent 32%),
      linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 64, 175, .86));
   color: #fff;
}

.facility-setup-editor-icon {
   width: 3rem;
   height: 3rem;
   border-radius: 1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   background: rgba(255, 255, 255, .16);
   border: 1px solid rgba(255, 255, 255, .22);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.facility-setup-editor-icon i {
   font-size: 1.35rem;
}

.facility-setup-editor-kicker,
.facility-setup-section-kicker {
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   font-weight: 800;
}

.facility-setup-editor-kicker {
   color: rgba(219, 234, 254, .92);
   margin-bottom: .25rem;
}

.facility-setup-editor-title {
   font-size: 1.35rem;
   font-weight: 800;
   margin: 0 0 .25rem;
}

.facility-setup-editor-subtitle {
   color: rgba(239, 246, 255, .86);
   margin: 0;
   max-width: 760px;
   font-size: .9rem;
   line-height: 1.55;
}

.facility-identity-future-action {
   min-width: min(250px, 100%);
   max-width: 300px;
   padding: .75rem .85rem;
   border-radius: 1rem;
   background: rgba(255, 255, 255, .13);
   border: 1px solid rgba(255, 255, 255, .22);
   color: rgba(255, 255, 255, .86);
   font-size: .78rem;
   line-height: 1.45;
}

.facility-setup-editor-body {
   padding: 1rem;
}

.facility-setup-section {
   border: 1px solid rgba(148, 163, 184, .22);
   border-radius: 1.25rem;
   padding: 1rem;
   background: rgba(255, 255, 255, .72);
   box-shadow: 0 16px 42px rgba(15, 23, 42, .045);
}

.facility-setup-section + .facility-setup-section {
   margin-top: 1rem;
}

.facility-setup-section-heading {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 1rem;
   margin-bottom: 1rem;
}

.facility-setup-section-kicker {
   color: #2563eb;
   margin-bottom: .2rem;
}

.facility-setup-section-heading h3 {
   font-size: 1rem;
   font-weight: 800;
   color: #0f172a;
   margin: 0 0 .25rem;
}

.facility-setup-section-heading p {
   color: #64748b;
   font-size: .84rem;
   margin: 0;
   max-width: 780px;
   line-height: 1.45;
}

.facility-setup-field-card,
.facility-edit-image-card {
   border: 1px solid rgba(148, 163, 184, .24);
   border-radius: 1.1rem;
   padding: .95rem;
   background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
   box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
   transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.facility-setup-field-card:hover,
.facility-edit-image-card:hover {
   border-color: rgba(37, 99, 235, .25);
   box-shadow: 0 18px 44px rgba(15, 23, 42, .075);
   transform: translateY(-1px);
}

.facility-setup-label-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .75rem;
   margin-bottom: .5rem;
}

.facility-setup-label-row .form-label {
   margin: 0;
   color: #334155;
   font-size: .78rem;
   font-weight: 800;
}

.facility-setup-field-actions {
   display: inline-flex;
   align-items: center;
   gap: .45rem;
   flex-shrink: 0;
}

.facility-setup-field-card .form-control,
.facility-setup-field-card .form-select {
   border-color: rgba(148, 163, 184, .38);
   background: rgba(248, 250, 252, .92);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.facility-setup-field-card .form-control:focus,
.facility-setup-field-card .form-select:focus {
   background: #fff;
   border-color: rgba(37, 99, 235, .45);
   box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .12);
}

.facility-identity-textarea {
   min-height: 92px;
   resize: vertical;
}

.facility-quick-create-help-button,
.facility-identity-help-button {
   width: 1.35rem;
   height: 1.35rem;
   border-radius: 999px;
   border: 1px solid rgba(37, 99, 235, .28);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #2563eb;
   background: rgba(239, 246, 255, .95);
   box-shadow: 0 6px 16px rgba(37, 99, 235, .13);
}

.facility-quick-create-help-button:hover,
.facility-identity-help-button:hover {
   color: #fff;
   background: #2563eb;
   border-color: #2563eb;
}

.facility-quick-create-status-grid,
.facility-identity-status-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: .75rem;
}

.facility-quick-create-switch-card {
   border: 1px solid rgba(148, 163, 184, .30);
   border-radius: .95rem;
   padding: .75rem;
   display: flex;
   align-items: flex-start;
   gap: .65rem;
   background: rgba(255, 255, 255, .88);
   cursor: pointer;
}

.facility-quick-create-switch-card .form-check-input {
   margin-top: .15rem;
}

.facility-quick-create-switch-card strong {
   display: block;
   font-size: .8rem;
   color: #0f172a;
}

.facility-quick-create-switch-card small {
   display: block;
   color: #64748b;
   font-size: .72rem;
   line-height: 1.35;
   margin-top: .15rem;
}

.facility-edit-image-preview,
.facility-edit-image-empty {
   height: 156px;
   border-radius: .95rem;
   overflow: hidden;
   border: 1px solid rgba(148, 163, 184, .25);
   background: #f8fafc;
}

.facility-edit-image-preview-cover {
   height: 156px;
}

.facility-edit-image-preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.facility-edit-image-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .35rem;
   color: #64748b;
   font-size: .78rem;
}

.facility-edit-image-empty i {
   font-size: 1.4rem;
   color: #2563eb;
}

.facility-edit-image-card {
   min-height: 255px;
}

.facility-edit-image-card .form-control-sm {
   font-size: .72rem;
}

.facility-edit-image-card .btn-sm {
   font-size: .72rem;
   border-radius: .45rem;
}



.facility-setup-editor-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem 1.25rem;
   border-top: 1px solid rgba(148, 163, 184, .22);
   background: rgba(248, 250, 252, .9);
}

@media (max-width: 992px) {
   .facility-setup-editor-header,
   .facility-setup-editor-footer {
      flex-direction: column;
      align-items: stretch;
   }

   .facility-identity-future-action {
      max-width: none;
   }
}

@media (max-width: 768px) {
   .facility-quick-create-status-grid,
   .facility-identity-status-grid {
      grid-template-columns: 1fr;
   }

   .facility-setup-editor-body,
   .facility-setup-section {
      padding: .85rem;
   }
}

/* Facility Identity editor polish ------------------------------------------------ */
.facility-identity-editor-page {
   position: relative;
}

.facility-identity-editor-workspace {
   display: grid;
   grid-template-columns: 321px minmax(0, 1fr);
   gap: 18px;
   align-items: start;
}

.facility-identity-left-rail {
   position: sticky;
   top: 92px;
   z-index: 1040;
   align-self: start;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.facility-identity-main-stack {
   min-width: 0;
}

.facility-identity-editor-shell {
   margin-bottom: 1.5rem;
}

.facility-identity-scroll-target {
   scroll-margin-top: 106px;
}

.facility-identity-section-navigator,
.facility-identity-floating-toolbar {
   border: 1px solid rgba(148, 163, 184, .22);
   border-radius: 18px;
   background: rgba(255, 255, 255, .90);
   box-shadow: 0 14px 34px rgba(15, 23, 42, .10), 0 3px 10px rgba(15, 23, 42, .05);
   backdrop-filter: blur(12px);
}

.facility-identity-section-navigator {
   padding: 10px;
}

.facility-identity-section-navigator-title {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 4px 7px 9px;
   color: #475569;
   font-size: .68rem;
   font-weight: 800;
   letter-spacing: .04em;
   text-transform: uppercase;
}

.facility-identity-section-navigator-title i {
   color: #2563eb;
}

.facility-identity-section-nav-list {
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.facility-identity-section-nav-item {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 9px 10px;
   border: 1px solid transparent;
   border-radius: 13px;
   background: transparent;
   color: #334155;
   font-weight: 800;
   font-size: .82rem;
   text-align: left;
   transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.facility-identity-section-nav-item i {
   width: 21px;
   height: 21px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   background: #eff6ff;
   color: #2563eb;
   flex-shrink: 0;
}

.facility-identity-section-nav-item:hover {
   transform: translateX(2px);
   background: #f8fafc;
   border-color: rgba(148, 163, 184, .34);
   color: #0f172a;
}

.facility-identity-section-nav-item.active {
   background: linear-gradient(135deg, #111827 0%, #1d4ed8 100%);
   color: #fff;
   border-color: rgba(37, 99, 235, .35);
   box-shadow: 0 12px 26px rgba(37, 99, 235, .22);
}

.facility-identity-section-nav-item.active i {
   background: rgba(255, 255, 255, .16);
   color: #fff;
}

.facility-identity-textarea-large {
   min-height: 132px;
}

.facility-identity-ai-picker {
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.facility-identity-ai-picker .text-template-picker {
   gap: 0;
}

.facility-identity-ai-picker .text-template-picker-toolbar {
   flex-wrap: nowrap;
   gap: .25rem;
}

.facility-identity-switch-card {
   border: 1px solid rgba(148, 163, 184, .30);
   border-radius: .95rem;
   padding: .78rem;
   display: flex;
   align-items: flex-start;
   gap: .65rem;
   background: rgba(255, 255, 255, .90);
   cursor: pointer;
   min-height: 100%;
   transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.facility-identity-switch-card:hover {
   border-color: rgba(37, 99, 235, .26);
   background: #fff;
   box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
}

.facility-identity-switch-card .form-check-input {
   margin-top: .15rem;
}

.facility-identity-switch-card strong {
   display: block;
   font-size: .8rem;
   color: #0f172a;
}

.facility-identity-switch-card small {
   display: block;
   color: #64748b;
   font-size: .72rem;
   line-height: 1.35;
   margin-top: .15rem;
}

.facility-identity-floating-toolbar-spacer {
   display: none;
}

.facility-identity-floating-toolbar {
   padding: 12px;
}

.facility-identity-floating-toolbar__meta {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   min-width: 0;
   color: #0f172a;
   margin-bottom: 10px;
}

.facility-identity-floating-toolbar__meta > i {
   width: 28px;
   height: 28px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   color: #1d4ed8;
   background: #eff6ff;
   flex-shrink: 0;
}

.facility-identity-floating-toolbar__meta .fw-bold {
   line-height: 1.15;
   font-size: .92rem;
}

.facility-identity-floating-toolbar__meta .small {
   display: none;
}

.facility-identity-floating-toolbar__actions {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 7px;
}

.facility-identity-floating-toolbar__actions .btn {
   width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   min-height: 34px;
   font-weight: 800;
   font-size: .78rem;
   border-radius: 11px;
   padding: 6px 9px;
}

.facility-identity-floating-toolbar__actions .btn i {
   margin-right: 0 !important;
   font-size: .9rem;
}

@media (max-width: 992px) {
   .facility-identity-editor-workspace {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .facility-identity-left-rail {
      position: sticky;
      top: 58px;
      z-index: 1040;
      gap: 0;
   }

   .facility-identity-section-navigator {
      border-radius: 13px;
      overflow: visible;
      padding: 5px 6px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .10), 0 2px 8px rgba(15, 23, 42, .04);
   }

   .facility-identity-section-navigator-title {
      display: none;
   }

   .facility-identity-section-nav-list {
      flex-direction: row;
      min-width: max-content;
      overflow-x: auto;
      padding-bottom: 1px;
      gap: 5px;
   }

   .facility-identity-section-nav-item {
      width: auto;
      white-space: nowrap;
      padding: 5px 7px;
      gap: 5px;
      border-radius: 10px;
      font-size: .68rem;
   }

   .facility-identity-section-nav-item i {
      width: 18px;
      height: 18px;
      border-radius: 7px;
      font-size: .72rem;
   }

   .facility-identity-section-nav-item:hover {
      transform: translateY(-1px);
   }

   .facility-identity-floating-toolbar-spacer {
      display: block;
      height: 58px;
   }

   .facility-identity-floating-toolbar {
      position: fixed;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      z-index: 1050;
      width: min(430px, calc(100vw - 28px));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      padding: 6px 8px;
      border-radius: 13px;
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 12px 30px rgba(15, 23, 42, .14), 0 3px 10px rgba(15, 23, 42, .06);
      backdrop-filter: blur(12px);
   }

   .facility-identity-floating-toolbar__meta {
      align-items: center;
      margin-bottom: 0;
      gap: 6px;
   }

   .facility-identity-floating-toolbar__meta > i {
      width: 25px;
      height: 25px;
      border-radius: 9px;
      font-size: .82rem;
   }

   .facility-identity-floating-toolbar__meta .fw-bold {
      font-size: .72rem;
      white-space: nowrap;
      line-height: 1.05;
   }

   .facility-identity-floating-toolbar__actions {
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      flex-shrink: 0;
   }

   .facility-identity-floating-toolbar__actions .btn {
      width: 31px;
      height: 31px;
      min-height: 31px;
      padding: 0;
      border-radius: 10px;
      border-width: 1px;
   }

   .facility-identity-floating-toolbar__actions .btn span:not(.spinner-border) {
      display: none;
   }

   .facility-identity-floating-toolbar__actions .btn i {
      font-size: .86rem;
   }
}

@media (max-width: 768px) {
   .facility-quick-create-status-grid,
   .facility-identity-status-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 576px) {
   .facility-identity-left-rail {
      top: 54px;
   }

   .facility-identity-section-navigator {
      padding: 4px 5px;
      border-radius: 12px;
   }

   .facility-identity-section-nav-list {
      gap: 4px;
   }

   .facility-identity-section-nav-item {
      padding: 4px 6px;
      gap: 4px;
      font-size: .62rem;
      border-radius: 9px;
   }

   .facility-identity-section-nav-item i {
      width: 16px;
      height: 16px;
      font-size: .66rem;
      border-radius: 6px;
   }

   .facility-identity-floating-toolbar {
      width: min(360px, calc(100vw - 22px));
      bottom: 8px;
      padding: 5px 7px;
      border-radius: 12px;
   }

   .facility-identity-floating-toolbar__meta .fw-bold {
      max-width: 96px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: .66rem;
   }

   .facility-identity-floating-toolbar__meta > i {
      width: 23px;
      height: 23px;
      font-size: .78rem;
   }

   .facility-identity-floating-toolbar__actions {
      gap: 4px;
   }

   .facility-identity-floating-toolbar__actions .btn {
      width: 29px;
      height: 29px;
      min-height: 29px;
      border-radius: 9px;
   }

   .facility-identity-floating-toolbar__actions .btn i {
      font-size: .8rem;
   }
}

/* Facility Information section cards ----------------------------------------- */
.facility-information-card {
   --facility-section-accent: #0A63E0;
   --facility-section-accent-rgb: 10, 99, 224;
   overflow: hidden;
   border: 1px solid rgba(var(--facility-section-accent-rgb), .22);
   border-radius: 22px;
   background: #fff;
   box-shadow: 0 20px 52px rgba(15, 23, 42, .09);
}

.facility-information-card + .facility-information-card {
   margin-top: 22px;
}

.facility-information-card--identity {
   --facility-section-accent: #0A63E0;
   --facility-section-accent-rgb: 10, 99, 224;
}

.facility-information-card--profile {
   --facility-section-accent: #1B9460;
   --facility-section-accent-rgb: 27, 148, 96;
}

.facility-information-card__header {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 19px 21px;
   color: #fff;
   background:
      radial-gradient(circle at 88% 12%, rgba(255,255,255,.18), transparent 34%),
      linear-gradient(135deg, color-mix(in srgb, var(--facility-section-accent), #081f3a 28%), var(--facility-section-accent));
}

.facility-information-card__icon {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   flex: 0 0 44px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .22);
   font-size: 1.1rem;
}

.facility-information-card__kicker {
   margin-bottom: 2px;
   font-size: .66rem;
   font-weight: 850;
   letter-spacing: .07em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .78);
}

.facility-information-card__header h2 {
   margin: 0 0 4px;
   font-size: 1.14rem;
   font-weight: 850;
}

.facility-information-card__header p {
   margin: 0;
   max-width: 760px;
   color: rgba(255, 255, 255, .84);
   font-size: .82rem;
   line-height: 1.45;
}

.facility-information-card__body {
   padding: 14px;
   background: linear-gradient(180deg, rgba(var(--facility-section-accent-rgb), .045), #fff 120px);
}

.facility-information-subsection {
   border-color: rgba(var(--facility-section-accent-rgb), .16);
   background: rgba(255, 255, 255, .90);
}

.facility-information-card .facility-setup-section-kicker,
.facility-information-card .facility-identity-help-button {
   color: var(--facility-section-accent);
}

.facility-information-card .facility-identity-help-button {
   border-color: rgba(var(--facility-section-accent-rgb), .28);
   background: rgba(var(--facility-section-accent-rgb), .07);
}

.facility-information-card .facility-identity-help-button:hover {
   color: #fff;
   background: var(--facility-section-accent);
   border-color: var(--facility-section-accent);
}

.facility-information-card .facility-setup-field-card:hover {
   border-color: rgba(var(--facility-section-accent-rgb), .30);
}

.facility-identity-section-nav-item--identity i {
   color: #0A63E0;
   background: rgba(10, 99, 224, .09);
}

.facility-identity-section-nav-item--profile i {
   color: #1B9460;
   background: rgba(27, 148, 96, .10);
}

.facility-identity-section-nav-item--identity.active {
   background: linear-gradient(135deg, #0B2D4B, #0A63E0);
   border-color: rgba(10, 99, 224, .38);
   box-shadow: 0 12px 26px rgba(10, 99, 224, .24);
}

.facility-identity-section-nav-item--profile.active {
   background: linear-gradient(135deg, #0f5132, #1B9460);
   border-color: rgba(27, 148, 96, .38);
   box-shadow: 0 12px 26px rgba(27, 148, 96, .24);
}

.facility-identity-section-nav-item--identity.active i,
.facility-identity-section-nav-item--profile.active i {
   color: #fff;
   background: rgba(255, 255, 255, .16);
}

@media (max-width: 768px) {
   .facility-information-card__header {
      padding: 16px;
   }

   .facility-information-card__body {
      padding: 10px;
   }
}

/* Facility Information: Locations section */
.facility-information-card--location {
  --facility-section-accent: #7c3aed;
  --facility-section-soft: #f3e8ff;
  border-color: rgba(124, 58, 237, .26);
}
.facility-information-card--location .facility-information-card__header {
  background: linear-gradient(135deg, #4c1d95, #7c3aed);
}
.facility-identity-section-nav-item--location i { color: #7c3aed; }
.facility-identity-section-nav-item--location.active {
  color: #fff;
  border-color: #7c3aed;
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  box-shadow: 0 10px 24px rgba(124,58,237,.24);
}
.facility-identity-section-nav-item--location.active i { color: #fff; }
.facility-location-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; padding:2.4rem 1rem; border:1px dashed rgba(124,58,237,.35); border-radius:1rem; background:#faf7ff; color:#64748b; text-align:center; }
.facility-location-empty i { font-size:2rem; color:#7c3aed; }
.facility-location-list { display:grid; gap:.75rem; }
.facility-location-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.85rem; align-items:center; padding:.9rem; border:1px solid rgba(148,163,184,.25); border-radius:1rem; background:#fff; }
.facility-location-item__icon { width:2.5rem; height:2.5rem; border-radius:.8rem; display:grid; place-items:center; color:#7c3aed; background:#f3e8ff; }
.facility-location-item__actions { display:flex; gap:.45rem; }
.facility-location-form { padding:1rem; border:1px solid rgba(124,58,237,.28); border-radius:1rem; background:linear-gradient(180deg,#faf7ff,#fff); }
.facility-location-form__header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.facility-location-form textarea { min-height:90px; resize:vertical; }
@media (max-width: 720px) { .facility-location-item { grid-template-columns:auto minmax(0,1fr); } .facility-location-item__actions { grid-column:1/-1; justify-content:flex-end; } }

/* Facility Information: Contacts section */
.facility-information-card--contact {
  --facility-section-accent: #d97706;
  --facility-section-accent-rgb: 217, 119, 6;
  border-color: rgba(217, 119, 6, .26);
}
.facility-information-card--contact .facility-information-card__header {
  background: linear-gradient(135deg, #92400e, #d97706);
}
.facility-identity-section-nav-item--contact i {
  color: #d97706;
  background: rgba(217, 119, 6, .10);
}
.facility-identity-section-nav-item--contact.active {
  color: #fff;
  border-color: #d97706;
  background: linear-gradient(135deg, #92400e, #d97706);
  box-shadow: 0 10px 24px rgba(217, 119, 6, .24);
}
.facility-identity-section-nav-item--contact.active i { color: #fff; background: rgba(255,255,255,.16); }
.facility-contact-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem;
  padding:2.4rem 1rem; border:1px dashed rgba(217,119,6,.35); border-radius:1rem;
  background:#fffbeb; color:#64748b; text-align:center;
}
.facility-contact-empty i { font-size:2rem; color:#d97706; }
.facility-contact-list { display:grid; gap:.75rem; }
.facility-contact-item {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.85rem; align-items:center;
  padding:.9rem; border:1px solid rgba(148,163,184,.25); border-radius:1rem; background:#fff;
}
.facility-contact-item__icon {
  width:2.5rem; height:2.5rem; border-radius:.8rem; display:grid; place-items:center;
  color:#d97706; background:#fffbeb;
}
.facility-contact-item__actions { display:flex; gap:.45rem; }
.facility-contact-modal .modal-content,
.facility-location-modal .modal-content { max-height: 90vh; overflow: hidden; }
.facility-contact-modal .modal-header,
.facility-contact-modal .modal-footer,
.facility-location-modal .modal-header,
.facility-location-modal .modal-footer { flex: 0 0 auto; background:#fff; z-index:1; }
.facility-contact-modal .modal-body,
.facility-location-modal .modal-body { overflow-y:auto; min-height:0; }
@media (max-width: 720px) {
  .facility-contact-item { grid-template-columns:auto minmax(0,1fr); }
  .facility-contact-item__actions { grid-column:1/-1; justify-content:flex-end; }
}


/* Facility Information - Services section */
.facility-information-card--service {
  --facility-information-accent: #0f766e;
  border-top: 4px solid #0f766e;
}
.facility-information-card--service .facility-information-card__header {
  background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(20,184,166,.06));
}
.facility-identity-section-nav-item--service i { color: #0f766e; }
.facility-identity-section-nav-item--service.active {
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #0d9488);
  box-shadow: 0 10px 24px rgba(15,118,110,.24);
}
.facility-identity-section-nav-item--service.active i { color: #fff; background: rgba(255,255,255,.16); }

/* Facility Service editor */
.facility-service-form-section {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--bs-body-bg, #fff);
}
.facility-service-form-section__header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding-bottom: .8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.facility-service-form-section__header > i { font-size: 1.1rem; margin-top: .1rem; }
.facility-service-form-section__header div { display: flex; flex-direction: column; gap: .15rem; }
.facility-service-form-section__header span { color: var(--bs-secondary-color, #6c757d); font-size: .82rem; }
.facility-service-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .55rem;
}
.facility-service-choice {
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 10px;
  padding: .6rem .75rem;
  cursor: pointer;
  background: var(--bs-body-bg, #fff);
}
.facility-service-choice:hover { background: var(--bs-tertiary-bg, #f8f9fa); }
.facility-service-choice input { margin: 0; }


/* Facility Information - Public Links section */
.facility-information-card--publiclink {
  --facility-information-accent: #7c3aed;
  border-top: 4px solid #7c3aed;
}
.facility-information-card--publiclink .facility-information-card__header {
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(139,92,246,.06));
}
.facility-identity-section-nav-item--publiclink i { color: #7c3aed; }
.facility-identity-section-nav-item--publiclink.active {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  box-shadow: 0 10px 24px rgba(124,58,237,.24);
}
.facility-identity-section-nav-item--publiclink.active i { color:#fff; background:rgba(255,255,255,.16); }


/* Facility Social Links */
.facility-information-card--sociallink {
  --facility-info-accent: #db2777;
  --facility-info-soft: rgba(219, 39, 119, .08);
}
.facility-information-card--sociallink .facility-information-card__header {
  background: linear-gradient(135deg, rgba(219,39,119,.10), rgba(168,85,247,.06));
}
.facility-identity-section-nav-item--sociallink i { color: #db2777; }
.facility-identity-section-nav-item--sociallink.active {
  color: #fff;
  border-color: #db2777;
  background: linear-gradient(135deg, #db2777, #be185d);
  box-shadow: 0 12px 24px rgba(219,39,119,.20);
}
.facility-identity-section-nav-item--sociallink.active i { color:#fff; background:rgba(255,255,255,.16); }

/* Facility Information - collapsible, softer section presentation */
.facility-information-card {
   border-color: rgba(148, 163, 184, .24);
   box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}

.facility-information-card__header,
.facility-information-card--location .facility-information-card__header,
.facility-information-card--contact .facility-information-card__header,
.facility-information-card--service .facility-information-card__header,
.facility-information-card--publiclink .facility-information-card__header,
.facility-information-card--sociallink .facility-information-card__header,
.facility-information-card--branding .facility-information-card__header,
.facility-information-card--media .facility-information-card__header,
.facility-information-card--amenities .facility-information-card__header,
.facility-information-card--credentials .facility-information-card__header,
.facility-information-card--governance .facility-information-card__header {
   align-items: center;
   cursor: pointer;
   color: #1e293b;
   background: linear-gradient(135deg, #f8fafc, #f1f5f9);
   transition: background-color .18s ease, box-shadow .18s ease;
}

.facility-information-card__header:hover {
   background: linear-gradient(135deg, #f1f5f9, #eef2f7);
}

.facility-information-card__header:focus-visible {
   outline: 3px solid rgba(10, 99, 224, .16);
   outline-offset: -3px;
}

.facility-information-card--identity .facility-information-card__header {
   background: linear-gradient(135deg, #f4f8ff, #edf4ff);
}

.facility-information-card--profile .facility-information-card__header,
.facility-information-card--amenities .facility-information-card__header {
   background: linear-gradient(135deg, #f4fbf7, #eef8f2);
}

.facility-information-card--location .facility-information-card__header,
.facility-information-card--publiclink .facility-information-card__header {
   background: linear-gradient(135deg, #faf8ff, #f5f1ff);
}

.facility-information-card--contact .facility-information-card__header,
.facility-information-card--credentials .facility-information-card__header {
   background: linear-gradient(135deg, #fffbf4, #fff7e8);
}

.facility-information-card--service .facility-information-card__header,
.facility-information-card--governance .facility-information-card__header {
   background: linear-gradient(135deg, #f2fbfa, #ecf8f6);
}

.facility-information-card--sociallink .facility-information-card__header,
.facility-information-card--branding .facility-information-card__header,
.facility-information-card--media .facility-information-card__header {
   background: linear-gradient(135deg, #fcf7fb, #f8f2f8);
}

.facility-information-card__icon {
   color: #475569;
   background: rgba(255, 255, 255, .82);
   border-color: rgba(148, 163, 184, .22);
   box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
}

.facility-information-card__kicker {
   color: #64748b;
   font-weight: 750;
}

.facility-information-card__header h2 {
   color: #1e293b;
   font-weight: 750;
}

.facility-information-card__header p {
   color: #64748b;
}

.facility-information-card__toggle {
   width: 36px;
   height: 36px;
   margin-left: auto;
   display: grid;
   place-items: center;
   flex: 0 0 36px;
   border-radius: 10px;
   color: #475569;
   background: rgba(255, 255, 255, .78);
   border: 1px solid rgba(148, 163, 184, .22);
}

.facility-information-card__toggle i {
   font-size: .9rem;
}

.facility-information-card__body {
   border-top: 1px solid rgba(148, 163, 184, .16);
}


/* Facility Information navigation selection
   Left navigation and right-side accordion state are intentionally independent.
   Scroll position updates the left nav; a left-nav click only highlights the matching card. */
.facility-information-card {
   transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.facility-information-card.facility-information-card--selected {
   border-color: rgba(10, 99, 224, .42);
   box-shadow: 0 0 0 3px rgba(10, 99, 224, .10), 0 12px 30px rgba(15, 23, 42, .08);
}

.facility-information-card.facility-information-card--selected > .facility-information-card__header {
   filter: saturate(1.08) brightness(.99);
}

/* Facility Information navigation synchronization fix -----------------------
   The left rail stays below the application header. Selection is always UFS
   Facility blue, regardless of the section's decorative category color. */
@media (min-width: 993px) {
   .facility-identity-left-rail {
      top: 118px;
      z-index: 30;
   }
}

.facility-identity-section-nav-item.active,
.facility-identity-section-nav-item--identity.active,
.facility-identity-section-nav-item--profile.active,
.facility-identity-section-nav-item--location.active,
.facility-identity-section-nav-item--contact.active,
.facility-identity-section-nav-item--service.active,
.facility-identity-section-nav-item--publiclink.active,
.facility-identity-section-nav-item--sociallink.active,
.facility-identity-section-nav-item--branding.active,
.facility-identity-section-nav-item--media.active,
.facility-identity-section-nav-item--amenities.active,
.facility-identity-section-nav-item--credentials.active,
.facility-identity-section-nav-item--governance.active {
   color: #fff !important;
   border-color: rgba(10, 99, 224, .52) !important;
   background: linear-gradient(135deg, #0B2D4B 0%, #0A63E0 100%) !important;
   box-shadow: 0 12px 26px rgba(10, 99, 224, .24) !important;
}

.facility-identity-section-nav-item.active i {
   color: #fff !important;
   background: rgba(255, 255, 255, .16) !important;
}

.facility-information-card.facility-information-card--selected {
   border-color: rgba(10, 99, 224, .62) !important;
   box-shadow: 0 0 0 3px rgba(10, 99, 224, .12), 0 14px 34px rgba(10, 99, 224, .12) !important;
}

.facility-information-card.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--location.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--contact.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--service.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--publiclink.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--sociallink.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--branding.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--media.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--amenities.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--credentials.facility-information-card--selected > .facility-information-card__header,
.facility-information-card--governance.facility-information-card--selected > .facility-information-card__header {
   background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
   filter: none !important;
}

.facility-information-card.facility-information-card--selected > .facility-information-card__header h2 {
   color: #0B2D4B;
}

.facility-information-card.facility-information-card--selected > .facility-information-card__header .facility-information-card__kicker {
   color: #0A63E0;
}

.facility-information-card.facility-information-card--selected > .facility-information-card__header p {
   color: #334155;
}