@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");

/* ===== DARK THEME OVERRIDES ===== */

a {
	color: rgb(140, 140, 250);
}

::-webkit-scrollbar-track-piece {
	background-color: rgba(255, 255, 255, 0.2) !important;
}

::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0.3) !important;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.5) !important;
}

embed[type="application/pdf"] {
	filter: invert(90%);
}

html {
	color: rgb(230, 230, 230);
	background: rgb(31, 31, 31) !important;
}

body {
	background-color: rgb(31, 31, 31);
	background-image: none !important;
    font-family: 'Poppins', sans-serif; 
	color: rgb(230, 230, 230);
}

input,
select,
textarea,
button {
	color: rgb(230, 230, 230);
	background-color: rgb(31, 31, 31);
}

font {
	color: rgb(230, 230, 230);
}

span,
div,
td,
th {
	color: rgb(230, 230, 230);
}

/* ===== AWESOMPLATE DARK MODE ===== */

ul.awesomplete,
.awesomplete > ul {
	background-color: rgb(38, 38, 38) !important;
	color: rgb(230, 230, 230) !important;
	border-color: rgb(59, 59, 59) !important;
}

ul.awesomplete li,
.awesomplete > ul li {
	color: rgb(230, 230, 230) !important;
	background-color: rgb(38, 38, 38) !important;
}

ul.awesomplete li mark,
.awesomplete > ul li mark {
	background-color: rgba(255, 200, 0, 0.4) !important;
	color: rgb(255, 255, 255) !important;
}

ul.awesomplete li:hover,
ul.awesomplete li.selected,
.awesomplete > ul li:hover,
.awesomplete > ul li.selected {
	background-color: rgb(59, 59, 59) !important;
}

ul.awesomplete ul,
.awesomplete > ul ul {
	background-color: rgb(38, 38, 38) !important;
	color: rgb(230, 230, 230) !important;
}

ul.awesomplete ul li,
.awesomplete > ul ul li {
	color: rgb(230, 230, 230) !important;
	background-color: rgb(38, 38, 38) !important;
}

ul.awesomplete ul li mark,
.awesomplete > ul ul li mark {
	background-color: rgba(255, 200, 0, 0.4) !important;
	color: rgb(255, 255, 255) !important;
}

ul.awesomplete ul li:hover,
ul.awesomplete ul li.selected,
.awesomplete > ul ul li:hover,
.awesomplete > ul ul li.selected {
	background-color: rgb(59, 59, 59) !important;
}

/* ===== MODERN FUTTERDATEN TABLE — DARK MODE ===== */

#futter_table_wrapper {
    background: rgb(28, 28, 33) !important;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Table Header */
#futter_table thead th {
    background: linear-gradient(135deg, rgb(42, 151, 167), rgb(34, 121, 135)) !important;
    color: rgb(255, 255, 255) !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    border: none !important;
    letter-spacing: 0.3px !important;
}

/* Table Body Rows — Card-style entries */
#futter_table tbody tr.entry-row {
    background: rgb(28, 28, 33) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: all 0.2s ease !important;
}

#futter_table tbody tr.entry-row:hover {
    background: linear-gradient(90deg, rgb(35, 55, 65), rgb(40, 60, 70)) !important;
    box-shadow: inset 0 0 0 2px rgba(42, 151, 167, 0.2) !important;
}

/* Edit Button */
#futter_table .btn-edit {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    color: rgb(180, 180, 190) !important;
}

#futter_table .btn-edit:hover {
    background: linear-gradient(135deg, rgb(42, 151, 167), rgb(34, 121, 135)) !important;
    border-color: transparent !important;
    color: white !important;
    transform: scale(1.1) !important;
    box-shadow: 0 3px 8px rgba(42, 151, 167, 0.4) !important;
}

/* Delete Button */
#futter_table .btn-delete {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease !important;
    border: 1.5px solid rgb(220, 80, 90) !important;
    background: transparent !important;
    color: rgb(220, 80, 90) !important;
}

#futter_table .btn-delete:hover {
    background: linear-gradient(135deg, rgb(220, 80, 90), rgb(190, 60, 70)) !important;
    border-color: transparent !important;
    color: white !important;
    transform: scale(1.1) !important;
    box-shadow: 0 3px 8px rgba(220, 80, 90, 0.4) !important;
}

