/* Make the BPMN frame look like a clean card */
.model-frame.bpmn-viewer {
  height: 720px;   /* or 380px or 460px based on taste */
  display: flex;
  flex-direction: column;
border: 2px solid var(--turquoise-300);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;    /* keep */
}

/* Toolbar aligned to left, small and subtle */
.bpmn-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    padding: 0.4rem 0.6rem 0.3rem;
    background: var(--beige-100);
}

/* Compact KFUPM-styled buttons */
.bpmn-toolbar button {
    padding: 0.25rem 0.85rem;
    font-size: 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--turquoise-300);
    background: var(--turquoise-100);
    color: var(--turquoise-900);
    cursor: pointer;
    font-weight: 500;
}

.bpmn-toolbar button:hover {
    background: var(--turquoise-300);
    border-color: var(--turquoise-500);
    color: var(--white);
}

.bpmn-toolbar button:active {
    transform: scale(0.97);
}

.bpmn-toolbar button:focus-visible {
    outline: 2px solid var(--yellow-500);
    outline-offset: 2px;
}

/* Viewer area fills the remaining height */
.bpmn-viewer-wrapper {
    flex: 1;
    overflow: hidden;
    min-height: 280px;
    /* overall height of the diagram box */
}

/* Canvas fills the wrapper */
.bpmn-canvas {
    width: 100%;
    height: 100%;
    background: var(--beige-100);
    border-top: 1px solid var(--turquoise-300)
}

/* Hide bpmn.io logo */
.bjs-powered-by {
    display: none !important;
}
/* BPMN status (loading / error) */
.bpmn-viewer-status {
    margin: 0.35rem 0.6rem 0.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    border-radius: 6px;
    background: var(--informative-100);
    color: var(--turquoise-700);
    border: 1px solid var(--informative-500);
    font-style: italic;
}

/* Error variant (optional – can be toggled via JS later) */
.bpmn-viewer-status.error {
    background: var(--warning-100);
    border-color: var(--warning-500);
    color: var(--yellow-900);
    font-style: normal;
    font-weight: 600;
}

/* Completely hide the status element when it has no text */
.bpmn-viewer-status:empty {
    display: none;
}