@layer kui {


/* ----~~~~ Misc/Helpers ~~~~---- */
.copyChk {
	position: relative;
	&.input { position:absolute; }
    color: transparent;
    text-shadow: none;
    transition: all .3s ease-in-out;

	&:before {
		font-family: 'kui';
		content: "\e92b" !important;
		color: lightgreen;
		font-weight: bold;
		font-size: 18px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
}

/* ----~~~~ kui: Modal ~~~~---- */
body:has(#appbar) .kui.modal.max { margin-left:25px; }
/*  The page always keeps room for its scrollbar, so hiding it while a modal is
    open no longer widens the page and shifts everything sideways. It has to be on
    html: the viewport takes scrollbar-gutter from the root only, never from body.  */
html { scrollbar-gutter: stable; }
html:has(dialog.open) { overflow: hidden; }

dialog.kui.modal.grid {
  display: grid;
  grid-template-rows: 50px auto 75px;
  height: 100%;
  .header { height: 50px; }
  .actions { height: 75px; }
}

dialog.kui.modal.resize {
	max-height: calc(100% - 100px);
	height: auto;
}

/* ---- SIZES ---- */
dialog.kui.modal {
	width: 900px;
	&.tiny { width: 570px; }
	&.small { width: 760px; }
	&.large { width:min(80%,1200px); }
	&.maxc { height: max-content; }
	&.maxh { height: 95vh; }
	&.maxw { width: 90vw; }
	&.max { height: 95vh; width: 90vw; }
	&.max .content:has(iframe) {
		height: 100%;
		overflow: hidden;
	}
	& .content.maxh { height: 100%; }
}

/*  A dialog is only visible once .open is on it - it is transparent before that
    and again while it closes. Without this it still takes clicks in both of
    those states, so a dialog left open by a race sits invisibly over the page
    and swallows every tap. Nothing you cannot see should be clickable.  */
.kui.modal:not(.open) { pointer-events: none; }
.kui.modal.open       { pointer-events: auto; }

.kui.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.75);
	margin: 0;
	opacity: 0;
	transition:
		transform 0.45s cubic-bezier(.16,1,.3,1),
		opacity 0.3s ease;
	will-change: transform, opacity;
	border-radius: 5px;
	background-color: #2f3036;
	box-shadow: 1px 3px 3px rgba(0,0,0,.2), 1px 3px 15px rgba(0,0,0,.2);
	display: flex;
	flex-direction: column;
	border: 0;
	padding: 0;
	outline: 0;
	user-select: none;
	&.hidden { display: none; }
	&.open {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
		z-index: 1001;
	}
	
	&.rise {
		transform: translate(-50%, -40%);
		opacity: 0;
		&.open {
			transform: translate(-50%, -50%);
			opacity: 1;
		}
	}

	&::backdrop {
		background: rgba(0,0,0,0);
		backdrop-filter: blur(0);
		-webkit-backdrop-filter: blur(0);
		transition: background .25s ease, backdrop-filter .25s ease;
	}
	&.open::backdrop { 
		background: rgba(0,0,0,0.45); 
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);	
	}

	&:has(a.close.cancel) .header { padding-right:50px; }
}

.kui.modal .header {
	background-color: #3a3b40;
	color: rgba(255,255,255,.8);
	border-radius: 5px 5px 0 0;
	font-size: 16px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
	letter-spacing: 0.5px;
	padding: 0 20px;
	height: 50px;
	display: flex;
	align-items: center;
	& a.kft:before { 
		transition: color .3s ease-in-out; 
	}
	& a.kft:hover:before { color:lightgreen; }


}

/*  A window taller than the screen: its content scrolls by itself between the header and the actions, which stay put.
    (The dialog shrinks the content to fit, and with overflow left visible it spilled out over the actions bar.)  */
dialog.kui.modal > .header, dialog.kui.modal > .actions { flex-shrink: 0; }
dialog.kui.modal > div.content { overflow-y: auto; overscroll-behavior: contain; }
/*  (Safari won't shrink a flex child whose height is max-content - the whole window scrolled there - so as a direct
    child the content sizes to what it holds but may shrink to fit, and its own scrollbar takes over.)  */
dialog.kui.modal > div.content { height: auto; flex: 0 1 auto; min-height: 0; }
dialog.kui.modal:has(> div.content) { overflow: hidden; }   /* such a window never scrolls itself: its content does (others keep scrolling whole) */

 dialog.kui.modal div.content,
#confirm div.cnt {
	box-sizing: border-box;
	background-color: #2f3036;
	border-top: 1px solid rgba(0,0,0,.15);
	padding: 20px 20px;
	color: var(--white);
	width: 100%;
	height: max-content;
	font-size: 14px;
	line-height: 1.4;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	&.center { 
		justify-content: center; 
		align-items: center; 
		text-wrap: balance;
        text-align: center; 
    }
	&.scrolling { overflow-y:auto; }
	&.fs16 { font-size: 16px; }
	& form { width:100%; height:100%; }
}

