/*
 * Copyright (c) 2025 semedy AG. All rights reserved.
 */

* {
	padding: 0;
	margin: 0;

	&:focus {
		outline: none;
	}
}

/* default links */
a, a:visited {
    color: var(--text-color-link);
}


.ws_keep_conn{
	position: absolute;
	visibility: hidden;
	left: -9999px;
}

body {
	padding: 0;
	margin: 0 auto;
	font-family: var(--font-family-default), sans-serif;
	font-size: var(--font-size-default);
	line-height: var(--line-height-default);
    color: var(--text-color-black);
	height: 100%;
    background: #eee;
}

.password-container {
    position: relative;
    display: block;

    input {
        padding-right: 30px;
        width: 100%;
        width: -moz-available;
        width: -webkit-fill-available;
        width: fill-available;
        box-sizing: border-box;
    }

    .toggle-password {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
}

/* wrapper */
.wrapper {
    min-height: 100dvh; /* minimum height for modern browsers */
    min-width: 1000px;
    height: 100%;
    margin: 0 auto;
    background-color: var(--background-color-white-base);
    position: relative;
    display: flex;
    flex-direction: column;
}

div.header {
    --logo-column-width: 180px;
    margin: 0 0;
    padding: var(--header-padding-vertical) 0;
    height: var(--header-height);
    text-align: center;
    width: 100%;
    display: grid;
    grid-template-columns: var(--logo-column-width) 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 16px;
    grid-template-areas:
    "Logo Search Time-date"
    "Logo Search Actions";
    position: relative;
    background: var(--background-blue-linear-gradient);

    #header-logo-area {
        height: var(--header-height);
        width: auto;
        grid-area: Logo;
        float: none;

        .header-logo {
            width: var(--logo-column-width); /* need to set this to make the logo appear because it's a background image */
            height: var(--header-height);
            margin: 0 0;
            float: none;
            display: inline-block;
            background-size: 80%;
            background-position: center;
        }
    }

	.header-menubar {
		min-width: 450px;
		grid-area: Actions;
		display: flex;
	}
}

.logo {
    background: url('../images/svg/ckmslogo.svg') no-repeat scroll 6px 2px;
}


.contentarea {
    padding: var(--content-area-padding-vertical) 30px;
    background: var(--background-color-white-base);

	div.description-and-search {
		margin: 15vh auto 36px;
		text-align: center;
		max-width: 800px;
		padding: 36px 72px;
		border: 1px solid #005972;
		border-radius: 10px;
		box-shadow: 3px 3px 2px rgba(177, 194, 242, 0.75);

		h1 {
			padding: 0 0;
			margin: 4px 8px;
			color: #318DA4;
			font-size: 24px;
			line-height: 28px;
			font-weight: bold;
		}

		.mis {
			line-height: 18px;
			color: #333;
			font-weight: bold;
			text-transform: none;
			margin: 20px;
			.imp {
				text-transform: uppercase;
			}
		}

		p.search-hint {
			line-height: var(--line-height-default);
			color: #a90325;
			font-weight: bold;
			margin: 4px;
		}
	}
}

/* footer */
div.footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: var(--background-color-footer);
    box-shadow: none;
    border-top: 2px solid var(--border-color-footer);
    margin-top: auto;

    div.footer-left {
        color: var(--text-color-darkgray-carbon);
        line-height: 1.3em;
        padding: 10px 0 0 15px;
        text-align: left;

        .menu {
            float: none;
            clear: none;
            margin: 0;

            ul {
                display: inline-grid;
                list-style: none;
                margin: 0;
                padding: 0;

                .navigation-item {
                    color: var(--text-color-darkgray-carbon);
                    font-size: var(--font-size-default);
                    font-weight: unset;
                    padding: 0;
                    text-transform: none;
                    text-decoration: underline;

                }
            }
        }
    }

    div.footer-logo {
        background: url('../images/Logo.png') no-repeat center;
        height: var(--footer-logo-height);
    }

    div.footer-right {
        color: var(--text-color-darkgray-carbon);
        padding: 10px 20px 0;
        text-align: right;

        a {
            color: var(--text-color-darkgray-carbon);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    }
}

.ckms-feedbackPanel {
    .ckms-message-row {
        margin-top: 1px;
        border: 1px solid transparent;

        .ckms-message {
            padding: 4px !important;
            margin: 1px !important;
            display: flex;
            gap: 4px;
            white-space: pre-line;
            align-items: baseline;

            i.icon {
                display: inline-block;
                vertical-align: middle;
                line-height: unset;
                padding-top: 1px;
            }

            span {
                word-wrap: break-word;
                min-width: 0; /* Set min-width to 0 to prevent the text from overflow the container */
                vertical-align: middle;
            }
        }
    }

    .feedbackPanelError {
        background-color: var(--color-feedback-error);
        border: 1px solid var(--color-feedback-error);
        color: var(--text-color-white);
    }

    .feedbackPanelWarning {
        background: var(--background-color-feedback-warning);
        color: var(--text-color-black);
        border: var(--border-feedback-warning);
    }

    .feedbackPanelSuccess {
        border-color: var(--color-feedback-success);
        background: var(--color-feedback-success);
        color: var(--text-color-white);
    }

    .feedbackPanelInfo {
        border-color: var(--color-feedback-info);
        background-color: var(--color-feedback-info);
        color: var(--text-color-white);
    }
}

.ui-corner-all {
	border-radius: var(--border-radius-button-with-label);
}

.config-note {
    background-color: #fefd98;
    border: 2px solid #e1e15d;
    margin: 0 20px 10px;
    padding: 20px;

    pre {
        display: inline;
    }

    i {
        color: #828236;
        font-size: 3em;
        margin-right: 10px;
    }
}

/* feedback panel */
div.feedback.topFeedback {
    position: fixed;
    z-index: 100;
    top: 0;
    width: 100%;
    margin: 0 auto;

    background-color: #FFF1A6;
    border: none;
    padding: 0;
    .feedbackPanel {
        li {
            /* The cursor: pointer is there to tell the user that they can click anywhere on the banner to close. */
            padding: 8px 16px;
            cursor: pointer;

            span {
                display: grid;
                grid-template-columns: auto max-content;
                gap: 1em;
                align-items: baseline;
                font-size: 14px;
            }

            /*
             KP-8329
             Pseudo element to create the x "button"
             Only apply to the first child warning banner, because when we display more than one banner, if user click on one banner, all banners will disappear
             So having more than one x "button" will be misleading
             The x button is to tell the user that the banner is closable.
            */
            &:first-child span::after {
                content: "\2715"; /* ASCII code for the X letter */
                box-sizing: border-box;
                height: 20px;
                aspect-ratio: 1/1;
                display: inline-flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

.feedback {
    padding: 4px 5px;

    .feedbackPanelWARNING {
        background-color: var(--background-color-feedback-warning);
        color: #232323;
        border: var(--border-feedback-warning);
    }

    .feedbackPanelERROR {
        background-color: var(--color-feedback-error);
        color: var(--text-color-white);
    }

    .feedbackPanelINFO {
        background-color: #6EC0FF;
    }

    .feedbackPanelSUCCESS {
        background-color: #026738;
        color: #e2fff2;
    }
}