/* Стили для страницы пользователей в новом дизайне */

/* Основные стили */
body {
  background-color: #f9fafb;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}

a {
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* Стили для заголовка */
h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

/* Стили для таблицы */
.for_table_container {
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.grid-view table.items {
  width: 100%;
  border-collapse: collapse;
}

.grid-view table.items th {
  background-color: #f3f4f6;
  color: #111827;
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.grid-view table.items td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.grid-view table.items tr:hover {
  background-color: #f9fafb;
}

.grid-view table.items td.r, 
.grid-view table.items th.r {
  background-color: #f3f4f6;
  font-weight: bold;
}

/* Переменные для цветов */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 211 100% 55%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

/* Стили для пагинации */
.pager, .pagination {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
  flex-wrap: wrap;
  width: 100%;
}

.pager ul, .pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.25rem;
  max-width: 100%;
}

.pager li, .pagination li {
  margin: 0 0 0.25rem 0;
}

.pager a, .pager span, .pagination a, .pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pager a, .pagination a {
  background-color: hsl(var(--card, 0 0% 100%));
  border: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
  color: hsl(var(--foreground, 222.2 84% 4.9%));
}

.pager a:hover, .pagination a:hover {
  background-color: hsl(var(--accent, 210 40% 96.1%));
}

.pager .selected a, .pagination .active a {
  background-color: hsl(var(--primary, 211 100% 55%));
  color: hsl(var(--primary-foreground, 210 40% 98%));
  border-color: hsl(var(--primary, 211 100% 55%));
}

.pager .disabled span, .pagination .disabled span {
  background-color: hsl(var(--muted, 210 40% 96.1%));
  color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%));
  cursor: not-allowed;
}

/* Стили для боковой панели */
.tools, .users-sidebar-card {
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tools h5, .users-sidebar-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #111827;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

#Stats, .users-stats {
  line-height: 1.6;
  color: #111827;
}

#Stats b, .users-stats b {
  font-weight: 600;
  color: #3b82f6;
  font-size: 1.125rem;
  white-space: nowrap;
}

.users-stats-text {
  margin-bottom: 1rem;
}

.form-inline, .users-search-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.users-form-group {
  width: 100%;
}

.form-inline input[type="text"], .users-form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  color: #111827;
  font-size: 0.875rem;
}

.form-inline input[type="text"]:focus, .users-form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.users-form-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.5rem;
}

.form-inline .btn, .users-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.users-button-primary {
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
}

.form-inline .btn:hover, .users-button-primary:hover {
  background-color: #2563eb;
}

.users-button-icon {
  margin-right: 0.5rem;
}

/* Контейнер для страницы */
.users-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Заголовок страницы */
.users-header-section {
  margin-bottom: 2rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
}

.users-main-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0;
}

/* Двухколоночный макет */
.users-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.users-main {
  flex: 1 1 65%;
  min-width: 0;
}

.users-side {
  flex: 1 1 30%;
  min-width: 250px;
}

@media (max-width: 768px) {
  .users-layout {
    flex-direction: column;
  }
  
  .users-main,
  .users-side {
    flex: 1 1 100%;
  }
}

/* Адаптивность */
@media (max-width: 768px) {
  .grid-view table.items th,
  .grid-view table.items td {
    padding: 0.5rem;
  }
  
  .pager a, 
  .pager span {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.25rem;
    font-size: 0.75rem;
  }
  
  .tools {
    padding: 1rem;
  }
}