.kui.modal .actions {
	background-color: #2f3036;
	border-top: 1px solid #1f2024;
	align-content: center;
	padding-inline: 25px;
	height: 75px;
}

.kui.modal .kft.close {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	z-index: 1;
	&:before { transition: color .3s ease-in-out; color: gray; }
	&:hover:before { color: lightgreen; }
}

#preview_img {
	margin: 0;
	position: fixed;
	left: 50%;
	top: 50%;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	border: 5px solid #292a2f;
	border-radius: 20px;
	background-color: #2a2a2f;
	padding: 5px;
	box-shadow: 0 0 15px 2px rgb(255 255 255 / 0.48);
	width: fit-content;
	box-sizing: border-box;
	outline: none;
	scrollbar-color: transparent transparent;
	scrollbar-width: none;
	&::-webkit-scrollbar { width: 0; }
	&::-webkit-scrollbar-track { background: transparent; }
	&::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; }
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.85);
	transition: opacity 0.3s ease, transform 0.3s ease;
	&.open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	&.closing { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
	display: grid;
	&:not([open]) { display: none; }
	& .cnt {
		display: grid;
		padding: 0;
		line-height: 0;
		font-size: 0;
		border-radius: 10px;
		overflow: hidden;
	}
	& img {
		display: block;
		cursor: pointer;
		object-fit: contain;
		border: 0;
		outline: none;
	}
	&::backdrop {
		background: rgba(0,0,0,0);
		backdrop-filter: blur(0);
		-webkit-backdrop-filter: blur(0);
		transition: background .25s ease, backdrop-filter .25s ease;
	}
	&.open::backdrop {
		background: rgba(0,0,0,0.45);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}
}

/* ----~~~~ kUI - #notice ~~~~---- */

#notice {
	all: unset;
   position: fixed;
   inset: unset;
   left: 50%;
   bottom: 20px;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   gap: 10px;
   z-index: 500001;
   width: calc(100vw - 30px);
   max-width: 400px;
   height: max-content;
	&.notice-bottom .notice-item         { transform: translateY(12px);  opacity: 0; }
	&.notice-bottom .notice-item.visible { transform: translateY(0);     opacity: 1; }
	&.notice-top .notice-item            { transform: translateY(-12px); opacity: 0; }
	&.notice-top .notice-item.visible    { transform: translateY(0);     opacity: 1; }
}

.notice-item {
	pointer-events: auto;
	all: unset;
   position: relative;
   background: rgba(51,175,122,.95);
   border-radius: 6px;
   padding: 16px;
   cursor: pointer;
   overflow: hidden;
   opacity: 0;
   transform: translateY(20px) scale(.98);
   transition: transform 0.25s ease, opacity 0.25s ease;
   &.visible { opacity: 1; transform: translateY(0) scale(1); }

   &.error { background-color: rgba(228,81,89,.9); font-weight: bold; }
   &.success { background-color: rgba(51,175,122,.95); }
   &.warning { background-color: #eacc79; }
   &.warning .cnt { color: rgba(0,0,0,.9); text-shadow: none; }

   & .cnt {
   	all: unset;
      display: block;
      width: 100%;
      max-height: unset;
      min-height: unset;
      text-align: center;
      font-size: 16px;
      color: rgba(255,255,255,.95);
      text-shadow: 1px 1px 1px rgba(0,0,0,.45);
      white-space: normal;
      overflow-wrap: anywhere;
   }

   & .progress {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3px;
      background: rgba(255,255,255,.2);
      & .bar {
         width: 0%;
         height: 100%;
         background: rgba(255,255,255,.9);
         transition: none;
      }
   }

}

/* ----~~~~ kUI - Tooltips ~~~~---- */

#tooltip {
	--tooltip-background-color:#1a1a1a;
    border: none;
    outline: none;
    overflow: visible;
    inset: unset;
    position: fixed;
    z-index: 9999;
    background: transparent;
    padding: 0;
    pointer-events: none;

    &:not(:popover-open) { display: none; }
    &:popover-open { display: block; }
}

.tooltip-inner {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 6px 15px;
    font-size: 14px;
    line-height: 1.2;
    background: var(--tooltip-background-color);
    color: #fff;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    opacity: 0;
    transform: scale(.96);

    &.in { animation: tooltip-in .2s ease forwards; }
    &.out { animation: tooltip-out .2s ease forwards; }
    &::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        background: var(--tooltip-background-color);
        transform: rotate(45deg);
    }
}

@keyframes tooltip-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes tooltip-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(.96); }
}

