/** Datei: plugins/rest/assets.OLD/scss/layout/_table.scss **/
@import "../mixins.scss";

.cursor--pointer { cursor : pointer; };

.table {
	
	$table-padding			: 5px;
	
	$table-gap-small						: 10px !default;
	$table-gap-default						: 15px !default;
	$table-gap-wide							: 20px !default;
	
	$table-font-family						: sans-serif !default;
	$table-border-radius					: 0 !default;
	$table-border-spacing					: 0 !default;
	
	$table-header-font-family				: $table-font-family !default;
	$table-header-border-width				: 0 1px 1px 0 !default;
	$table-header-bg-color					: get_color_tone( content, 400 ) !default;
	$table-header-bg-color-hover			: get_color_tone( content, 500 ) !default;
	$table-header-bg-color-active			: get_color_tone( content, 400, primary ) !default;
	$table-header-bg-color-active-hover		: get_color_tone( content, 500, primary ) !default;
	
	$table-header-border-color				: get_color_tone( border, 400 ) !default;
	$table-header-border-color-hover		: $table-header-border-color !default;
	$table-header-border-color-active		: get_color_tone( content, 500, primary ) !default;
	$table-header-border-color-active-hover	: $table-header-border-color-active !default;
	
	$table-cell-font-family					: $table-header-font-family !default;
	$table-cell-border-width				: $table-header-border-width !default;
	$table-cell-border-color				: get_color( border ) !default;
	$table-cell-bg-color-hover				: $table-header-bg-color-hover !default;
	$table-cell-border-color-hover			: $table-header-border-color !default;
	
	$table-row-bg-color						: get_color_tone( content, 100 ) !default;
	$table-row-bg-color-even				: get_color_tone( content, 200 ) !default;
	$table-row-bg-color-hover				: get_color_tone( content, 300, primary ) !default;
	$table-row-bg-color-hover-even			: get_color_tone( content, 400, primary ) !default;
	$table-row-bg-color-active-hover		: get_color_tone( content, 300, secondary ) !default;
	$table-row-bg-color-active-hover-even	: get_color_tone( content, 400, secondary ) !default;
	
	$table-row-bg-color-success-even				: get_color_tone( content, 200, success ) !default;
	$table-row-bg-color-success-hover-even			: get_color_tone( content, 300, success ) !default;
	$table-row-bg-color-success-active-hover-even	: get_color_tone( content, 400, success ) !default;
	
	$table-row-bg-color-danger-even					: get_color_tone( content, 200, danger ) !default;
	$table-row-bg-color-danger-hover-even			: get_color_tone( content, 300, danger ) !default;
	$table-row-bg-color-danger-active-hover-even	: get_color_tone( content, 400, danger ) !default;
	
	width: 100%;
	font-family: #{$table-font-family};
	
	@if( $table-border-spacing == 0 ) {
		border-collapse: collapse;
		border: 1px solid #{get_color( border )};
	}
	@else {
		border-spacing: #{$table-border-spacing};
		border-collapse: separate;
	}
	
	&__ {
		&container {
			display: flex;
			flex-direction: column;
			gap: #{$table-gap-wide};
			grid-column: 1/-1;
		}
		
		&toolbar {
			display: grid;
			grid-template-areas: 'search buttons';
			grid-template-rows: 2rem;
			gap: #{$table-border-spacing};
		}
		
		&search {
			flex: 1;
			display: flex;
			gap: #{$table-border-spacing};
			grid-area: search;
			
			&__input {
				max-width: 250px;
				padding: 0.35rem;
				border: 1px solid #{get_color( border )};
				border-radius: #{$table-border-radius};
				font-size: 0.9rem;
				min-height: 2rem;
				outline: none;
				
				&:hover {
					border-color: #{get_color_hover(primary)};
					box-shadow: 0 0 5px #{get_color(primary, 0.5)};
					outline: none;
				}
				
				&:focus {
					border-color: #{get_color(primary)};
					box-shadow: 0 0 5px #{get_color(primary, 0.5)};
					outline: none;
				}
			}
		}
		
		&buttons {
			display: flex;
			gap: #{$table-border-spacing};
			grid-area: buttons;
			justify-content: end;
			height: 100%;
		}
		
		&body {
			&__ {
				&row {
					@include transition( 'background-color' );
					
					&:nth-child(odd) {
						background-color: #{$table-row-bg-color};
						
						&.js--click-bound:hover {
							background-color: #{$table-row-bg-color-hover};
						}
						
						.js--click-ownbound:hover {
							background-color: #{$table-row-bg-color-active-hover};
						}
					}
					
					&:nth-child(even) {
						background-color: #{$table-row-bg-color-even};
						
						&.js--click-bound:hover {
							background-color: #{$table-row-bg-color-hover-even};
						}
						
						.js--click-ownbound:hover {
							background-color: #{$table-row-bg-color-active-hover-even};
						}
					}
					
					&--failed {
						background-color: #{get_color_tone(content, 100, danger)} !important;
						
						&.js--click-bound:hover {
							background-color: #{get_color_tone(content, 200, danger)} !important;
						}
						
						&.js--click-ownbound:hover {
							background-color: #{get_color_tone(content, 200, danger)} !important;
						}
					}
					
					&--failed {
						background-color: #{$table-row-bg-color-danger-even} !important;
						
						&.js--click-bound:hover {
							background-color: #{$table-row-bg-color-danger-hover-even} !important;
						}
						
						.js--click-ownbound:hover {
							background-color: #{$table-row-bg-color-danger-active-hover-even} !important;
						}
					}
					
					&--updated {
						background-color: #{$table-row-bg-color-success-even} !important;
						
						&.js--click-bound:hover {
							background-color: #{$table-row-bg-color-success-hover-even} !important;
						}
						
						.js--click-ownbound:hover {
							background-color: #{$table-row-bg-color-success-active-hover-even} !important;
						}
					}
					
				}
			}
		}
		
		&cell {
			padding: 0.3rem 0.5rem;
			height: 42px; // Grundhöhe
			vertical-align: middle;
			text-align: left;
			border-style: solid;
			border-color: #{$table-cell-border-color};
			border-width: #{$table-cell-border-width};
			
			.icon:not(.button__icon) {
				margin-right: #{$table-gap-small};
			}
			
			&__ {
				&inner {
					$table-cell-inner: & !global;
					height: 100%;
					
					&__ {
						&text {
							flex: 1 0 auto;
							display: flex;
							align-items: center;
						}
					}
				}
			}
			
			&:is( .table__body__cell ) {
				padding: 0.3rem;
				
				> #{$table-cell-inner} {
					gap: 0.3rem;
					display: flex;
					justify-content: end;
				}
			}
			
			&--type {
				&-email {
					a {
						color: inherit;
					}
				}
				
				&-text {
				}
				
				&-amount {
					$table-cell-type-amount: & !global;
					text-align: right;
				}
				
				&-actions {
					text-align: right;
				}
				
				&-icon,
				&-status {
					width: 42px;
					min-width: 42px;
					text-align: center;
					padding: 0;
					
					&-icon {
						max-width: 42px;
					}
					
					.icon {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 28px;
						height: 28px;
						font-size: 1.4rem;
						border-radius: 50%;
						margin: auto !important;
					}
				}
			}
		}
		
		&header {
			&__ {
				&cell {
					background-color: #{$table-header-bg-color};
					border-color: #{$table-header-border-color};
					border-width: #{$table-header-border-width};
					font-weight: bold;
					text-transform: uppercase;
					
					&.sortable {
						position: relative;
						cursor: pointer;
						padding-right: 1.2rem;
						
						&::after {
							content: "▲▼";
							position: absolute;
							font-size: 0.8rem;
							opacity: 0.5;
							right: 0.5rem;
						}
						
						&:hover {
							background-color: #{$table-header-bg-color-hover};
							border-color: #{$table-header-border-color-hover};
						}
						
						&#{$table-cell-type-amount} {
							padding-right: 0.5rem;
							padding-left: 1.2rem;
							
							&::after {
								right: auto;
								left: 0.5rem;
							}
						}
						
						&.sorting--asc::after {
							content: "▲";
						}
						
						&.sorting--desc::after {
							content: "▼";
						}
						
						&.sorting--current {
							background-color: #{$table-header-bg-color-active};
							border-color: #{$table-header-border-color-active};
							font-weight: bold;
							
							&:hover {
								background-color: #{$table-header-bg-color-active-hover};
								border-color: #{$table-header-border-color-active-hover};
							}
							
		//					@include highlightBorder();
						}
					}
				}
			}
		}
	}
}

