/* ==============================================================
   Flowchart modal — reusable iframe-based modal that matches the
   IPDMS 2.0 green/orange theme (same palette as login-modal.css).
   Opens an HTML page (e.g. /HIS/hisglobal/login/index/flowcharts/*)
   in a centered, dimmed dialog.
   ============================================================== */

:root {
   --fcm-primary: var(--ipdms-primary, rgb(0, 104, 56));
   --fcm-primary-dark: var(--ipdms-primary-dark, rgb(0, 87, 47));
   --fcm-accent: rgb(241, 90, 41);
   --fcm-overlay: rgba(2, 35, 71, 0.55);
   --fcm-radius: 16px;
   --fcm-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.fcm-overlay {
   position: fixed;
   inset: 0;
   background: var(--fcm-overlay);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   display: flex;
   align-items: center;
   justify-content: center;
   /* Sits above the form-preview overlay (1050) AND above the login
      modal (.lm-overlay / .pmm-overlay z=9999) so the FAQ banner can
      be opened from the FAQs link inside the login footer. The Info
      modal (.ipi-overlay z=10001) still sits above this.  !important
      defends against any stale/cached lower z-index in 3rd-party CSS. */
   z-index: 10000 !important;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.22s ease, visibility 0.22s ease;
   padding: 24px;
}

.fcm-overlay.fcm-open {
   opacity: 1;
   visibility: visible;
}

.fcm-dialog {
   position: relative;
   width: 100%;
   max-width: 1080px;
   height: min(86vh, 820px);
   background: #ffffff;
   border-radius: var(--fcm-radius);
   box-shadow: var(--fcm-shadow);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   transform: translateY(20px) scale(0.98);
   opacity: 0;
   transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s,
               opacity 0.28s ease 0.05s;
}

.fcm-overlay.fcm-open .fcm-dialog {
   transform: translateY(0) scale(1);
   opacity: 1;
}

.fcm-header {
   flex: 0 0 auto;
   padding: 16px 22px;
   background: linear-gradient(135deg,
                  var(--fcm-primary-dark) 0%,
                  var(--fcm-primary) 60%,
                  var(--fcm-accent) 120%);
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
}

.fcm-title {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: 0.01em;
   color: #ffffff;
   font-family: inherit;
}

.fcm-actions {
   display: flex;
   align-items: center;
   gap: 8px;
}

.fcm-iconbtn {
   appearance: none;
   border: 1px solid rgba(255, 255, 255, 0.35);
   background: rgba(255, 255, 255, 0.12);
   color: #ffffff;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 18px;
   line-height: 1;
   transition: background 0.18s ease, transform 0.18s ease;
   padding: 0;
   text-decoration: none;
}
.fcm-iconbtn:hover {
   background: rgba(255, 255, 255, 0.25);
   transform: translateY(-1px);
}
.fcm-iconbtn:active { transform: translateY(0); }
.fcm-iconbtn svg { width: 16px; height: 16px; display: block; }
.fcm-close { font-size: 22px; font-weight: 300; }

.fcm-body {
   flex: 1 1 auto;
   position: relative;
   background: #f6f8fb;
   overflow: hidden;
}

.fcm-iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
   background: #ffffff;
}

.fcm-loader {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffffff;
   color: var(--fcm-primary);
   font-size: 14px;
   font-weight: 500;
   gap: 12px;
   transition: opacity 0.25s ease;
   z-index: 1;
}
.fcm-loader.fcm-hidden {
   opacity: 0;
   pointer-events: none;
}
.fcm-spinner {
   width: 28px;
   height: 28px;
   border: 3px solid var(--fcm-primary-light, #e0efe6);
   border-top-color: var(--fcm-primary);
   border-radius: 50%;
   animation: fcm-spin 0.9s linear infinite;
}
@keyframes fcm-spin {
   to { transform: rotate(360deg); }
}

.fcm-footer {
   flex: 0 0 auto;
   padding: 10px 22px;
   border-top: 1px solid #e5e9ef;
   background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   font-size: 13px;
   color: #5a6781;
}
.fcm-footer a {
   color: var(--fcm-primary);
   text-decoration: none;
   font-weight: 600;
}
.fcm-footer a:hover { text-decoration: underline; }

.fcm-btn {
   appearance: none;
   border: 0;
   background: var(--fcm-primary);
   color: #ffffff;
   padding: 8px 18px;
   border-radius: 8px;
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   transition: background 0.18s ease, transform 0.18s ease;
}
.fcm-btn:hover { background: var(--fcm-primary-dark); transform: translateY(-1px); }
.fcm-btn:active { transform: translateY(0); }

/* prevent background scroll while open */
body.fcm-no-scroll {
   overflow: hidden;
}

/* ---- responsive ---- */
@media (max-width: 768px) {
   .fcm-overlay { padding: 12px; }
   .fcm-dialog { height: 92vh; max-height: none; }
   .fcm-title { font-size: 16px; }
   .fcm-footer { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---- helper for cards that open a flowchart ---- */
.grid-item a[data-flowchart-url],
[data-flowchart-url] {
   cursor: pointer;
}