/*
====================================
 CattleMania User Directory Widgets
 COMMAND CENTER THEME
 MASTER LAYOUT COMPATIBLE
====================================
*/

/* ==================================
   PAGE WRAPPER
================================== */

.users-page {
  width: 100%;
}

/* ==================================
   DASHBOARD GRID
================================== */

.users-dashboard-grid {
  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 20px;

  margin-bottom: 20px;
}

/* ==================================
   HEADERS
================================== */

.users-page .widget-header {
  background: linear-gradient(90deg, #172554, #0f172a);
}

/* ==================================
   SEARCH
================================== */

.directory-search {
  width: 100%;

  padding: 14px 16px;

  background: #020617;

  color: white;

  border-radius: 12px;

  border: 1px solid rgba(56, 189, 248, 0.15);

  font-size: 14px;

  outline: none;
}

.directory-search::placeholder {
  color: #64748b;
}

.directory-search:focus {
  border-color: #38bdf8;

  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

/* ==================================
   SEARCH RESULTS
================================== */

.user-search-widget .widget-body {
  position: relative;
}

.search-results {
  position: absolute;

  left: 20px;

  right: 20px;

  top: 65px;

  background: #111827;

  border-radius: 12px;

  overflow: hidden;

  border: 1px solid rgba(56, 189, 248, 0.15);

  z-index: 100;
}

.search-results a {
  display: block;

  padding: 12px;

  color: white;

  text-decoration: none;
}

.search-results a:hover {
  background: #2563eb;
}

/* ==================================
   RANCH DIRECTORY
================================== */

.user-directory {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 15px;
}

/* ==================================
   RANCH CARD
================================== */

.user-card {
  background: linear-gradient(145deg, #0f172a, #111827);

  border: 1px solid rgba(56, 189, 248, 0.15);

  border-radius: 14px;

  padding: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  min-height: 160px;

  transition: 0.25s;
}

.user-card:hover {
  transform: translateY(-5px);

  border-color: #38bdf8;

  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

/* ==================================
   RANCH ICON
================================== */

/* ==================================
   NAME
================================== */

.user-card h4 {
  color: white;

  font-size: 20px;

  font-weight: 900;

  margin-bottom: 18px;

  word-break: break-word;
}

/* ==================================
   BUTTON
================================== */

.user-card a {
  width: 100%;

  padding: 11px;

  border-radius: 10px;

  background: linear-gradient(90deg, #2563eb, #38bdf8);

  color: white;

  text-decoration: none;

  font-weight: 800;

  transition: 0.2s;
}

.user-card a:hover {
  background: #dc2626;

  transform: translateY(-2px);
}

/* ==================================
   DESCRIPTION
================================== */

.widget-description {
  color: #94a3b8;

  font-size: 15px;

  line-height: 1.6;
}

/* ==================================
   STATS
================================== */

.users-page .stat-box {
  background: linear-gradient(145deg, #111827, #0f172a);

  border: 1px solid rgba(56, 189, 248, 0.12);
}

.users-page .stat-number {
  color: #38bdf8;
}

/* ==================================
   MOBILE
================================== */

@media (max-width: 900px) {
  .users-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .user-directory {
    grid-template-columns: 1fr;
  }
}