/* Food Name Cell */
#futter_table td.food-name {
    font-weight: 600 !important;
    color: rgb(230, 230, 235) !important;
    padding: 14px 16px !important;
    font-size: 1.05em !important;
}

/* Kcal Cell — Neutral teal instead of red */
#futter_table td.kcal-cell {
    font-weight: 500 !important;
    color: rgb(140, 200, 215) !important;
    padding: 14px 16px !important;
    white-space: nowrap !important;
}

/* Ca/P Info Row */
#futter_table tbody tr.ca-p-row {
    background: rgb(35, 35, 40) !important;
    border-bottom: none !important;
}

#futter_table tbody tr.ca-p-row td {
    padding: 10px 16px !important;
    font-size: 0.88em !important;
    color: rgb(170, 170, 180) !important;
}

/* Ca/P badges — Dark Mode */
.ca-badge {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1)) !important;
    color: rgb(120, 210, 140) !important;
    border: 1px solid rgba(40, 167, 69, 0.3) !important;
}

.p-badge {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.2), rgba(23, 162, 184, 0.1)) !important;
    color: rgb(120, 200, 220) !important;
    border: 1px solid rgba(23, 162, 184, 0.3) !important;
}

/* Add Button Row — Dark Mode */
#button_hinz_table {
    background: rgb(28, 28, 33) !important;
    border-top: 2px solid rgba(255, 255, 255, 0.06) !important;
}

#button_hinz_table .btn-add {
    background: linear-gradient(135deg, rgb(40, 170, 70), rgb(30, 140, 55)) !important;
    border: none !important;
    color: white !important;
    padding: 12px 28px !important;
    border-radius: 30px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 12px rgba(40, 170, 70, 0.3) !important;
    transition: all 0.2s ease !important;
}

#button_hinz_table .btn-add:hover {
    background: linear-gradient(135deg, rgb(30, 140, 55), rgb(20, 110, 40)) !important;
    box-shadow: 0 6px 16px rgba(40, 170, 70, 0.4) !important;
    transform: translateY(-2px) !important;
}

#button_hinz_table .btn-add:active {
    transform: translateY(0) !important;
}

/* Pagination — Dark Mode */
.pagination-wrapper {
    padding: 16px !important;
    background: rgb(35, 35, 40) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#futter_table .pagination .page-item {
    margin: 0 3px !important;
}

#futter_table .pagination .page-link {
    color: rgb(140, 200, 215) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-weight: 500 !important;
    border: 1.5px solid transparent !important;
    transition: all 0.2s ease !important;
}

#futter_table .pagination .page-link:hover {
    background-color: rgba(42, 151, 167, 0.1) !important;
    color: rgb(160, 220, 235) !important;
    border-color: rgba(42, 151, 167, 0.2) !important;
}

#futter_table .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, rgb(42, 151, 167), rgb(34, 121, 135)) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(42, 151, 167, 0.3) !important;
}

#futter_table .pagination .page-item.disabled .page-link {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Show All Button — Dark Mode */
.form-button-btn {
    color: rgb(170, 170, 180) !important;
    font-size: 0.9em !important;
    transition: all 0.2s ease !important;
}

.form-button-btn:hover {
    color: rgb(140, 200, 215) !important;
    text-decoration: underline !important;
}

/* ===== END MODERN TABLE DARK ===== */

/* ===== MATCHING ELEMENTS FROM styles.css (dark adapted) ===== */

body {
	font-family: Poppins, sans-serif;
	background: rgb(31, 31, 31);
}

p {
	font-family: Poppins, sans-serif;
	font-size: 1.1em;
	font-weight: 300;
	line-height: 1.7em;
	color: rgb(220, 220, 220);
}

h4 {
	color: rgb(220, 220, 220);
}

#futter_table tr:nth-child(2n+1) {
	background: rgb(28, 28, 33);
	color: rgb(220, 220, 220);
}

#futter_table tr:nth-child(2n) {
	background: rgb(31, 31, 31);
	color: rgb(220, 220, 220);
}

#futter_table th {
	background: rgb(42, 151, 167);
	color: rgb(255, 255, 255);
}

#futter_table tr:nth-last-child(2) {
	background: rgb(28, 28, 33);
	color: rgb(220, 220, 220);
}

#futter_table td {
	color: rgb(220, 220, 220);
}

.page-link {
	color: rgb(153, 219, 230);
}

