@layer kform {

form.kui {
	--input-height:40px;
	--textarea-line-height:24px; 

  --input-placeholder: rgba(191,191,191,.87);
	--input-color:var(--white);
	--input-disabled:#77777b;
	--input-size:16px;
	--input-hover:rgba(73, 161, 100, 1);
	--input-background-color: #262626;
  --input-border:#262626;
	--border-focus:rgba(79, 126, 230, 1);

	--error-color: #e7bdbc;
	--error-border: #a5393b;

	--label-color: #7b7b7f;

	--selection-background:rgba(79, 126, 230, .8);
	--selection-color:var(--white);
	--hr-border:var(255,255,255,.15);


	&.light {
		--input-placeholder: rgba(191,191,191,.87);
		--input-color:var(--darkgray);
		--input-hover:rgba(73, 161, 100, 1);
		--input-background-color: rgba(255,255,255,.8);
  	--input-border:rgba(218, 218, 219, 1.00);

		--error-color: #e7bdbc;
		--error-border: #a5393b;
		--hr-border:var(0,0,0,.15);

		--label-color: var(--darkgray);

		--selection-background:silver;
		--selection-color:var(--input-color);

	}
}
/*  Autofilled inputs keep the form's own colors instead of the browser's white/yellow.
    One selector per rule: a selector a browser doesn't know (-moz- in Safari/Chrome,
    -webkit- in old Firefox) makes it drop the WHOLE rule - the old combined list never
    applied anywhere. The long transition stops the browser repainting its own background. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
	filter: none !important;
	box-shadow: 0 0 0 1000px var(--input-background-color) inset !important;
	-webkit-text-fill-color: var(--input-color) !important;
	caret-color: var(--input-color);
	transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill {
	filter: none !important;
	box-shadow: 0 0 0 1000px var(--input-background-color) inset !important;
	-webkit-text-fill-color: var(--input-color) !important;
}

.mobile form.kui .fields.mcol {
	flex-direction: column;
  margin-block: 20px;
}

form.kui {
	--field-gap: 14px;

	& .fields {
		display: flex;
		flex-wrap: wrap;
		gap: var(--field-gap);
		justify-content: space-between;

		&.left { justify-content: flex-start; }

		--cols: 16;

		&.two      { --cols: 2; }
		&.three    { --cols: 3; }
		&.four     { --cols: 4; }
		&.five     { --cols: 5; }
		&.six      { --cols: 6; }
		&.seven    { --cols: 7; }
		&.eight    { --cols: 8; }
		&.nine     { --cols: 9; }
		&.ten      { --cols: 10; }
		&.eleven   { --cols: 11; }
		&.twelve   { --cols: 12; }
		&.thirteen { --cols: 13; }
		&.fourteen { --cols: 14; }
		&.fifteen  { --cols: 15; }
		&.sixteen  { --cols: 16; }

		& > .field,
		& > .fields {
			flex: 0 0 calc(
				((100% - (var(--cols) - 1) * var(--field-gap)) / var(--cols)) * var(--span)
				+ (var(--span) - 1) * var(--field-gap));
		}

		& > .field.max,
		& > .field[data-type=checkbox],
		& > .field[class^="w"],
		& > .field[class*=" w"],
		& > .fields[class^="w"],
		& > .fields[class*=" w"],
		& > .field[style*="width"],
		& > .fields[style*="width"] {
			flex: 0 0 auto;
			width: max-content;
		}

		&.nomar .field { margin-bottom: 0; }

	}

	.field,
	.fields {
		position: relative;
		max-width: 100%;
		min-width: 0;

		--span: 1;
		&.two      { --span: 2; }
		&.three    { --span: 3; }
		&.four     { --span: 4; }
		&.five     { --span: 5; }
		&.six      { --span: 6; }
		&.seven    { --span: 7; }
		&.eight    { --span: 8; }
		&.nine     { --span: 9; }
		&.ten      { --span: 10; }
		&.eleven   { --span: 11; }
		&.twelve   { --span: 12; }
		&.thirteen { --span: 13; }
		&.fourteen { --span: 14; }
		&.fifteen  { --span: 15; }
		&.sixteen  { --span: 16; }

	}

	.field {
		margin-bottom:14px;
		&.nomar { margin-bottom: 0; }
		&.max { width:max-content }
		&.tac input[type=text] { text-align:center; }

	}
}

form.kui  {

	label {
		font-weight: normal;
		text-transform: uppercase !important;
		font-size: 11px;
		margin: 0 8px 8px 10px;
		color:var(--label-color);
		display: block;
	}

	.field:has(.input.kft:nth-of-type(1)) input { padding-right: 50px; }
	.field:has(.input.kft:nth-of-type(2)) input { padding-right: 80px; }
	.field:has(.input.kft:nth-of-type(3)) input { padding-right: 110px; }
	.field:has(.input.kft:nth-of-type(4)) input { padding-right: 130px; }
	.field:has(.input.kft:nth-of-type(5)) input { padding-right: 160px; }
	.field:has(.input.kft:nth-of-type(6)) input { padding-right: 190px; }

	.field[data-type=checkbox] {
		display: flex;
		align-items: center;
		margin-bottom: 0;
	}

	input:not([type=radio]):not([type=checkbox]) {
        height: var(--input-height);
        line-height: var(--input-height);
        box-sizing: border-box;
        border: 2px solid var(--input-border);
        color: var(--input-color);
        width: 100%;
        font-size: var(--input-size);
        border-radius: 5px;
        transition: border-color .2s ease-in-out;
        background-color: var(--input-background-color);
        padding: 0 12px;
        outline: none;
        white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
        &:not([disabled]):hover, 
        &:focus { border-color:var(--border-focus); }
        &::selection { background:var(--selection-background); color:var(--selection-color); }
        &[disabled] { color:var(--input-disabled); }
   }

	::placeholder { color: var(--input-placeholder); opacity: .87; }

	textarea {
		box-sizing: border-box;
		border: 2px solid var(--input-border);
		color: var(--input-color);
		width: 100%;
		font-size: var(--input-size);
		line-height: var(--textarea-line-height);
		border-radius: 5px;
		transition: border-color .2s ease-in-out;
		background-color: var(--input-background-color);
		padding: 12px;
		outline: none;
		&:hover, &:focus { border-color:var(--border-focus); }
		&::selection { background:var(--selection-background); color:var(--selection-color); }
		font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
		scrollbar-color: rgba(255,255,255,.12) transparent;
		::-webkit-scrollbar-track { background: transparent; }
		::-webkit-scrollbar-thumb {
			background-color: rgba(255,255,255,.12);
			border-radius: 8px;
			border: 2px solid transparent;
		}
   }

	.text_area_count {
		width: max-content;
		height: 30px;
		position: absolute;
		bottom: 10px;
		right: 40px;
		background-color: rgba(255,255,255,.1);
		border-radius: 5px;
		color: white;
		display: flex;
		align-items: center;
		padding-inline: 10px;
		opacity: 0;
		&.open { opacity:1; }
	}


  & .field.error { 
  	input,textarea { border-color: var(--error-border); } 	
  	label.checkbox { --c-background: var(--error-border); }
  }

	& div.hr {
		border-top: 1px solid var(--hr-border) !important;
		height: 1px;
		width: 100%;
		margin-block: 10px 20px;
	}

}


.field a.input.kft {
   color:#9d9d9d !important;
   transition: color .3s ease-in-out;
   &:hover { color:lightgreen; }

   width: 30px;
   height: 40px;
   position: absolute;
   font-size: 14px;
   bottom: 0;
   right:14px;
}
.field:not(:has(label)) a.input.kft { top:0; }

.field { --start-from: 0px; }
.field[data-type=text-uploader] { --start-from: 60px; }

.field > :nth-child(1 of a.input.kft) { right: calc(var(--start-from) + 14px); }
.field > :nth-child(2 of a.input.kft) { right: calc(var(--start-from) + 44px); }
.field > :nth-child(3 of a.input.kft) { right: calc(var(--start-from) + 78px); }
.field > :nth-child(4 of a.input.kft) { right: calc(var(--start-from) + 112px); }
.field > :nth-child(5 of a.input.kft) { right: calc(var(--start-from) + 146px); }
.field > :nth-child(6 of a.input.kft) { right: calc(var(--start-from) + 180px); }
.field > :nth-child(7 of a.input.kft) { right: calc(var(--start-from) + 214px); }




/* +30px per Pos. */
.field a.input.kft.pos2 { right:44px; }
.field a.input.kft.pos3 { right:74px; } 
.field a.input.kft.pos4 { right:104px; }
@media (hover: hover) { 
   .field .kft:hover { color:lightgreen; } 
   form.light .field .kft:hover { color:var(--blue); } 
}

.field .kft.static { position:relative; right:unset; bottom:unset; }
.field .kft.pos2 { right:44px; }
.field .kft.pos3 { right:74px; } 
.field .kft.pos4 { right:104px; }
@media (hover: hover) { 
   .field .kft:hover { color:lightgreen; } 
   form.light .field .kft:hover { color:var(--blue); } 
}


/* ----~~~~ Trumbowyg Editor ~~~~---- */

.field.h100 .trumbowyg-box { height:100%; }
.trumbowyg-editor-box { background: white; color: #333; border-radius:10px; scrollbar-color: rgba(0,0,0,.2) transparent; }
.h100 .trumbowyg-box { height:100%; }
.trumbowyg-box { border-radius:10px; background:white; min-height: unset !important; height:calc(100% - 44px); overflow: hidden; }
.trumbowyg-button-pane { border-radius:10px 10px 0 0; }
.trumbowyg textarea { scrollbar-color: rgba(0,0,0,.2) transparent; display:none; }
.trumbowyg textarea::selection { background: rgba(255,255,255,.25) !important; color: white !important; }
#trumbowyg-icons { display:none; }
.trumbowyg-editor-box :is(p, h1, h2, h3, h4, h5, h6) { user-select:text !important; color: #333 !important; }
.trumbowyg-editor-box a { color:var(--blue); }
.field[data-type=textedit] .trumbowyg-editor img, .trumbowyg-editor video { height: revert-layer; }
/* Beautify (js/core/trumbowyg.beautify.js) is for the code view only */
.trumbowyg-editor-visible .trumbowyg-beautify-button { display:none !important; } /* !important: this file is layered, Trumbowyg's css isn't */
/* A double-click opens Image Details (js/core/trumbowyg.kui.js) - Trumbowyg's own css gives images the move cursor */
.trumbowyg-editor img { cursor:zoom-in !important; }

/* ----~~~~ Text Expand ~~~~---- */

dialog .content:has(.text_expand) { height:100% !important; }

form.text_expand {
  height:100%;
  /* The window has a fixed height here, so the panels get the space under the tabs and each
     scrolls inside it - a tall tab (Groups) can't stretch the stacked panel row in /css/admin/ux.css
     past the window anymore. The definite row also lets the editor's percentages resolve the same
     in Firefox as in Chrome. */
  & .ux-panels { height:100%; grid-template-rows: auto minmax(0, 1fr); }
  & .ux-panels > .panel { height:auto; min-height:0; overflow-y:auto; }
  /* Groups: the two lists take what the fields under them leave, and only the lists scroll */
  & .ux-panels > .panel:has(> .ux-box) {
      display: flex !important;
      flex-direction: column;
      & > .ux-box { flex: 1 1 0; min-height: 0; height: auto; }
  }
  & .panel.text_expand {
      /* !important to beat the stacked panels' display:block !important in /css/admin/ux.css -
         without it this was never a flex column, and the editor sized to its content */
      display: flex !important;
      flex-direction: column;

      & .field[data-name="html"] {
        flex: 1 1 0;
        min-height: 0;
        height: auto !important;
      }
      & .field[data-name="html"] .trumbowyg-box {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      /* The code view swaps the editor box for the textarea - both fill the editor. Only while
         it's showing: in the visual view Trumbowyg keeps the textarea in the flow at 1px. */
      & .field[data-name="html"] :is(.trumbowyg-editor-box, .trumbowyg-editor-hidden .trumbowyg-textarea) {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
      }
      & .field[data-name="html"] .trumbowyg-editor-hidden .trumbowyg-textarea { height: auto !important; resize: none; }
      & .field[data-name="html"] .trumbowyg-editor {
        height: 100%;
        box-sizing: border-box;
      }
  }
}


/* ----~~~~ Mobile - One Field Per Row ~~~~---- */
/*  Every .fields group collapses to a single column on mobile, whatever
    its column class says (.two, .three, .four ...). It works by forcing
    --cols to 1, so the existing flex-basis math still does the sizing.
    Fields with their own width (.max, w-classes, checkboxes, inline
    styles) keep it -- they're excluded from that math already.
    Add .mrow to a group to keep it side-by-side on mobile.  */

body.mobile form.kui .fields:not(.mrow) {
	--cols: 1;
	& > .field { margin-bottom: 0; } /* the container gap spaces them now */
}

} /* @layer */
/* Color field (system.color_pick): the hex box with its color on the right (over a checkerboard, for transparency),
   the browser's color picker hidden under the swatch (where it opens), the opacity slider below */
.field[data-type=color] .color-pick { position: relative; cursor: pointer; }
.field[data-type=color] .color-pick input[type=text] { width: 100%; padding-right: 70px; cursor: pointer; }
.field[data-type=color] { --start-from: 22px; }	/* the clear x sits left of the swatch */
.field[data-type=color]:not(:has(.color-pick.has-value)) > a.input.kft.x { display: none; }
.field[data-type=color] .cp-swatch { position: absolute; top: 50%; right: 6px; width: 27px; height: 20px; translate: 0 -50%; border-radius: 5px; overflow: hidden; pointer-events: none;
	background: repeating-conic-gradient(#bbb 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.field[data-type=color] .cp-swatch i { display: block; width: 100%; height: 100%; }
.field[data-type=color] .color-pick:not(.has-value) .cp-swatch { background: rgba(255,255,255,.06); }	/* no color: a faint box, just off the input's own */
.field[data-type=color] .cp-native { position: absolute; right: 6px; bottom: 0; width: 27px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* The color popover (system.color_popover), drawn like Safari's color picker: a dark rounded panel with an arrow up
   to the field, a row of colors, a row of greys ("none" first, crossed out), the color grid, opacity, Show Colors... */
#cp-pop { position: fixed; inset: auto; margin: 0; overflow: visible; width: 236px; padding: 12px; box-sizing: border-box; border-radius: 16px;
	background: #2b2c36; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 40px rgba(0,0,0,.45); color: #fff; font: 13px -apple-system, system-ui, sans-serif; }
#cp-pop::before { content: ''; position: absolute; top: -7px; left: var(--cp-arrow, 50%); width: 12px; height: 12px; rotate: 45deg;
	background: #2b2c36; border-left: 1px solid rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); }
#cp-pop .cp-row, #cp-pop .cp-grid { display: grid; grid-template-columns: repeat(12, 1fr); overflow: hidden; border-radius: 4px; }
#cp-pop .cp-row + .cp-row { margin-top: 10px; }
#cp-pop .cp-grid { margin-top: 10px; }
#cp-pop .cp-cell { display: block; aspect-ratio: 1; cursor: pointer; position: relative; }
#cp-pop .cp-cell:hover, #cp-pop .cp-cell.on { z-index: 1; outline: 2px solid #fff; outline-offset: -1px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
#cp-pop .cp-none { background: #fff !important; }
#cp-pop .cp-none::after { content: ''; position: absolute; left: 15%; right: 15%; top: 50%; height: 2px; background: #e5312b; rotate: -45deg; }
#cp-pop .cp-opacity { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
#cp-pop .cp-opacity input { flex: 1; min-width: 0; accent-color: #fff; cursor: pointer; }
#cp-pop .cp-opacity span { flex: none; width: 36px; text-align: right; font-variant-numeric: tabular-nums; opacity: .8; }
#cp-pop .cp-saved-label { display: flex; align-items: center; gap: 4px; margin: 12px 0 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
#cp-pop .cp-saved { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
#cp-pop .cp-saved .cp-cell { border-radius: 3px; overflow: visible; background: repeating-conic-gradient(#bbb 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
#cp-pop .cp-saved .cp-cell i { position: absolute; inset: 0; border-radius: 3px; }
#cp-pop .cp-saved-label span { flex: 1; opacity: .6; }
#cp-pop .cp-add, #cp-pop .cp-del { width: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); font-size: 10px; line-height: 1; }
#cp-pop .cp-saved-label .kft::before { min-height: 0; }	/* kft's 16px min-height sat the small glyph high */
#cp-pop .cp-add:hover, #cp-pop .cp-del:hover { background: rgba(255,255,255,.24); outline: none; box-shadow: none; }
#cp-pop .cp-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
#cp-pop .cp-actions button { padding: 3px 12px; border: 0; border-radius: 6px; background: rgba(255,255,255,.16); color: #fff; font: inherit; cursor: pointer; }
#cp-pop .cp-actions button:hover { background: rgba(255,255,255,.26); }

/* Color scheme (form_field color_scheme): the select, its Add / Update / Delete buttons beside it */
.cs-wrap { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.cs-wrap > .field { flex: 1; min-width: 0; margin-bottom: 0; }
.cs-wrap .cs-btns { display: flex; gap: 6px; flex: none; }
.cs-wrap .cs-btns .btn { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; }