/* Desktop Layout specific styles for FunkyLime */

body.web-mode {
  display: block;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
  height: 100vh;
}

.web-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

/* Sidebar */
.web-sidebar {
  width: 260px;
  background: var(--dark-card);
  border-right: 1px solid var(--progress-track);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-4);
  flex-shrink: 0;
  transition: width 0.3s ease;
  overflow-x: hidden;
}

/* Sidebar Collapsed State */
.web-sidebar.collapsed {
  width: 88px;
}

.web-sidebar.collapsed .sidebar-item {
  font-size: 0;
  gap: 0;
  justify-content: center;
}

.web-sidebar.collapsed .sidebar-logo {
  font-size: 0;
  gap: 0;
  justify-content: center;
}

.web-sidebar.collapsed .t-caption,
.web-sidebar.collapsed .sidebar-footer {
  display: none;
}

.sidebar-logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--lime-primary);
  margin-bottom: var(--sp-8);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  color: var(--gray-text);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
}

.sidebar-item.active {
  background: var(--lime-primary);
  color: var(--black);
}
.sidebar-item.active svg {
  stroke: var(--black);
}

.sidebar-item svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-footer {
  margin-top: auto;
}

/* Main Content Area */
.web-main {
  flex: 1;
  padding: var(--sp-6) var(--sp-8);
  overflow-y: auto;
}

/* Desktop Header */
.web-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-8);
}

.header-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--dark-card);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  width: 300px;
}

.header-search input {
  background: transparent;
  border: none;
  color: var(--white);
  outline: none;
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-6);
}

/* Span utilities for grid */
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

/* Desktop card adjustments */
.dashboard-grid .card {
  height: 100%;
  margin-bottom: 0; /* Let CSS grid handle gaps */
}

/* ========================================= */
/* Responsive Breakpoints                    */
/* ========================================= */

/* Large Tablets / Small Laptops (Max 1200px) */
@media (max-width: 1200px) {
  /* Change 3 columns to 2 columns */
  .col-span-4 {
    grid-column: span 6;
  }
}

/* Tablets (Max 992px) */
@media (max-width: 992px) {
  .dashboard-grid {
    gap: var(--sp-4);
  }
  .web-main {
    padding: var(--sp-4);
  }
  .header-search {
    width: 200px;
  }
  
  /* Global KPI cards stack */
  .web-main > .flex.gap-6.mb-6 {
    flex-direction: column;
  }
}

/* Mobile Devices (Max 768px) */
@media (max-width: 768px) {
  .web-container {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  
  /* Transform sidebar into a mobile header */
  .web-sidebar {
    width: 100% !important;
    height: auto;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--progress-track);
    padding: var(--sp-4);
  }
  
  /* Handle mobile collapsed state */
  .web-sidebar.collapsed {
    padding-bottom: 0;
  }
  .web-sidebar.collapsed .sidebar-nav {
    display: none;
  }
  .web-sidebar .sidebar-logo {
    margin-bottom: var(--sp-4);
  }
  
  /* Stack all grid columns to 100% */
  .col-span-4, .col-span-6, .col-span-8 {
    grid-column: span 12;
  }
  
  /* Header restructuring */
  .web-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  
  .web-header > div:first-child {
    width: 100%;
    justify-content: space-between;
  }
  
  .header-search {
    width: 100%;
  }
  
  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  /* Filters row stacking */
  .web-main > .flex.justify-between.mb-6 {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  
  /* Force internal flex rows to wrap on mobile */
  .card .flex.justify-between {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
}