.icon-tiles a {
	float: left;
	width: 10%;
	text-align: center;
	padding: 12px 0px;
	transition: all 0.3s ease 0s;
	color: rgb(255, 255, 255);
	font-size: 20px;
	background-color: rgb(42, 151, 167);
	margin: 5px;
}

.icon-tiles a:hover {
	background-color: rgb(34, 121, 135);
	color: rgb(255, 255, 255);
}

a,
a:hover,
a:focus {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}

#notizen_link:active {
	background-color: rgb(28, 28, 33);
	color: rgb(191, 191, 191);
}

#notizen_link:focus {
	text-decoration: none;
	transition: all 0.3s ease 0s;
	background-color: rgb(28, 28, 33);
	color: rgb(191, 191, 191);
}

.icon::before {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid rgb(25, 102, 25);
	font-size: 20px;
	color: rgb(153, 230, 153);
	text-decoration: none;
}

.dropdown_icon {
	display: inline-block;
	cursor: pointer;
}

.dropdown_icon .icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgb(42, 151, 167);
	transition: all 0.2s ease;
}

.dropdown_icon .icon:hover {
	background-color: rgb(34, 121, 135);
	transform: scale(1.1);
}

#bigplus::before {
	content: "＋";
	color: rgb(153, 230, 153);
	text-decoration: none;
	width: 36px;
	height: 36px;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pointer {
	cursor: pointer;
}

.container-fluid {
	position: relative;
	right: 30px;
}

.navbar-btn {
	box-shadow: none;
	border: none;
	outline: none !important;
}

.line {
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed rgb(59, 59, 59);
	margin: 40px 0px;
}

.wrapper {
	display: flex;
	width: 100%;
	align-items: stretch;
}

#sidebar {
	min-width: 250px;
	max-width: 250px;
	background: rgb(115, 134, 213);
	color: rgb(255, 255, 255);
	transition: all 0.3s ease 0s;
}

#sidebar.active {
	margin-left: -250px;
}

#sidebar .sidebar-header {
	padding: 20px;
	background: rgb(109, 127, 204);
	color: rgb(232, 232, 232);
}

#sidebar ul.components {
	padding: 20px 0px;
	border-bottom: 1px solid rgb(115, 134, 213);
}

#sidebar ul p {
	color: rgb(232, 232, 232);
	padding: 10px;
}

#sidebar ul li a {
	padding: 10px;
	font-size: 1.1em;
	display: block;
	color: rgb(232, 232, 232);
}

#sidebar ul li a:hover {
	color: rgb(232, 232, 232);
	background: rgb(28, 28, 33);
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
	color: rgb(232, 232, 232);
	background: rgb(109, 127, 204);
}

a[data-toggle="collapse"] {
	position: relative;
}

.dropdown-toggle::after {
	display: block;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

ul ul a {
	background: rgb(109, 127, 204);
	font-size: 0.9em !important;
	padding-left: 30px !important;
}

ul.CTAs {
	padding: 20px;
}

ul.CTAs a {
	text-align: center;
	display: block;
	border-radius: 5px;
	margin-bottom: 5px;
	font-size: 0.9em !important;
}

a.download {
	background: rgb(28, 28, 33);
	color: rgb(157, 171, 226);
}

a.article,
a.article:hover {
	background: rgb(115, 134, 213) !important;
	color: rgb(255, 255, 255) !important;
}

#content {
	width: 100%;
	padding: 20px;
	min-height: 100vh;
	transition: all 0.3s ease 0s;
}

@media (max-width: 768px) {
	#sidebar {
		margin-left: -250px;
	}
	#sidebar.active {
		margin-left: 0px;
	}
	#sidebarCollapse span {
		display: none;
	}
	.bcs {
		width: 100%;
	}
	.icon-tiles a {
		width: 90%;
		padding: 12px 0px;
		cursor: pointer;
	}

	#futter_table tbody tr.ca-p-row td {
	    display: block;
	    width: 100%;
	    padding-left: 52px !important;
	}

	#futter_table .btn-edit,
	#futter_table .btn-delete {
	    width: 32px;
	    height: 32px;
	}
}

.switch {
	position: relative;
	left: 75%;
	top: -20px;
	display: flex;
	width: 50px;
	height: 24px;
}

.switch input {
	opacity: 0;
	width: 0px;
	height: 0px;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgb(255, 255, 255);
	transition: all 0.4s ease 0s;
}

.slider::before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: rgb(61,61,61);
	transition: all 0.4s ease 0s;
}

