/* File: public/css/views.css */
/* Berisi aturan CSS mobile-first dan kustomisasi view lainnya */

/* --- MOBILE FIRST BASE (Default) --- */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--sidebar-width));
  width: var(--sidebar-width);
  z-index: 1051;
  background: linear-gradient(180deg, #1877f2, #003153);
  color: #fff;
  padding: 1rem;
  transition: left 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.content {
  margin-left: 0;
  padding: 0.5rem;
  transition: margin-left 0.3s ease-in-out;
}

.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  transition: left 0.3s ease-in-out;
}

/* Saat sidebar aktif di mobile */
body.sidebar-visible-mobile .sidebar {
  left: 0;
}

/* Sembunyikan elemen desktop di mobile */
#sidebar-toggle {
  display: none;
}

.navbar-brand {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

/* --- DESKTOP ENHANCEMENTS (min-width: 992px) --- */
@media (min-width: 992px) {
  .sidebar {
    left: 0;
    z-index: 1000;
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
  }

  .content {
    margin-left: var(--sidebar-width);
    padding: 1rem 1.5rem;
  }

  .footer-fixed {
    left: var(--sidebar-width);
  }

  #sidebar-toggle {
    display: flex;
  }

  .navbar-brand {
    display: block;
  }

  /* State saat sidebar disembunyikan (collapsed) di desktop */
  body.sidebar-hidden .sidebar {
    width: var(--sidebar-collapsed-width);
    text-align: center;
  }

  body.sidebar-hidden .content {
    margin-left: var(--sidebar-collapsed-width);
  }

  body.sidebar-hidden .footer-fixed {
    left: var(--sidebar-collapsed-width);
  }

  /* Sembunyikan teks saat diciutkan */
  body.sidebar-hidden .sidebar-text,
  body.sidebar-hidden .sidebar-menu-text,
  body.sidebar-hidden .sidebar-brand-full {
    display: none;
  }

  body.sidebar-hidden .sidebar-brand-mini {
    display: block !important;
  }
}