/* Dashboard CSS */

body {
  background-color: #f3f4f6; /* Light gray background suggested by image? 
    Wait, Image 0 & 4 are dark. Image 2 (Dashboard) looks LIGHT mode in the screenshot provided?
    Let's check `uploaded_image_2`.
    It has a white sidebar, light gray background.
    The other pages are dark mode.
    The user said: "The web app is a real time collaboration whiteboard for enterprices. The photos i have attached are the design i wanna follow... make a landing page like the fourth photo, a login page like the first photo..."
    
    If the dashboard photo is Light Mode, I should probably make the Dashboard Light Mode to match the photo?
    "Also i want you to make a simple dashboard like in the last photo."
    
    If I make the Landing/Login Dark and Dashboard Light, it might feel inconsistent, BUT I must follow the photos.
    Photo 2 IS Light Mode.
    
    I will implement Light Mode for Dashboard specifically, or a very light gray theme.
    */
  color: #1f2937; /* Dark text for light mode */
}

/* Override Global Dark Theme Vars for Dashboard Context locally if needed, 
   OR just explicitly style Dashboard elements to be light.
   I'll reset the body bg for dashboard page specifically via dashboard.css 
*/
body {
  background-color: #f9fafb;
}

.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: 250px;
  background: white;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.sidebar-header {
  margin-bottom: 2rem;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: 6px;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  color: #4b5563;
  font-weight: 500;
  transition: var(--transition-fast);
}

.nav-item:hover,
.nav-item.active {
  background: #eff6ff;
  color: var(--primary);
}

.nav-item .icon {
  font-size: 1.1rem;
}

.spacer {
  flex: 1;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.avatar {
  width: 36px;
  height: 36px;
  background: #fed7aa;
  color: #c2410c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
}

.user-info .name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}

.user-info .role {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.top-bar {
  height: 70px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}

.search-bar {
  position: relative;
  width: 400px;
}

.search-input {
  width: 100%;
  background: #f3f4f6;
  border: none;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: #1f2937;
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 0.9rem;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-icon {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
}

.btn-icon:hover {
  background: #f3f4f6;
}

.new-board-btn {
  padding: 0.6rem 1.2rem;
  gap: 0.5rem;
  font-weight: 600;
}

/* Content Area */
.content-area {
  padding: 2rem;
}

.welcome-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.welcome-header h2 {
  font-size: 1.25rem;
  color: #111827;
}

.link-sm {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 500;
}

.empty-state-container {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: white; */
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
}

.dashed-box {
  width: 100%;
  height: 200px;
  border: 2px dashed #e5e7eb;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-toggles {
  display: flex;
  gap: 0.5rem;
}

.icon-toggle {
  background: white;
  border: 1px solid #e5e7eb;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  color: #6b7280;
}

.icon-toggle.active {
  background: #eff6ff;
  color: var(--primary);
  border-color: #bfdbfe;
}

.text-muted {
  color: #6b7280;
}

.mt-lg {
  margin-top: 2rem;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: white;
  border-radius: var(--radius-md);
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-header h2 {
  font-size: 1.25rem;
  color: #111827;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.modal-close:hover {
  color: #111827;
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: #111827;
  background: white;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-error {
  background: #fef2f2;
  color: #dc2626;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  margin-top: 1rem;
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover {
  background: #e5e7eb;
}

.btn-danger {
  background: #dc2626;
  color: white;
}

.btn-danger:hover {
  background: #b91c1c;
}

/* Board Card Styles */
.board-card {
  position: relative;
}

.board-card-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.board-card:hover .board-card-actions {
  opacity: 1;
}

.board-action-btn {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: #6b7280;
  transition: all 0.15s;
}

.board-action-btn:hover {
  background: white;
  color: #111827;
}

.board-action-btn.delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Recent boards grid */
.recent-boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.dashed-box {
  flex-direction: column;
  text-align: center;
}