/* Define custom fonts */
@font-face {
  font-family: 'Lynstone';
  src: url('https://www.sonnenext.com/wp-content/uploads/Lynstone-Book.woff2') format('woff2'),
	   url('https://www.sonnenext.com/wp-content/uploads/Lynstone-Book.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'QuadroModerate';
  src: url('https://www.sonnenext.com/wp-content/uploads/QuadroModerate-ExtraBold.woff2') format('woff2'),
	   url('https://www.sonnenext.com/wp-content/uploads/QuadroModerate-ExtraBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

body { 
	background-color: #f8f9fa;	
	font-family: 'Lynstone', sans-serif;
}

h1, h2, h2, h4, h5, h6 {
      color: #000000;
      font-family: 'QuadroModerate', sans-serif;
}

h4 {
	font-size:16px;
}

h5 {
	font-size:16px;
}

.sidebar {
	background-color: #FFDDB4;
	color: #000000;
	padding: 20px;
	max-height: 100vh;
	overflow-y: auto;
	position: fixed;
	width: 300px;
	top: 0;
	bottom: 0;
	left: 0;
}
.main-content { margin-left: 320px; padding: 20px; }
.chart-container {
	font-family: 'Lynstone', sans-serif;
	overflow-x: auto;
	overflow-y: hidden;
	margin-bottom: 20px;
	background: #FFF2E1;
	border: 1px solid #e4d8c8;	
	border-radius: 12px;
	padding: 20px;
}
.chart-container canvas {
	height: 400px !important;
	display: inline-block;
}
.table-responsive {
	overflow-x: auto;
}
#tradesTable {
	width: 100% !important;
}
.chart-legend {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
	padding: 10px;
	background-color: #FFF2E1;
	border-radius: 4px;
}
.chart-legend div {
	margin: 0 15px;
	font-size: 14px;
}

.snx-overflow-x {
	overflow-x: auto;
	max-width: 100%;
}	


/* === Container / Karte === */
.dt-container {
  background: #FFF2E1;
  border: 1px solid #e4d8c8;
  border-radius: 12px;
  padding: 12px;
}

/* Kopfzeile mit Gradient */
#tradesTable thead th {
  background: linear-gradient(90deg, #8FFF8B, #FFF2E1, #8FFF8B) !important;
  color: #000;
  font-weight: 600;
  border-bottom: none !important;
  text-align: center;
  padding: 12px;
}

/* Stripes & Hover (Bootstrap .table-striped überschreiben) */
.table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: #fdf8f3;            /* sanftes Beige */
  background-color: #fdf8f3 !important;
}
.table > tbody > tr:hover > * {
  background-color: rgba(143, 255, 139, 0.2) !important;
}

/* Zellen allgemeiner Look */
#tradesTable td {
  border-top: none !important;
  padding: 10px;
  vertical-align: middle;
  color: #333;
}

/* "Keine Daten"-Zeile */
#tradesTable tbody tr td.dataTables_empty {
  background: #f8f1e7 !important;
  color: #7a6d5f;
}

