/* Bond Priori - Layout System */

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-charcoal);
  background-color: var(--color-cream);
  min-height: 100vh;
  overflow-x: hidden;
}

/* App Container */
.app {
  display: grid;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  grid-template-columns: 60px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--transition-normal) var(--ease-default);
}

.app.sidebar-expanded {
  grid-template-columns: 240px 1fr;
}

/* Sidebar Area */
.sidebar {
  grid-area: sidebar;
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 100vh;
  z-index: var(--z-fixed);
  transition: width var(--transition-normal) var(--ease-default);
}

.app.sidebar-expanded .sidebar {
  width: 240px;
}

/* Header Area */
.header {
  grid-area: header;
  position: sticky;
  top: 0;
  height: 64px;
  z-index: var(--z-sticky);
}

/* Main Content Area */
.main {
  grid-area: main;
  padding: var(--space-6);
  overflow-y: auto;
  min-height: calc(100vh - 64px);
}

.content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

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

/* Grid Column Spans */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.row-2 { grid-row: span 2; }
.row-3 { grid-row: span 3; }

/* Quick Actions Grid */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
}

/* Activity Feed */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Section Headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-charcoal);
}

.section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-ash);
  margin-top: var(--space-1);
}

/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing Utilities */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

/* Width & Text Utilities */
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.hidden { display: none !important; }

/* Tablet Responsive */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .col-6 {
    grid-column: span 3;
  }
  .col-4, .col-5,
  .col-7, .col-8, .col-9,
  .col-10, .col-11, .col-12 {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .app {
    grid-template-areas: "header" "main";
    grid-template-columns: 1fr;
    grid-template-rows: 64px 1fr;
  }
  .app.sidebar-expanded { grid-template-columns: 1fr; }
  .sidebar {
    width: 240px;
    transform: translateX(-100%);
    transition: transform var(--transition-normal) var(--ease-default);
  }
  .app.sidebar-open .sidebar { transform: translateX(0); }
  .main { padding: var(--space-4); }
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 1;
  }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .main { padding: var(--space-3); }
  .quick-actions { grid-template-columns: 1fr; }
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(var(--color-black-rgb), 0.5);
  z-index: calc(var(--z-fixed) - 1);
  opacity: 0;
  transition: opacity var(--transition-normal) var(--ease-default);
}

@media (max-width: 768px) {
  .app.sidebar-open .sidebar-overlay {
    display: block;
    opacity: 1;
  }
}