/* Telegram Mini App Styles */

/* CSS Variables for Telegram theme */
:root {
  --tg-bg-color: #ffffff;
  --tg-text-color: #000000;
  --tg-hint-color: #999999;
  --tg-link-color: #2481cc;
  --tg-button-color: #2481cc;
  --tg-button-text-color: #ffffff;
  --tg-secondary-bg-color: #f1f1f1;
  --tg-header-bg-color: #ffffff;
  --tg-accent-text-color: #2481cc;
  --tg-section-bg-color: #ffffff;
  --tg-section-header-text-color: #6d6d71;
  --tg-subtitle-text-color: #999999;
  --tg-destructive-text-color: #ff3b30;
}

/* Telegram theme styles */
body.telegram-theme {
  background-color: var(--tg-bg-color);
  color: var(--tg-text-color);
}

/* Safe area support for iOS */
.telegram-theme {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Mobile-first responsive design */
.telegram-theme .container {
  padding-left: 16px;
  padding-right: 16px;
}

/* Hide web-only elements in Telegram */
.telegram-theme .web-only {
  display: none !important;
}

/* Telegram-specific button styles */
.telegram-theme .btn--primary {
  background-color: var(--tg-button-color);
  color: var(--tg-button-text-color);
  border: none;
}

.telegram-theme .btn--primary:hover {
  background-color: var(--tg-button-color);
  opacity: 0.8;
}

/* Telegram header styles */
.telegram-theme .app-header {
  background-color: var(--tg-header-bg-color);
  border-bottom: 1px solid var(--tg-hint-color);
  padding: 8px 16px;
}

/* Links in Telegram theme */
.telegram-theme a {
  color: var(--tg-link-color);
}

/* Card styles for Telegram */
.telegram-theme .card {
  background-color: var(--tg-section-bg-color);
  border: none;
  box-shadow: none;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* Menu cards for Telegram */
.telegram-theme .menu-card {
  background-color: var(--tg-section-bg-color);
  border: none;
  box-shadow: none;
  border-radius: 12px;
  margin-bottom: 8px;
  padding: 16px;
}

.telegram-theme .menu-card:hover {
  background-color: var(--tg-secondary-bg-color);
}

/* Form elements in Telegram */
.telegram-theme .form-control {
  background-color: var(--tg-secondary-bg-color);
  border: none;
  border-radius: 10px;
  color: var(--tg-text-color);
  padding: 12px 16px;
}

.telegram-theme .form-control:focus {
  outline: none;
  background-color: var(--tg-secondary-bg-color);
  box-shadow: 0 0 0 2px var(--tg-button-color);
}

/* Calendar styles for Telegram */
.telegram-theme .calendar-grid {
  gap: 3px;
  padding: 10px 5px;
}

.telegram-theme .calendar-day {
  border-radius: 6px;
  font-size: 13px;
  padding: 6px 2px;
  min-height: 55px;
}

/* Preserve calendar day colors for planned and present states */
.telegram-theme .calendar-day--planned {
  background-color: #ffc107 !important;
  border: 1px solid #ffc107 !important;
  color: #ffffff !important;
}

.telegram-theme .calendar-day--planned .day-number,
.telegram-theme .calendar-day--planned .day-status,
.telegram-theme .calendar-day--planned .day-schedule {
  color: #ffffff !important;
}

.telegram-theme .calendar-day--present {
  background-color: #28a745 !important;
  border: 1px solid #28a745 !important;
  color: white !important;
}

.telegram-theme .calendar-day--present .day-number,
.telegram-theme .calendar-day--present .day-status,
.telegram-theme .calendar-day--present .day-schedule {
  color: white !important;
}

.telegram-theme .calendar-day--absent {
  background-color: #ff3b30 !important;
  border: 1px solid #ff3b30 !important;
  color: white !important;
}

.telegram-theme .calendar-day--absent .day-number,
.telegram-theme .calendar-day--absent .day-status,
.telegram-theme .calendar-day--absent .day-schedule {
  color: white !important;
}

.telegram-theme .calendar-day--weekend {
  background-color: #495057 !important;
  border: 1px solid #495057 !important;
  color: #e1e1e1 !important;
}

.telegram-theme .calendar-day--weekend .day-number {
  color: #e1e1e1 !important;
}

.telegram-theme .calendar-day--weekend .day-status {
  color: #b0b0b0 !important;
}

.telegram-theme .calendar-day--weekend .day-schedule {
  color: #b0b0b0 !important;
}

/* Дополнительные переопределения для мобильного Telegram */
body.telegram-theme .calendar-day--present,
.telegram-theme .calendar-day--present {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

body.telegram-theme .calendar-day--present .day-number,
body.telegram-theme .calendar-day--present .day-status,
body.telegram-theme .calendar-day--present .day-schedule,
.telegram-theme .calendar-day--present .day-number,
.telegram-theme .calendar-day--present .day-status,
.telegram-theme .calendar-day--present .day-schedule {
  color: #ffffff !important;
}

body.telegram-theme .calendar-day--planned,
.telegram-theme .calendar-day--planned {
  background-color: #e0a800 !important;
  border-color: #e0a800 !important;
}

body.telegram-theme .calendar-day--planned .day-number,
body.telegram-theme .calendar-day--planned .day-status,
body.telegram-theme .calendar-day--planned .day-schedule,
.telegram-theme .calendar-day--planned .day-number,
.telegram-theme .calendar-day--planned .day-status,
.telegram-theme .calendar-day--planned .day-schedule {
  color: #ffffff !important;
}

body.telegram-theme .calendar-day--absent,
.telegram-theme .calendar-day--absent {
  background-color: #ff3b30 !important;
  border-color: #ff3b30 !important;
}

body.telegram-theme .calendar-day--absent .day-number,
body.telegram-theme .calendar-day--absent .day-status,
body.telegram-theme .calendar-day--absent .day-schedule,
.telegram-theme .calendar-day--absent .day-number,
.telegram-theme .calendar-day--absent .day-status,
.telegram-theme .calendar-day--absent .day-schedule {
  color: #ffffff !important;
}

.telegram-theme .calendar-day--weekend .day-schedule {
  color: #999 !important;
}

.telegram-theme .day-number {
  font-size: 14px;
  margin-bottom: 2px;
}

.telegram-theme .day-status {
  font-size: 7px;
  line-height: 1.0;
  word-wrap: break-word;
  overflow: hidden;
}

.telegram-theme .day-schedule {
  font-size: 8px;
  line-height: 1.1;
  display: block; /* Show schedule time in Telegram */
  margin-top: 1px;
  opacity: 0.9;
}

/* Status colors remain the same but with better contrast */
.telegram-theme .status--on-time {
  background-color: #34c759;
  color: white;
}

.telegram-theme .status--late {
  background-color: #ff9500;
  color: white;
}

.telegram-theme .status--absent {
  background-color: #ff3b30;
  color: white;
}

.telegram-theme .status--early-leave {
  background-color: #ff9500;
  color: white;
}

.telegram-theme .status--planned {
  background-color: #e0a800;
  color: #000000;
}

.telegram-theme .status--present {
  background-color: #28a745;
  color: white;
}

/* Legend for Telegram */
.telegram-theme .legend {
  background-color: #2b3544;
  border-radius: 12px;
  padding: 12px;
  margin-top: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.telegram-theme .legend-item {
  width: 100%;
  font-size: 12px;
}

/* Hide logout button in Telegram (handled by close) */
.telegram-theme #menuLogoutBtn {
  display: none;
}

/* Hide back buttons in Telegram (handled by BackButton) */
.telegram-theme .btn-back {
  display: none;
}

/* Modal adjustments for Telegram */
.telegram-theme .modal-content {
  border-radius: 12px;
  border: 1px solid #3a4553;
  background-color: #2b3544 !important;
  color: #e1e1e1;
}

.telegram-theme .modal-header {
  border-bottom: 1px solid #3a4553;
  background-color: #2b3544 !important;
  border-radius: 12px 12px 0 0;
}

.telegram-theme .modal-body {
  background-color: #2b3544 !important;
  color: #e1e1e1;
}

.telegram-theme .detail-section {
  background-color: #1c2733 !important;
  border: 1px solid #3a4553;
}

.telegram-theme .section-title {
  color: #e1e1e1 !important;
  border-bottom: 1px solid #3a4553;
}

.telegram-theme .detail-label {
  color: #b0b0b0 !important;
}

.telegram-theme .detail-value {
  color: #e1e1e1 !important;
}

/* Table styles for Telegram */
.telegram-theme .admin-table {
  background-color: #2b3544 !important;
  border: none;
}

.telegram-theme .admin-table th {
  background-color: #3a4553 !important;
  color: #e1e1e1 !important;
  border: none;
}

.telegram-theme .admin-table td {
  border-color: #3a4553;
  color: #e1e1e1 !important;
  background-color: #2b3544 !important;
}

/* App header adjustments for Telegram */
.telegram-theme .app-header {
  background-color: #2b3544 !important;
  border: 1px solid #3a4553;
}

.telegram-theme .app-header h2 {
  color: #e1e1e1 !important;
}

/* Loading states */
.telegram-theme .spinner {
  color: #667eea;
}

/* Breadcrumb styles */
.telegram-theme .breadcrumb {
  background-color: transparent;
  padding: 8px 0;
}

.telegram-theme .breadcrumb-item {
  color: #667eea;
}

.telegram-theme .breadcrumb-item.active {
  color: #b0b0b0;
}

/* Status message styles */
.telegram-theme .status-message {
  background-color: #1c2733;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid #3a4553;
}

/* Menu cards for Telegram theme */
.telegram-theme .menu-card {
  background: #2b3544 !important;
  border: 1px solid #3a4553;
}

.telegram-theme .menu-card:hover {
  background: #3a4553 !important;
}

.telegram-theme .menu-card-title {
  color: #e1e1e1 !important;
}

.telegram-theme .menu-card-description {
  color: #b0b0b0 !important;
}

/* Нейтральные статусы в модальных окнах детализации */
.telegram-theme .detail-status {
  background-color: transparent !important;
  color: #e1e1e1 !important;
  border: 1px solid #3a4553 !important;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* Переопределяем статусы только в модальных окнах для Telegram */
.telegram-theme .modal-content .status--absent,
.telegram-theme .detail-section .status--absent {
  background-color: transparent !important;
  color: #e1e1e1 !important;
  border: 1px solid #3a4553 !important;
}

.telegram-theme .modal-content .status--weekend,
.telegram-theme .detail-section .status--weekend {
  background-color: transparent !important;
  color: #e1e1e1 !important;
  border: 1px solid #3a4553 !important;
}

.telegram-theme .modal-content .status--planned,
.telegram-theme .detail-section .status--planned {
  background-color: transparent !important;
  color: #e1e1e1 !important;
  border: 1px solid #3a4553 !important;
}

.telegram-theme .modal-content .status--present,
.telegram-theme .detail-section .status--present {
  background-color: transparent !important;
  color: #e1e1e1 !important;
  border: 1px solid #3a4553 !important;
}

/* Department stats table specific fixes for Telegram */
.telegram-theme .department-stats-table {
  background-color: #2b3544 !important;
}

/* Единообразный цвет для всех строк в Telegram */
.telegram-theme .department-stats-table tbody tr {
  background-color: #2b3544 !important;
}

/* Отключаем разные цвета для четных строк в Telegram */
.telegram-theme .department-stats-table tbody tr:nth-child(even) {
  background-color: #2b3544 !important;
}

/* Единообразный цвет при наведении */
.telegram-theme .department-stats-table tbody tr:hover {
  background-color: #3a4553 !important;
}

/* Выходные дни тоже делаем одинакового цвета */
.telegram-theme .department-stats-table .weekend-row {
  background-color: #2b3544 !important;
}

.telegram-theme .department-stats-table .weekend-row:hover {
  background-color: #3a4553 !important;
}

.telegram-theme .department-stats-table .weekend-row td {
  color: #e1e1e1 !important;
}

.telegram-theme .department-stats-table td {
  background-color: transparent !important;
  color: #e1e1e1 !important;
}

.telegram-theme .department-stats-table th {
  background-color: #3a4553 !important;
  color: #e1e1e1 !important;
}

.telegram-theme .department-stats-table-container {
  background-color: #2b3544 !important;
  border: 1px solid #3a4553;
}

/* Responsive adjustments for small screens */
@media (max-width: 480px) {
  .telegram-theme .container {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  .telegram-theme .menu-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .telegram-theme .calendar-grid {
    gap: 2px;
    padding: 8px 4px;
  }
  
  .telegram-theme .calendar-day {
    font-size: 11px;
    padding: 4px 1px;
    min-height: 45px;
  }
  
  .telegram-theme .day-number {
    font-size: 12px;
    font-weight: 600;
  }
  
  .telegram-theme .day-status {
    font-size: 6px;
  }
  
  .telegram-theme .day-schedule {
    font-size: 7px;
    display: block;
  }
  
  .telegram-theme .month-navigation {
    padding: 10px;
  }
  
  .telegram-theme .month-navigation h3 {
    font-size: 16px;
  }
  
  .telegram-theme .btn--sm {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .telegram-theme .modal-content {
    margin: 10px;
    max-width: calc(100vw - 20px);
  }
  
  /* Department stats table for small screens */
  .telegram-theme .department-stats-table {
    font-size: 10px;
  }
  
  .telegram-theme .department-stats-table th {
    padding: 6px 3px;
    font-size: 9px;
  }
  
  .telegram-theme .department-stats-table td {
    padding: 6px 3px;
    font-size: 9px;
  }
  
  .telegram-theme .department-stats-table .employee-name {
    max-width: 80px;
    font-size: 8px;
  }
  
  .telegram-theme .department-stats-table .time-cell {
    min-width: 45px;
    font-size: 8px;
  }
}

/* Extra small screens (below 360px) */
@media (max-width: 360px) {
  .telegram-theme .calendar-grid {
    gap: 1px;
    padding: 5px 2px;
  }
  
  .telegram-theme .calendar-day {
    font-size: 10px;
    padding: 3px 1px;
    min-height: 40px;
  }
  
  .telegram-theme .day-number {
    font-size: 11px;
  }
  
  .telegram-theme .day-status {
    font-size: 5px;
  }
  
  .telegram-theme .day-schedule {
    font-size: 6px;
    display: block;
  }
}

/* Animation for better UX */
.telegram-theme .menu-card,
.telegram-theme .calendar-day,
.telegram-theme .btn {
  transition: all 0.2s ease;
}

/* Focus styles for better accessibility */
.telegram-theme .menu-card:focus,
.telegram-theme .btn:focus,
.telegram-theme .calendar-day:focus {
  outline: 2px solid var(--tg-button-color);
  outline-offset: 2px;
}