.tooltip-inner.arrow-top::after    { top: -4px;    left: var(--arrow-left, 50%);  transform: translateX(-50%) rotate(45deg); }
.tooltip-inner.arrow-bottom::after { bottom: -4px; left: var(--arrow-left, 50%);  transform: translateX(-50%) rotate(45deg); }
.tooltip-inner.arrow-left::after   { left: -4px;   top: var(--arrow-top, 50%);    transform: translateY(-50%) rotate(45deg); }
.tooltip-inner.arrow-right::after  { right: -4px;  top: var(--arrow-top, 50%);    transform: translateY(-50%) rotate(45deg); }

/* ----~~~~ Context Menus ~~~~---- */

.ctxmenu {
	--bgr-color:#ededf0;
	--item-color:#333;
}

#ctx-menu-wrap {
    outline: none;
	&::backdrop { display: none; }
}
.ctxmenu {
    position: fixed;
    z-index: 5000;
    background-color: var(--bgr-color);
    border-radius: 10px;
    outline: none;
    min-width: max-content;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 12px 24px rgba(0, 0, 0, 0.16);
    padding: 8px;
    display: none;
    opacity: 1;
    scale: 1;
    transform-origin: top left;
    transition: opacity .25s ease, scale .25s ease;
    &.submenu.open { display: block !important; position: fixed !important; }
    &.open {
        display: block !important;
        @starting-style {
            opacity: 0;
            scale: 0.92;
        }
    }
    &.closing {
        display: block !important;
        position: fixed !important;
        opacity: 0;
        scale: 0.92;
    }
    & a {
        color: var(--item-color);
        display: block;
        height: 26px;
        line-height: 25px;
        padding-inline: 10px;
        border-radius: 3px;
        cursor: pointer;
        transition: unset;
        text-align: left;
        text-shadow: none;
        font-size: 14px;
        transition: none;
        &:hover {
            color: var(--white) !important;
            background: linear-gradient(180deg, rgba(95,186,247,1) 0%, rgba(17,141,210,1) 100%);
        }
        & i {
            margin-right: 10px;
            width: 20px;
            height: inherit;
            float: left;
        }
    }
    & .sub_div {
        border-bottom: 1px solid rgba(0,0,0,.15);
        margin-bottom: 6px;
        padding-top: 5px;
    }
}
#ctx-menu-wrap::backdrop {
    display: none;
}

/* ----~~~~ Sub Menus ~~~~---- */

/********************/
/*     Sub-Menu     */
/********************/

.submenuBtn { 
   display:flex; 
   border-radius: 5px;
   transition: all .3s ease-in-out;

   &:has(button:focus) {
      box-shadow: 0 0 0 3px var(--button-focus-border);
   }
   & button:not(.no-rad) { 
   	 border-radius: 5px 0 0 5px;
      &:focus { box-shadow: none !important; }
   }

   &.select {
		& a { 
			background-color: var(--input-background-color); 
			&:before { color: var(--input-placeholder); }
		}
   	& button {
			color: var(--input-placeholder);
			font-size: var(--input-size);
	   	text-align: left;
			background-color: var(--input-background-color);
			opacity: .87;
			padding: 0 12px;
		}
   }

   & .subToggle { 
      right:0 !important; 
      width: 38px !important;
      background-color: #292a2d;
      border-radius: 0 5px 5px 0;
      &:before {
         content: "\f0d7"; 
         color: #d9d9d9;;
         font-weight: 900;
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
      }
   }

   & .dots {
	   background-color: #333438;
  		height: 40px;
  		border-radius: 10px;
  		transition: background-color .3s ease-in-out;
  		&:hover { background-color: rgba(255,255,255,.25); }
  		&:before { 
  			font-size: 18px;
  			content: "\e97f"; 
  			top:45%;
  		}

   }
}

.submenu {
   background-color: #262626;
   border-radius: 5px;
   min-width: max-content;
	box-shadow:
	  inset 0 0 0 1px rgba(255,255,255,0.03),
	  0 8px 24px rgba(0,0,0,0.8);
	padding: 4px;
   position: absolute;
   z-index: 5000;
   display: none;

   & .sub_divider {
	   border-bottom: 1px solid rgba(255,255,255,.35);
	   margin-bottom: 6px;
	   padding-top: 5px;
	}
	& a {
	   display: block;
	   height: 38px;
	   line-height: 39px;
	   color: #d9d9d9;
	   transition: all .2s ease-in-out;
	   padding-inline: 15px;
	   border-radius: 5px;
	   text-align: left;
	   &:hover { 
	   	color: lightgreen; 
      	text-shadow: 1px 1px 1px rgba(0,0,0,.35);
      	background-color: rgba(0,0,0,.65); 
      }
	}
	& a i { 
	   margin-right: 10px; 
	   width: 20px;
	   height: inherit;
	   float: left;
	}
}

}