* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:root {
	--border-radius: 12px;
	--shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body {
	overflow: hidden;
	background-color: var(--tg-theme-bg-color, #ffffff);
	color: var(--tg-theme-text-color, #222222);
	padding: 16px;
	max-width: 100%;
	min-height: 100vh;
}

.container {
	background-color: var(--tg-theme-bg-color, #ffffff);
	border-radius: var(--border-radius);
	padding: 16px;
	margin-bottom: 60px;
}

.day-header {
  text-align: center;
  margin-bottom: 10px;
}

.day-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--tg-theme-accent-text-color, var(--tg-theme-text-color, #222222));
  display: block;
}

.day-date {
  font-size: 16px;
  color: var(--tg-theme-hint-color, #999999);
  display: block;
  margin-top: 2px;
}

.form-group {
	margin-bottom: 10px;
}

.form-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: 16px;
	color: var(--tg-theme-text-color, #222222);
}

.category-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}

.category-item input {
	display: none;
}

.category-item label {
	display: block;
	padding: 10px 6px;
	background-color: var(--tg-theme-secondary-bg-color, #f0f2f5);
	border-radius: var(--border-radius);
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 13px;
	color: var(--tg-theme-text-color, #222222);
}

.category-container > .category-item:last-child {
    grid-column: 1 / -1;  /* От первой колонки до последней */
}

.category-item input:checked + label {
	background-color: var(--tg-theme-button-color, #3390ec);
	color: var(--tg-theme-button-text-color, #ffffff);
}


/* Скрытие нежелательного выделения */
.category-item label {
    /* ... ваши предыдущие стили ... */
    
    /* Жёсткий сброс всех видов выделений */
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Для современных браузеров */
.category-item input:focus-visible + label {
    outline: none !important;
    box-shadow: none !important;
}

/* Для старых браузеров */
.category-item input:focus + label {
    outline: none !important;
    box-shadow: none !important;
}

/* Экстренный вариант - отключить фокус полностью */
.category-item input[type="radio"] + label {
    -webkit-user-select: none;
    user-select: none;
}
/* Скрытие нежелательного выделения */



.expenses-summary {
  margin-top: 10px;
  background-color: var(--tg-theme-section-bg-color, var(--tg-theme-secondary-bg-color, #f0f2f5));
  border-radius: var(--border-radius);
  padding: 12px;
}

.summary-title {
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--tg-theme-section-header-text-color, var(--tg-theme-text-color));
}

.expenses-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.expense-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.expense-category {
  color: var(--tg-theme-text-color);
}

.expense-amount {
  font-weight: 500;
  color: var(--tg-theme-accent-text-color, var(--tg-theme-text-color));
}





.amount-field {
	width: 100%;
	padding: 14px;
	border: 1px solid var(--tg-theme-section-separator-color, #dfe1e5);
	border-radius: var(--border-radius);
	font-size: 16px;
	outline: none;
	transition: border 0.3s ease;
	background-color: var(--tg-theme-secondary-bg-color, #f0f2f5);
	color: var(--tg-theme-text-color, #222222);
}

.amount-field:focus {
	border-color: var(--tg-theme-button-color, #3390ec);
}

/* .comment-field { */
	/* width: 100%; */
	/* padding: 14px; */
	/* border: 1px solid var(--tg-theme-section-separator-color, #dfe1e5); */
	/* border-radius: var(--border-radius); */
	/* font-size: 16px; */
	/* outline: none; */
	/* min-height: 80px; */
	/* resize: vertical; */
	/* transition: border 0.3s ease; */
	/* background-color: var(--tg-theme-secondary-bg-color, #f0f2f5); */
	/* color: var(--tg-theme-text-color, #222222); */
/* } */

/* .comment-field:focus { */
	/* border-color: var(--tg-theme-button-color, #3390ec); */
/* } */

/* .comment-field::placeholder, .amount-field::placeholder { */
	/* color: var(--tg-theme-hint-color, #999999); */
/* } */

.total-section {
	background-color: var(--tg-theme-section-bg-color, var(--tg-theme-secondary-bg-color, #f0f2f5));
	border-radius: var(--border-radius);
	padding: 16px;
	margin-top: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	margin-bottom: 24px;
}

.total-label {
	font-size: 18px;
	color: var(--tg-theme-section-header-text-color, var(--tg-theme-text-color, #222222));
}

.total-amount {
	font-size: 20px;
	color: var(--tg-theme-accent-text-color, var(--tg-theme-button-color, #3390ec));
}

.save-button {
	display: block;
	width: 100%;
	padding: 16px;
	background-color: var(--tg-theme-button-color, #3390ec);
	color: var(--tg-theme-button-text-color, #ffffff);
	border: none;
	border-radius: var(--border-radius);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: all 0.3s ease;
	margin-top: 8px;
}

.save-button:hover {
	opacity: 0.9;
}

.save-button:active {
	transform: scale(0.98);
}

/* Стиль для верхней панели, если она используется */
.header {
	background-color: var(--tg-theme-header-bg-color, var(--tg-theme-bg-color, #ffffff));
	color: var(--tg-theme-text-color, #222222);
	padding: 12px 16px;
	position: sticky;
	top: 0;
	z-index: 10;
}

/* Стиль для нижней панели, если она используется */
.bottom-bar {
	background-color: var(--tg-theme-bottom-bar-bg-color, var(--tg-theme-secondary-bg-color, #f0f2f5));
	padding: 16px;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

#loadingOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4); /* затемнение */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	display: none;
}

.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #fff;
	border-top: 4px solid #3390ec;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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