/** Datei: plugins/rest/assets.OLD/scss/layout/_form.scss **/
.form {
	
	$form-padding			: 5px;
	$form-font-size-label	: 8px;
	$form-control-padding	: $form-padding;
	$form-checked-size		: 16px;
	$form-checked-inner		: 10px;
	
	$tabs-gap-tiny							: 5px !default;;
	$form-gap-small							: 10px !default;
	$form-gap-default						: 15px !default;
	$form-gap-wide							: 20px !default;
	
	$form-icon-font-family					: bootstrap-icons !default;
	$form-border-radius						: 0 !default;
	
	
	font-size: 1rem;
	
	&__ {
		
		&container {
			display: flex;
			flex-direction: column;
			gap: $form-gap-default;
			
			> * {
				margin: 0;
			}
		}
	
		&fieldset {
			display: flex;
			flex-direction: column;
			gap: #{$form-gap-wide};
			
			padding: 0;
			border: 0;
			
			&.has-legend {
				flex: 1 1 20%;
				background-color: #{get_color( white )};
				padding: #{$form-gap-wide} 0 0;
				
				&.has-border {
					padding: #{$form-gap-wide};
					border: 1px solid #{get_color( border  )};
					border-radius: #{$form-border-radius};
				}
			}
		}
		
		&legend {
			font-weight: 600;
			font-size: 1.17em;
			color: #{get_color(black)};
		}
		
		&info {
			font-size: #{$form-font-size-label};
			padding: #{$form-padding};
			
			position: absolute;
			display: none;
			flex-direction: row-reverse;
			align-items: start;
			gap: #{$form-padding};
			top: 0;
			right: 0;
			
			&-- {
				&required {
					$form-info-required: & !global;
					
					color: get_color( danger );
				}
				
				&feedback {
					$form-info-feedback: & !global;
					
					&::before {
						font-size: #{$form-font-size-label *1.5};
						font-family: #{$icon-font-family};
						translate: 0 -#{$form-font-size-label * 0.5 / 2};
					}
				}
			}
		}
		
		&control {
			$form-control: & !global;
			
			display: flex;
			align-items: center;
			position: relative;
			
			&:is( input, select, textarea, .is-fake-control ) {
				position: relative;
				font-size: 1em;
				border-radius: #{$form-border-radius};
				border: 0;
				outline: 0;
				
				padding: #{$form-control-padding};
				transition: border-color 0.3s, box-shadow 0.3s;
				background: transparent;
				width: 100%;
				font-family: inherit;
			}
			
			&:is( pre ) {
				margin: 0;
			}
			
			&__{
				&group {
					display: flex;
					flex-direction: column;
					gap: #{$form-control-padding};
				}
				
				&icon {
					margin-right: #{$form-gap-small};
				}
				
				&label {
					display: block;
					width: 100%;
					padding: #{$form-control-padding};
					padding-left: #{$form-checked-size + $form-control-padding * 3};
					position: relative;
					
					
					&:has( input[type=radio] ) {
						&::after,
						&::before {
							border-radius: 50%;
						}
					}
					
					&::before {
						content: "";
						display: inline-block;
						aspect-ratio: 1;
						height: #{$form-checked-size};
						border: 1px solid get_color( border  );
						margin-right: 0.5em;
						position: absolute;
						top: #{$form-control-padding};
						left: #{$form-control-padding};
					}
					
					&:has( input:checked ) {
						&::after {
							content: '';
							aspect-ratio: 1;
							display: block;
							top: #{$form-control-padding + $form-checked-size / 2 - $form-checked-inner / 2};
							left: #{$form-control-padding + $form-checked-size / 2 - $form-checked-inner / 2};
							position: absolute;
							
							background-color: #{get_color_hover(primary)};
							
							height: #{$form-checked-inner};
						}
					}
					
					&:hover {
						&::before {
							border-color: #{get_color_hover(primary)};
							box-shadow: 0 0 5px #{get_color(primary, 0.5)};
							outline: none;
						}
					}
				}
			}
			
			&-- {
				@mixin form-control-icon {
					font-family: #{$form-icon-font-family};
					position: absolute;
					right: #{$form-padding};
					top: #{$form-padding + $form-padding + $form-font-size-label};
					bottom: #{$form-padding};
					aspect-ratio: 1;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				&progress {
					.progress {
						&__ {
							&wrapper {
								position: relative;
								height: 17px;
								font-size: 0.8rem;
								margin: #{$form-control-padding};
								overflow: hidden;
								border-radius: #{$form-border-radius};
								background-color: #{get_color( border )};
							}
							
							&bar,
							&label {
								position: absolute;
								top: 0;
								left: 0;
								height: 100%;
							}
							
							&bar {
								background-color: var( --progress-color, #{get_color( primary )} );
								transition: background-color 300ms ease-in-out,
									width 500ms cubic-bezier(.4,0,.2,1),
							}
							
							&label {
								color: #{get_color( white )};
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: center;;
							}
						}
					}
				}
				
				&radio,
				&checkbox {
//					border-color: transparent !important;
					box-shadow: none !important;
					
					flex-direction: column;
					width: 100%;
					
					input {
						visibility: hidden;
						position: fixed;
						top: 100vh;
						left: 100vw;
					}
				}
				
				&file {
					cursor: pointer;
					
					input {
						position: absolute !important;
						visibility: hidden;
					}
					
					&::after {
						content: '\F3D1';
						@include form-control-icon;
					}
				}
				
				&textarea {
					textarea {
						height: calc( 2em + var( --lines, 2 ) * ( 2.8125em + #{$form-gap-wide} ) );
						height: calc( ( var(--lines) * #{$form-gap-wide} ) + ( 45px * var(--lines) ) + 1.625em )
					}
				}
				
				&select {
					
					select {
						appearance: none;
					}
					
					&::after {
						content: '\F229';
						@include form-control-icon;
					}
				}
			}
		}
		
		&group {
			display: flex;
			flex-direction: column;
			position: relative;
			border: 1px solid #{get_color(border)};
			
			> label {
				font-weight: 500;
				color: #{get_color(text)};
				font-size: #{$form-font-size-label};
				padding: #{$form-padding} #{$form-padding} 0;
			}
			
			&:hover {
				border-color: #{get_color_hover(primary)};
				box-shadow: 0 0 5px #{get_color(primary, 0.5)};
				outline: none;
			}
			
			&.has-focus {
				border-color: #{get_color(primary)};
				box-shadow: 0 0 5px #{get_color(primary, 0.5)};
				outline: none;
			}
			
			&.is-required {
				#{$form-info-required} {
					display: flex;
				}
			}
			
			&.is-valid,
			&.is-invalid,
			&.on-validate {
				#{$form-info-required} {
					display: none;
				}
				
				#{$form-info-feedback} {
					display: flex;
				}
			}
			
			&.is-valid {
				border-color: #{get_color(success)};
				background-color: #{get_color(success, 0.05)};
				
				&:hover {
					box-shadow: 0 0 5px #{get_color(success, 0.5)};
				}
				
				#{$form-info-feedback} {
					color: #{get_color(success)};
					
					&::before {
						content: '\F26A';
					}
				}
			}
			
			&.is-invalid {
				border-color: #{get_color(danger)};
				background-color: #{get_color(danger, 0.05)};
				
				&:hover {
					box-shadow: 0 0 5px #{get_color(danger, 0.5)};
				}
				
				#{$form-info-feedback} {
					color: #{get_color(danger)};
					
					&::before {
						content: '\F622';
					}
				}
			}
			
			&.on-validate {
				border-color: #{get_color(warning)};
				background-color: #{get_color(warning, 0.05)};
				
				&:hover {
					box-shadow: 0 0 5px #{get_color(warning, 0.5)};
				}
				
				#{$form-info-feedback} {
					color: #{get_color(warning)};
					
					&::before {
						content: '\F3E2';
						
						animation-name: animate-rotate;
						animation-duration: 3s;
						animation-iteration-count: infinite;
						animation-timing-function: linear;
					}
				}
			}
		}
		
		&buttons {
			display: flex;
			justify-content: end;
			gap: $form-gap-default;
		}
		
		&actions {
			display: flex;
			justify-content: flex-end;
			gap: 0.75rem;
			
			.action-button {
				padding: 0.75rem 1.5rem;
				font-size: 1rem;
				border-radius: #{$form-border-radius};
				cursor: pointer;
				border: none;
				transition: background-color 0.3s, transform 0.2s;
				
				&.primary {
					background-color: #{get_color(primary)};
					color: #{get_color(white)};
					
					&:hover {
						background-color: #{get_color_hover(primary)};
						transform: scale(1.05);
					}
					
					&:active {
						transform: scale(0.95);
					}
				}
				
				&.secondary {
					background-color: #{get_color(secondary)};
					color: #{get_color(white)};
					
					&:hover {
						background-color: #{get_color_hover(secondary)};
						transform: scale(1.05);
					}
					
					&:active {
						transform: scale(0.95);
					}
				}
			}
		}
	}
}