/* === Suchfeld & Length-Select im gleichen Stil wie Inputs === */
.dt-container .dt-search input.dt-input,
.dt-container .dt-length select.dt-input {
  border: 1px solid #ccc;
  border-radius: 999px;
  background-color: #FFF2E1;
  padding: 6px 12px;
  outline: none;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.dt-container .dt-search input.dt-input:focus,
.dt-container .dt-length select.dt-input:focus {
  border-color: #3EFF36;
  box-shadow: 0 0 6px rgba(62,255,54,.4);
  background-color: #fff;
}

/* Optional: hübscher Select-Pfeil */
.dt-container .dt-length select.dt-input {
  appearance: none; -moz-appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* === Pagination (Bootstrap-Variante!) === */
.dt-container .dt-paging .pagination .page-item .page-link {
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #FFF2E1;
  color: #333;
  margin: 2px;
  padding: 6px 12px;
  transition: all .3s;
}
.dt-container .dt-paging .pagination .page-item .page-link:hover {
  background: #8FFF8B;
  border-color: #3EFF36;
  color: #000;
}
.dt-container .dt-paging .pagination .page-item.active .page-link {
  background: linear-gradient(90deg, #8FFF8B, #FFF2E1, #8FFF8B);
  border-color: #3EFF36;
  color: #000;
}
.dt-container .dt-paging .pagination .page-item.disabled .page-link {
  opacity: .6;
  background: #f2e8dc;
  color: #8a8a8a;
}

/* Info-Text */
.dt-container .dt-info {
  color: #5b5247;
}

/* Buttons-Extension (falls genutzt) – rund + Gradient */
.dt-container .dt-buttons .dt-button,
.dt-container .dt-buttons .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border: none; border-radius: 999px;
  font-weight: 600; color: #000 !important;
  background: linear-gradient(90deg, #8FFF8B, #FFF2E1, #8FFF8B);
  transition: background .3s, box-shadow .3s;
}
.dt-container .dt-buttons .dt-button:hover,
.dt-container .dt-buttons .btn:hover {
  background: linear-gradient(90deg, #3EFF36 0%, #FFF2E1 51%, #3EFF36 100%);
  color: #000 !important;
}

/* DataTables Search Input im gleichen Style */
.dt-container .dt-search input.dt-input {
    width: auto; /* Standardbreite, nicht 100% wie Formulareingaben */
    padding: 10px 16px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 999px;
    background-color: #FFF2E1;
    color: #333;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    display: inline-block;
    margin-left: 8px; /* etwas Abstand zum Label "Suche:" */
}

/* Placeholder */
.dt-container .dt-search input.dt-input::placeholder {
    color: #999;
    font-style: italic;
}

/* Fokus-Effekt */
.dt-container .dt-search input.dt-input:focus {
    border-color: #3EFF36;
    box-shadow: 0 0 6px rgba(62, 255, 54, 0.4);
    background-color: #fff;
}

/* Spinner styles */
.spinner-container {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}
.spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db; /* Add a distinct color for the spinning part */
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: snx-spin 1s linear infinite;
}
.spinner-center {
	text-align: center;
	margin-top: 20px;
}
@keyframes snx-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.snxt-hidden {
	display: none !important;
}

/* Button spinner styles */
.btn-loading {
	background:linear-gradient(90deg, #8FFF8B, #FFF2E1, #8FFF8B)!important;transition-duration:300ms;
	position: relative;
	pointer-events: none; /* Disable clicks while loading */
	opacity: 0.7;
}
.btn-loading::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #fff;
	border-top-color: #3498db; /* Blue spinner for visibility */
	border-radius: 50%;
	animation: snx-spin 1s linear infinite;
	margin-right: 8px;
	vertical-align: middle;
}
.btn-loading span {
	vertical-align: middle;
}

/* Basisbutton mit Gradient */
#calculateBtn {
	font-family: 'Lynstone', sans-serif;
	width:100%;
	display: inline-flex;              /* Spinner + Text nebeneinander */
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	font-size: 16px;
	font-weight: 600;
	border: 1px solid #000000;
	border-radius: 999px; /* schön rund */
	color: #000;
	cursor: pointer;
	background: linear-gradient(90deg, #8FFF8B, #FFF2E1, #8FFF8B);
	transition: background 300ms, opacity 300ms;
}

/* Hover-Gradient */
#calculateBtn:hover:not(.btn-loading) {
	background: linear-gradient(
		90deg,
		#3EFF36 0%,
		#FFF2E1 51%,
		#3EFF36 100%
	);
}

/* Ladezustand */
#calculateBtn.btn-loading {
	pointer-events: none;  /* deaktiviert Klicks */
	opacity: 0.8;
	position: relative;
}

/* Spinner */
#calculateBtn.btn-loading::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #000;      /* Spinner-Farbe */
	border-top-color: transparent;
	border-radius: 50%;
	animation: snx-spin 1s linear infinite;
	margin-right: 8px;
}


/* Basis Input-Style */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea {
	width: 100%;
	padding: 10px 16px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 999px; /* schön rund */
	background-color: #FFF2E1; /* wie im Screenshot */
	color: #333;
	outline: none;
	transition: border-color 0.3s, box-shadow 0.3s;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
	color: #999;
	font-style: italic;
}

/* Fokus-Effekt */
input:focus,
textarea:focus {
	border-color: #3EFF36; /* grün passend zum Button */
	box-shadow: 0 0 6px rgba(62, 255, 54, 0.4);
	background-color: #fff; /* beim Fokus hell */
}

/* Optional für Fehlerzustand */
input.error {
	border-color: #e74c3c;
	box-shadow: 0 0 6px rgba(231, 76, 60, 0.4);
}

/* Basis Select-Style */
.form-select {
	width: 100%;
	padding: 10px 16px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 999px; /* rund wie Input */
	background-color: #FFF2E1;
	color: #333;
	outline: none;
	appearance: none;      /* entfernt Standard-Pfeil (Chrome, Safari) */
	-moz-appearance: none; /* entfernt Standard-Pfeil (Firefox) */
	-webkit-appearance: none; /* entfernt Standard-Pfeil (Safari/Chrome) */
	transition: border-color 0.3s, box-shadow 0.3s;
	background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 40px; /* Platz für den Pfeil */
}

/* Fokus */
.form-select:focus {
	border-color: #3EFF36;
	box-shadow: 0 0 6px rgba(62, 255, 54, 0.4);
	background-color: #fff;
}

/* Fehlerzustand optional */
select.error {
	border-color: #e74c3c;
	box-shadow: 0 0 6px rgba(231, 76, 60, 0.4);
}


@keyframes snx-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.card{
	border-radius: 12px;
	background-color: #FFF2E1; /* wie im Screenshot */
}

.card-title {
	font-family: 'Lynstone', sans-serif;
}


/* Download-CSV Button */
#downloadCsv {
	font-family: 'Lynstone', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px; /* rund wie Inputs */
    border: 1px solid #000000;
    cursor: pointer;
    color: #000 !important;
    background: linear-gradient(90deg, #8FFF8B, #FFF2E1, #8FFF8B);
    transition: background 300ms, box-shadow 300ms, opacity 300ms;
}

/* Hover-Effekt */
#downloadCsv:hover {
    background: linear-gradient(
        90deg,
        #3EFF36 0%,
        #FFF2E1 51%,
        #3EFF36 100%
    );
    color: #000 !important;
    text-decoration: none;
}

/* Optional: aktiver Klick */
#downloadCsv:active {
    box-shadow: 0 0 0 3px rgba(62, 255, 54, 0.3);
}

/* Optional: deaktivierter Zustand */
#downloadCsv.disabled {
    pointer-events: none;
    opacity: 0.6;
}