/* core/layout.css */
/* Main layout structure - Critical for dashboard layout */

/* ========================================
   DASHBOARD CONTAINER
   ======================================== */

.l-dashboard {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

/* ========================================
   MAIN WRAPPER - Contains topbar and main content
   ======================================== */

.l-main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  background: var(--ds-color-background);
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */

.c-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.c-main__wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.c-main__container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ========================================
   CONTENT AREA
   ======================================== */

.c-content {
  flex: 1;
  padding: var(--ds-space-xl);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--ds-color-background);
  position: relative;
}

.c-content__header {
  margin-bottom: var(--ds-space-xl);
}

.c-content__title {
  font-size: var(--ds-font-size-xxxl);
  font-weight: var(--ds-font-weight-bold);
  color: var(--ds-color-text);
  margin: 0 0 var(--ds-space-m) 0;
}

.c-content__body {
  position: relative;
}

/* ========================================
   GRID SYSTEM
   ======================================== */

.c-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ds-space-l);
  margin-bottom: var(--ds-space-xl);
}

/* ========================================
   CARD COMPONENT
   ======================================== */
/* 
.c-card {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-l);
  overflow: hidden;
}

.c-card__header {
  padding: var(--ds-space-l);
  border-bottom: 1px solid var(--ds-color-border);
  background: var(--ds-color-surface);
}

.c-card__title {
  font-size: var(--ds-font-size-l);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text);
  margin: 0;
}

.c-card__body {
  padding: var(--ds-space-l);
} */

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

.c-stat {
  text-align: center;
}

.c-stat__label {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--ds-space-s);
}

.c-stat__value {
  font-size: var(--ds-font-size-xxxl);
  font-weight: var(--ds-font-weight-bold);
  color: var(--ds-color-text);
  margin-bottom: var(--ds-space-s);
}

.c-stat__change {
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-medium);
}

.c-stat__change--positive {
  color: var(--ds-color-success);
}

.c-stat__change--negative {
  color: var(--ds-color-danger);
}

/* ========================================
   BREADCRUMBS
   ======================================== */
/* 
.c-breadcrumbs {
  margin-bottom: var(--ds-space-m);
}

.c-breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--ds-font-size-s);
}

.c-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
}

.c-breadcrumbs__item:not(:last-child)::after {
  content: '/';
  color: var(--ds-color-text-weaker);
}

.c-breadcrumbs__link {
  color: var(--ds-color-text-weak);
  text-decoration: none;
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}

.c-breadcrumbs__link:hover {
  color: var(--ds-color-accent);
}

.c-breadcrumbs__item--current {
  color: var(--ds-color-text);
} */

/* ========================================
   BUTTONS
   ======================================== */
/* 
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-s);
  padding: var(--ds-space-s) var(--ds-space-l);
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-medium);
  border-radius: var(--ds-radius-m);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
  text-decoration: none;
  white-space: nowrap;
}

.c-button--primary {
  background: var(--ds-color-accent);
  color: var(--ds-color-text-on-accent);
  border-color: var(--ds-color-accent);
}

.c-button--primary:hover {
  background: var(--ds-color-accent-hover);
  border-color: var(--ds-color-accent-hover);
}

.c-button--secondary {
  background: transparent;
  color: var(--ds-color-text);
  border-color: var(--ds-color-border);
}

.c-button--secondary:hover {
  background: var(--ds-color-surface-hover);
  border-color: var(--ds-color-border-strong);
}

.c-button:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
} */

/* ========================================
   NOTIFICATIONS
   ======================================== */

.c-notification {
  display: flex;
  gap: var(--ds-space-m);
  padding: var(--ds-space-m);
  border-bottom: 1px solid var(--ds-color-border);
  transition: background var(--ds-duration-fast) var(--ds-ease-out);
  cursor: pointer;
}

.c-notification:hover {
  background: var(--ds-color-surface-hover);
}

.c-notification__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-surface-raised);
  border-radius: var(--ds-radius-m);
  color: var(--ds-color-accent);
}

.c-notification__content {
  flex: 1;
  min-width: 0;
}

.c-notification__title {
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text);
  margin-bottom: var(--ds-space-xs);
}

.c-notification__time {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
}

/* ========================================
   WIDGETS
   ======================================== */

.c-widget {
  padding: var(--ds-space-m);
  background: var(--ds-color-surface-raised);
  border-radius: var(--ds-radius-m);
  margin-bottom: var(--ds-space-m);
}

.c-widget__title {
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text);
  margin-bottom: var(--ds-space-s);
}

.c-widget__body {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
}


/* ========================================
   OVERLAY
   ======================================== */

/* Backdrop dla mobilnego overlay (sidebar) */
.l-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease-out),
              visibility var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease-out);
  z-index: 999; /* poniżej sidebara i przycisku zamknij */
}
.l-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Przycisk zamknięcia (pokazywany na mobile przy otwartym overlay) */
.c-sidebar__close-button {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--ds-radius-m, 10px);
  background: var(--ds-color-surface, #fff);
  color: var(--ds-color-icon, #0a0a0a);
  box-shadow: var(--ds-shadow-lg, 0 10px 20px rgba(0,0,0,.15));
  z-index: 1000; /* nad overlayem i nad sidebarem */
}
.c-sidebar__close-button.is-visible { display: flex; }

@media (min-width: 769px) {
  .c-sidebar__close-button { display: none !important; }
}



/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
  .c-content {
    padding: var(--ds-space-l);
  }
  
  .c-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  /* Force sidebar to overlay on mobile */
/*  [data-cms-layout] .c-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    width: 85vw !important;
    max-width: var(--nav-sidebar-width, 260px);
  }*/
  
  /* Content takes full width on mobile */
  .c-content {
    padding: var(--ds-space-m);
  }
  
  .c-grid {
    grid-template-columns: 1fr;
  }
  
  .c-content__title {
    font-size: var(--ds-font-size-xl);
  }
}

/* ========================================
   PRINT
   ======================================== */

@media print {
  .c-sidebar,
  .c-sidebar-internal,
  .c-sidebar-internal-right,
  .c-sidebar-right,
  .c-topbar,
  .l-overlay,
  .c-sidebar-right-backdrop {
    display: none !important;
  }
  
  .l-main-wrapper {
    margin: 0 !important;
  }
  
  .c-content {
    padding: 0;
    overflow: visible;
  }
}