/** Datei: plugins/rest/assets.OLD/scss/layout/_tabs.scss **/
.tabs {
    $tabs-gap-tiny							: 5px !default;
    $tabs-gap-small							: 10px !default;
    $tabs-gap-default						: 15px !default;
    $tabs-gap-wide							: 20px !default;
    
    $tabs-icon-font-family					: bootstrap-icons !default;
    $tabs-border-radius						: 0 !default;
    
    display: flex;
    flex-direction: column;
    gap: #{$tabs-gap-wide};
    width: 100%;
    
    .headline,
    .paragraph {
        grid-column: 1/-1;
    }

    &__ {
        &list {
            display: flex;
            list-style: none;
            gap: #{$tabs-gap-tiny};
            padding: 0;
            margin: 0;
            border-bottom: 2px solid #{getCoreColor( gray )};
        }
        
        &item {
            padding: 0.2em 0.6em;
            font-size: 1rem;
            gap: #{$tabs-gap-small};
            min-height: 2rem;
        
            border-radius: #{$tabs-border-radius};
            border: none;
            background: transparent;
            cursor: pointer;
            transition: background 0.2s ease;
            display: flex;
            align-items: center;
            user-select: none;
            
            &:hover {
                background: rgba(0, 0, 0, 0.05);
            }
            
            &--active {
//                font-weight: bold;
                
//                @include highlightBorder();
            }
            
            &--action {
                margin-left: auto; // Action-Tabs immer rechts
                background: rgba(0, 0, 0, 0.05);
                border-radius: #{$tabs-border-radius};
    
                & + & {
                    margin-left: 0;
                }
            }
        
//            @include buttonColors();
        }
    
        &content {
            padding: 15px;
            border: 1px solid #{getThemeColor( border )};
            background: #fff;
            
            &__item {
                display: flex;
                flex-direction: column;
                gap: #{$tabs-gap-default};
        
                display: grid;
                grid-template-columns: repeat( 2, 1fr );
                
                > * {
                    margin-block: 0;
                }
                
                > .form__group {
                    grid-column: 1/-1;
                }
            }
        }
        
        &icon {
            font-size: 16px;
        }
    }
}