/*https://developer.chrome.com/docs/devtools/device-mode/#overview */
/*Mobile S	Mobile M	Mobile L	Tablet	Laptop	Laptop L	4K*/
/*320px	375px	425px	768px	1024px	1440px	2560px*/

/* -- Extra fonts -- */
@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap'); /*Needed for Stick notes*/

/* --- Basic Pallet -- */
:root {
    --primaryTextColor: black;
    --subleTextColor: lightgray;
    --primaryBackgroundColor: white;
    --diagramCanvasBackgroundColor: #eeeeee;

    /* --- Inverted colours -- */
    --invertedPrimaryTextColor: white;
    --invertedSubleTextColor: darkgray;
    --invertedPrimaryBackgroundColor: black;

    --backgroundOpacity: 1;
}

/*---- Components --- */
:root {
    /* --- Modals --- */
    --modalOverlayBackgroundColor: rgba(222, 223, 230, 0.62);
    --modalBackgroundColor: red;


    /* --- Property --- */
    --propertyTextColor: var(--primaryTextColor);
    --propertyBackgroundColor: rgba(255, 255, 255, 0.8);
    --propertyBorderColor: var(--subleTextColor);
    --propertyKeyTextColor: orange;
    --propertyTypeTextColor: var(--subleTextColor);
    --propertyRequiredTextColor: rgba(255, 0, 0, 0.8);

    /* --- Enum --- */
    --enumHeaderTextColor: var(--invertedPrimaryTextColor);
    --enumTextColor: var(--primaryTextColor);
    --enumBackgroundColor: #e39e9e;
    --enumBodyBackgroundColor: var(--primaryBackgroundColor);
    --enumGridItemBackgroundColor: rgba(255, 255, 255, 0.8);
    --enumGridItemBorderColor: lightgray;

    /* --- Aggregate--- */
    --aggregateTextColor: var(--primaryTextColor);
    --aggregateHeaderTextColor: var(--invertedPrimaryTextColor);
    --aggregateHeaderBackgroundColor: #9EA5E3;
    --aggregateBackgroundColor: var(--primaryBackgroundColor);

    /* --- State Machine--- */
    --stateMachineTextColor: var(--primaryTextColor);
    --stateMachineBackgroundColor: var(--primaryBackgroundColor);

    /* --- State --- */
    --stateTextColor: var(--invertedPrimaryTextColor);
    --stateBackgroundColor: #53b67f;

    /* --- Entity --- */
    --entityHeaderTextColor: var(--invertedPrimaryTextColor);
    --entityTextColor: var(--invertedPrimaryTextColor);
    --entityBackgroundColor: #9EA5E3;
    --entityBodyBackgroundColor: var(--primaryBackgroundColor);

    /* --- Value object --- */
    --valueObjectHeaderTextColor: var(--invertedPrimaryTextColor);
    --valueObjectTextColor: var(--invertedPrimaryTextColor);
    --valueObjectBackgroundColor: #9EA5E3;
    --valueObjectBodyBackgroundColor: var(--primaryBackgroundColor);

    /* --- Database / Projection--- */
    --databaseTextColor: var(--primaryTextColor);
    --databaseHeaderTextColor: var(--invertedPrimaryTextColor);
    --databaseHeaderBackgroundColor: #53b67f;
    --databaseBackgroundColor: var(--primaryBackgroundColor);
    --databaseBodyBackgroundColor: var(--primaryBackgroundColor);

    /* --- Notification Event--- */
    --notificationEventTextColor: var(--primaryTextColor);
    --notificationEventBackgroundColor: #53b67f;
    --notificationEventInputPortBackgroundColor: var(--notificationEventBackgroundColor);

    /* --- Users --- */
    --aiAgentTextColor: var(--invertedPrimaryTextColor);
    --aiAgentBackgroundColor: #ce79d8;
    --aiAgentOutputPortBackgroundColor: var(--commandBackgroundColor);


    /* --- Users --- */
    --userTextColor: var(--invertedPrimaryTextColor);
    --userBackgroundColor: #57295e;
    --userOutputPortBackgroundColor: var(--commandBackgroundColor);

    /* --- Commands --- */
    --commandTextColor: var(--invertedPrimaryTextColor);
    --commandBackgroundColor: #40BABD;
    --commandInputPortBackgroundColor: var(--commandBackgroundColor);
    --commandDependancyPortBackgroundColor: var(--apiBackgroundColor);
    --commandOutputPortBackgroundColor: var(--domainEventBackgroundColor);

    /* --- Domain Event --- */
    --domainEventTextColor: var(--invertedPrimaryTextColor);
    --domainEventBackgroundColor: #DC9A7A;
    --domainEventInputPortBackgroundColor: var(--commandBackgroundColor);
    --domainEventOutputPortBackgroundColor: var(--domainEventBackgroundColor);

    /* --- Time Event --- */
    --timeEventTextColor: var(--invertedPrimaryTextColor);
    --timeEventBackgroundColor: #df7b37;
    --timeEventOutputPortBackgroundColor: var(--commandBackgroundColor);

    /* --- Error --- */
    --errorEventTextColor: var(--invertedPrimaryTextColor);
    --errorEventBackgroundColor: #e34f4f;
    --errorEventInputPortBackgroundColor: var(--commandBackgroundColor);
    --errorEventOutputPortBackgroundColor: var(--errorEventBackgroundColor);
 
    /* --- Transform --- */
    --transformTextColor: var(--invertedPrimaryTextColor);
    --transformBackgroundColor: #4072bd;
    --transformInputPortBackgroundColor: var(--domainEventBackgroundColor);
    --transformOutputPortBackgroundColor: var(--domainEventBackgroundColor);
    
    /* --- Process --- */
    --policyTextColor: var(--invertedPrimaryTextColor);
    --policyBackgroundColor: #4072bd;
    --policyInputPortBackgroundColor: var(--domainEventBackgroundColor);
    --policyOutputPortBackgroundColor: var(--commandBackgroundColor);

    /* --- Branch --- */
    --branchTextColor: var(--invertedPrimaryTextColor);
    --branchBackgroundColor: #df86d7; 
    --branchInputPortBackgroundColor:  var(--domainEventBackgroundColor);
    --branchTrueOutputPortBackgroundColor: #53a32c;
    --branchFalseOutputPortBackgroundColor: #af2929;


    /* --- Delay --- */
    --delayTextColor: var(--invertedPrimaryTextColor);
    --delayBackgroundColor: #4072bd;
    --delayInputPortBackgroundColor: var(--domainEventBackgroundColor);
    --delayOutputPortBackgroundColor: var(--commandBackgroundColor);

    /* --- Query --- */
    --queryTextColor: var(--invertedPrimaryTextColor);
    --queryBackgroundColor: #6ABC8BFF;
    --queryInputPortBackgroundColor: var(--queryBackgroundColor);

    /* --- API --- */
    --apiTextColor: var(--invertedPrimaryTextColor);
    --apiBackgroundColor: #4072bd;
    --apiInputPortBackgroundColor: var(--commandBackgroundColor);
    --apiOutputPortBackgroundColor: var(--domainEventBackgroundColor);

    /* --- LLM --- */
    --llmTextColor: var(--invertedPrimaryTextColor);
    --llmBackgroundColor: #4072bd;
    --llmInputPortBackgroundColor: var(--commandBackgroundColor);
    --llmOutputPortBackgroundColor: var(--domainEventBackgroundColor);

    /* --- Webhook --- */
    --webhookTextColor: var(--invertedPrimaryTextColor);
    --webhookBackgroundColor: #edc950;
    --webhookOutputPortBackgroundColor: var(--commandBackgroundColor);
}


