/* ! Change in Kuechenlotse.Main/wwwroot */
/* fonts */
@font-face {
  font-family: 'Itim';
  src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Prata';
  src: url('../fonts/Prata/Prata-Regular.ttf') format('truetype');
}

body {
  font-family: 'Itim';
  font-weight: 400;
}

h1,
h2,
h3,
h4,
th,
/* h5, */
.navbar-brand {
  font-family: 'Prata';
  font-weight: 700;
}

/* font sizes*/

html, body {
  font-size: 16px;
}

@media (min-width: 768px) {
  html, body {
    font-size: 18px;
  }
}

h1 {
  font-size: 5.652rem;
  /* 90.4px */
}

h2 {
  font-size: 3.997rem;
  /* 64px */
}

h3 {
  font-size: 2.827rem;
  /* 45.28px */
}

h4, .big, th {
  font-size: 1.999rem;
  /* 32px */
}

h5 {
  font-size: 1.414rem;
  /* 22.56px */
}

small {
  font-size: 0.707rem;
  /* 11.36px */
}

/* colors */

/* Main Theme */

@media (prefers-color-scheme: light) {
  :root {
    --text: rgb(13, 13, 13);
    --background: rgb(224, 224, 224);
    --secondary-values: 255, 255, 255;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: rgb(241, 241, 241);
    --background: rgb(31, 31, 31);
    --secondary-values: 0, 0, 0;
  }
}

:root {
  --primary: rgb(255, 191, 0);
  --secondary: rgb(var(--secondary-values));
  --accent: rgb(255, 140, 0);
  --transparent: rgba(var(--secondary-values), 0.2);
  --transparent-active: rgba(var(--secondary-values), 0.5);
  --transparent-special: rgba(255, 140, 0, 0.5);
  --warning: rgb(251, 255, 0);
  --danger: rgb(255, 51, 0);
  --info: rgb(0, 140, 255);
  --success: rgb(0, 255, 64);
}

html,
body {
  background-color: var(--background);
  border-color: var(--background);
  color: var(--text)
}

table {
  color: var(--text);
  background-color: var(--transparent);
}

tr > th {
  color: var(--accent);
  background-color: var(--secondary);
}

tr > td {
  color: var(--text);
}

/* XXX: speacial case.. better soulution? */
tr.special-text > td {
  color: var(--accent);
}

img.list-view {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.form-control {
  margin-bottom: 15px;
}

.no-border {
  border: none !important;
  border-radius: 0px !important;
  outline: none !important;
}

:focus {
  outline: 2px solid var(--accent);
  border-radius: 5px
}

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

a:hover,
a:focus {
  color: var(--accent);
  text-decoration: none;
}

textarea {
  background-color: var(--transparent);
  color: var(--text);
  border-radius: 10px;
  border: none; /* Remove the border */
  outline: none; /* Remove the outline when focused */
  resize: none; /* Disable textarea resizing */
  width: 95%;
}

h1,
h2,
h3 {
  color: var(--primary);
}

.text, .alert, .alert>button {
  color: var(--text);
}

.primary-text {
  color: var(--primary);
}
.secondary-text {
  color: var(--secondary);
}

.special-text, .highlight {
  color: var(--accent);
}

.danger-text {
  color: var(--danger);
}

.warning-text {
  color: var(--warning);
}

.success-text {
  color: var(--success);
}

.info-text {
  color: var(--info);
}

.background {
  background-color: var(--background) !important;
}

.primary-background {
  background-color: var(--primary) !important;
}

.secondary-background, .alert>button {
  background-color: var(--secondary) !important;
}

.danger-background, .alert-danger {
  background-color: var(--danger) !important;
}

.warning-background, .alert-warning {
  background-color: var(--warning) !important;
}

.success-background, .alert-success {
  background-color: var(--success) !important;
}

.info-background, .alert-info {
  background-color: var(--info) !important;
}

.transparent-background {
  background-color: #00000000;
}

.transparent {
  background-color: #00000000 !important;
  border-color: #00000000 !important;
  box-shadow: none !important;
}

/* [class$="primary"] {
  background-color: var(--primary);
  border-color: var(--accent);
}

[class$="primary"]:hover,
[class$="primary"]:focus {
  background-color: var(--accent);
  border-color: var(--accent);
} */

.alert {
  /* TODO: create fade out animation for remove */
}


/* style */

.blur-font {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

.blur-bg {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.with-border {
  border-color: var(--accent);
  border-style: solid;
  border-width: 5px;
  border-radius: 25px;
}

.rounded {
  border-radius: 25px;
}

.placeholder:not(:only-child) {
  display: none;
}

.placeholder{
  background-color: var(--background);
}

/* AI - on work */

.ai {
  color: var(--accent);
  position: relative;
}

button.ai {
  /* TODO: doesn't work, if you can use ::after for blur */
  background-color: rgb(var(--secondary-values));
  border-radius: 5px;
  border: 0px;
  z-index: 1;
}

/*TODO use with after*/
.ai-blur { 
  -webkit-filter: blur(1.5rem);
  -moz-filter: blur(1.5rem);
  -o-filter: blur(1.5rem);
  -ms-filter: blur(1.5rem);
  filter: blur(1.5rem);
  opacity: 0.5;
}

button.ai::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(var(--secondary-values));
  border-radius: 5px;
  margin: 5px;
  z-index: -1;
} 

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

button.ai:enabled::before {
  background-image: conic-gradient(from var(--angle) at center, var(--primary), var(--accent), var(--primary));
}

button.ai:disabled::before {
  background-image: conic-gradient(from var(--angle) at center, rgb(173, 173, 173), rgb(39, 39, 39), rgb(173, 173, 173));
}

button.ai::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  animation: aispin 5s linear infinite;
  z-index: -2;
}

/* animations */

@keyframes aispin {
  from {
    --angle: 0deg; 
  } 
  to {
    --angle: 360deg;
  }
}