input:checked+.slider {
	background-color: rgb(85, 99, 158);
}

input:focus+.slider {
	box-shadow: rgb(67, 145, 208) 0px 0px 1px;
}

input:checked+.slider::before {
	transform: translateX(26px);
}

.slider.round {
	border-radius: 34px;
}

.slider.round::before {
	border-radius: 50%;
}

/* ===== DARK MODE CARDS & MODALS ===== */

.card {
	background-color: rgb(28, 28, 33) !important;
	border-color: rgb(59, 59, 59) !important;
}

.card-header {
	background-color: rgb(42, 42, 42) !important;
	border-color: rgb(59, 59, 59) !important;
}

.card-body {
	color: rgb(220, 220, 220);
}

.card-title {
	color: rgb(230, 230, 230);
}

.card-subtitle {
	color: rgb(191, 191, 191);
}

.card-text {
	color: rgb(220, 220, 220);
}

.card-link {
	color: rgb(153, 219, 230);
}

.card-footer {
	background-color: rgb(42, 42, 42) !important;
	border-color: rgb(59, 59, 59) !important;
}

.modal-content {
	background-color: rgb(28, 28, 33) !important;
	border-color: rgb(59, 59, 59) !important;
}

.modal-header {
	background-color: rgb(42, 42, 42) !important;
	border-color: rgb(59, 59, 59) !important;
}

.modal-body {
	color: rgb(220, 220, 220);
}

.modal-footer {
	background-color: rgb(42, 42, 42) !important;
	border-color: rgb(59, 59, 59) !important;
}

.modal-title {
	color: rgb(230, 230, 230);
}

.form-control::placeholder {
	color: rgb(150, 150, 150);
	opacity: 1;
}

.form-control {
	color: rgb(220, 220, 220) !important;
	background-color: rgb(38, 38, 38) !important;
	border-color: rgb(59, 59, 59) !important;
}

.form-control:focus {
	color: rgb(220, 220, 220) !important;
	background-color: rgb(42, 42, 42) !important;
	border-color: rgb(100, 150, 200) !important;
	outline: 0px;
	box-shadow: 0 0 0 0.2rem rgba(80, 130, 180, 0.4) !important;
}

.form-control:disabled,
.form-control[readonly] {
	background-color: rgb(50, 50, 50);
}

label {
	color: rgb(220, 220, 220);
}

.card p,
.modal-body p {
	color: rgb(220, 220, 220);
}

h4,
.card h4,
.modal-body h4 {
	color: rgb(230, 230, 230);
}

/* ===== MODERN PROGRESS BARS — DARK MODE ===== */

tr.table-success td .progress {
    height: 18px;
    border-radius: 9px;
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    margin-top: 8px;
    margin-bottom: 6px;
}

tr.table-success td .progress-bar {
    border-radius: 9px;
    transition: width 0.6s ease-in-out;
    position: relative;
}

/* Consumed portion — warm gradient */
tr.table-success td .progress-bar.bg-warning {
    background: linear-gradient(90deg, #d4a028, #f0c050) !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Remaining portion — fresh green */
tr.table-success td .progress-bar.bg-success {
    background: linear-gradient(90deg, #4a9e78, #6dbfa0) !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Over-consumed (danger) — soft red */
tr.table-success td .progress-bar.bg-danger {
    background: linear-gradient(90deg, #c55560, #d87a84) !important;
    border-radius: 9px !important;
}

/* Ca/P sub-progress bars */
tr.table-success td .row > div .progress {
    height: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

tr.table-success td .row > div .progress-bar {
    border-radius: 5px;
    transition: width 0.6s ease-in-out;
}

/* ===== END MODERN PROGRESS BARS DARK ===== */

/* ===== FIX: Dropdown in table-responsive nicht abschneiden ===== */
.table-responsive {
    overflow: visible;
}

.table-responsive .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
}

.table-responsive .dropdown.dropdown_icon .dropdown-menu {
    right: 0;
}

/* ===== DUNKLER TEXT AUF HELLEN BALKEN (table-success) ===== */

small {
	color: rgb(220, 220, 220);
}

tr.table-success td h3,
tr.table-success td h3 span,
tr.table-success td small,
tr.table-success td small b,
tr.table-success td small *,
tr.table-success > td {
	color: rgb(40, 40, 40) !important;
}

tr.table-success td h3 {
	color: rgb(30, 30, 30) !important;
}