/* ----- Shared ----- */
.component {
    color: white;
    min-height: 10px;
    min-width: 10px;
    /*border: solid red 3px;*/

    /* --- Tailwind --- */
    /*drop-shadow-lg*/
    --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

    /*bg-white*/
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--backgroundOpacity));

    /*border*/
    border-width: 1px;
}
 
/* -- BlueprintEditor component -- */
.blueprintEditor {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "diagram";
    height: 100vh;
    margin: 0;
    padding: 0;
}

/*!* --- Blazor Diagrams --- *!*/
.diagram-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    outline: 0;
    overflow: hidden;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: none;
}

.diagram-svg-layer, .diagram-html-layer {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.html-layer, .svg-layer {
    position: absolute;
    pointer-events: none;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.diagram-node {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    pointer-events: all;
}

.diagram-node.locked {
    cursor: pointer;
}

.diagram-link {
    pointer-events: visiblePainted;
    cursor: pointer;
}

.diagram-navigator {
    z-index: 10;
}

.diagram-navigator .current-view {
    position: absolute;
    border: 2px solid #000;
}

.diagram-group {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    pointer-events: all;
}

.diagram-group .children {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.diagram-link foreignObject.diagram-link-label {
    overflow: visible;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

div.diagram-control {
    position: absolute;
}

.executable.diagram-control {
    pointer-events: all;
    cursor: pointer;
}

.default-node {
    width: 100px;
    height: 80px;
    border-radius: 10px;
    background-color: #f5f5f5;
    border: 1px solid #e8e8e8;
    -webkit-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.default-node.selected {
    border: 1px solid #6e9fd4;
}

.default-node.selected .diagram-port {
    border: 1px solid #6e9fd4;
}

.default-node .diagram-port, .default.diagram-group .diagram-port {
    width: 20px;
    height: 20px;
    margin: -10px;
    border-radius: 50%;
    background-color: #f5f5f5;
    border: 1px solid #d4d4d4;
    cursor: pointer;
    position: absolute;
}

.default-node .diagram-port:hover, .default-node .diagram-port.has-links, .default.diagram-group .diagram-port.has-links {
    background-color: #000;
}

.default-node .diagram-port.bottom, .default.diagram-group .diagram-port.bottom {
    bottom: 0;
    left: 50%;
}

.default-node .diagram-port.bottomleft, .default.diagram-group .diagram-port.bottomleft {
    bottom: 0;
    left: 0;
}

.default-node .diagram-port.bottomright, .default.diagram-group .diagram-port.bottomright {
    bottom: 0;
    right: 0;
}

.default-node .diagram-port.top, .default.diagram-group .diagram-port.top {
    top: 0;
    left: 50%;
}

.default-node .diagram-port.topleft, .default.diagram-group .diagram-port.topleft {
    top: 0;
    left: 0;
}

.default-node .diagram-port.topright, .default.diagram-group .diagram-port.topright {
    top: 0;
    right: 0;
}

.default-node .diagram-port.left, .default.diagram-group .diagram-port.left {
    left: 0;
    top: 50%;
}

.default-node .diagram-port.right, .default.diagram-group .diagram-port.right {
    right: 0;
    top: 50%;
}

.diagram-navigator.default {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: 3px solid #9ba8b0;
    border-radius: 15px;
    padding: 20px;
    background-color: #fff;
}

div.diagram-group.default {
    outline: 2px solid #000;
    background: #c6c6c6;
}

div.diagram-group.default.selected {
    outline: 2px solid #6e9fd4;
}

g.diagram-group.default rect {
    outline: 2px solid #000;
    fill: #c6c632;
}

g.diagram-group.default.selected > rect {
    outline: 2px solid #008000;
}

.diagram-link div.default-link-label {
    display: inline-block;
    color: #fff;
    background-color: #6e9fd4;
    border-radius: .25rem;
    padding: .25rem;
    text-align: center;
    font-size: .875rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-width: 3rem;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.diagram-container {
    grid-area: diagram;
    height: 100%;
}

.diagram-canvas {
    background-color: var(--diagramCanvasBackgroundColor);
}

g.diagram-link path:not(.selection-helper) /* -- Animated links -- */
{
    stroke-dasharray: 5;
    animation: dash 1.0s linear infinite;
}

@keyframes dash /* -- Animated links -- */
{
    to {
        stroke-dashoffset: -10;
    }
}


/* ---  Blazorise --- */

.modal-dialog-centered > .content {
    background-color: var(--modalBackgroundColor);
}

.b-modal {

    background-color: var(--modalOverlayBackgroundColor);

    /*position: sticky;*/
    /*left: 0;*/
    /*top: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/

    z-index: 999999;
}

.missingCrudOperationIcon
{
    color: red;
}

.highlightTitle
{
    color: red;
}