/* ============================================================
   TreeGig — Unified Sidebar Styles v2.1
   July 31, 2026
   ============================================================ */

:root {
  --leaf:           #2F6B3C;
  --sap:            #6FBF73;
  --white:          #FFFFFF;
  --bg-light:       #F5F7FA;
  --card-bg:        #FFFFFF;
  --text-primary:   #2C3E50;
  --text-secondary: #7F8C8D;
  --border-color:   #E8EAED;
  --sidebar-bg:     #085C44;
  --sidebar-width:  240px;
}


/* ── NO-TRANSITION (prevents flicker on page load) ───────── */
body.no-transition * {
  transition: none !important;
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.container {
  display: block;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.3s ease;
}

.container.sidebar-collapsed {
  margin-left: 72px;
}

@media (max-width: 768px) {
  .container {
    margin-left: 0;
  }
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
  background:      var(--sidebar-bg);
  width:           var(--sidebar-width);
  height:          100vh;
  position:        fixed;
  top:             0;
  left:            0;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  padding:         20px 16px;
  gap:             4px;
  overflow-y:      auto;
  overflow-x:      hidden;
  z-index:         1000;
  box-sizing:      border-box;
  transition:      width 0.3s ease, padding 0.3s ease;
}

.sidebar.collapsed {
  width:           72px;
  padding:         20px 10px;
  align-items:     center;
}

/* ── SIDEBAR TOP ──────────────────────────────────────────── */
.sidebar-top {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  margin-bottom:   16px;
  padding:         0 4px;
  flex-shrink:     0;
}

.sidebar.collapsed .sidebar-top {
  flex-direction:  column;
  gap:             8px;
}

/* ── LOGO ─────────────────────────────────────────────────── */
.logo-icon {
  display:         flex;
  align-items:     center;
  gap:             10px;
  color:           var(--sap);
  font-size:       22px;
  text-decoration: none;
  font-weight:     700;
  white-space:     nowrap;
}

.logo-icon .nav-label {
  display:     block;
  color:       var(--white);
  font-size:   16px;
  font-weight: 700;
}

.sidebar.collapsed .logo-icon .nav-label {
  display: none;
}

/* ── COLLAPSE TOGGLE BUTTON ───────────────────────────────── */
.sidebar-toggle {
  background:    rgba(255,255,255,0.1);
  border:        1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color:         rgba(255,255,255,0.7);
  width:         28px;
  height:        28px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     12px;
  flex-shrink:   0;
  transition:    all 0.2s;
}

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

/* ── NAV ITEMS ────────────────────────────────────────────── */
.nav-icon {
  display:         flex;
  align-items:     center;
  gap:             12px;
  width:           100%;
  padding:         10px 12px;
  border-radius:   10px;
  color:           rgba(255,255,255,0.6);
  font-size:       18px;
  text-decoration: none;
  cursor:          pointer;
  transition:      all 0.2s;
  box-sizing:      border-box;
  white-space:     nowrap;
}

.nav-icon:hover {
  background: rgba(255,255,255,0.12);
  color:      var(--sap);
}

.nav-icon.active {
  background: rgba(255,255,255,0.15);
  color:      var(--sap);
}

.sidebar.collapsed .nav-icon {
  width:           48px;
  padding:         12px;
  justify-content: center;
}

/* ── NAV LABELS ───────────────────────────────────────────── */
.nav-label {
  display:     block;
  font-size:   13px;
  font-weight: 500;
  color:       rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow:    hidden;
}

.sidebar.collapsed .nav-label {
  display: none;
}

/* ── LANGUAGE TOGGLE ──────────────────────────────────────── */
.lang-toggle-btn {
  margin-top:      auto;
  margin-bottom:   8px;
  width:           100%;
  height:          40px;
  border-radius:   8px;
  background:      rgba(255,255,255,0.1);
  border:          1px solid rgba(255,255,255,0.2);
  color:           var(--white);
  font-weight:     600;
  font-size:       12px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all 0.2s;
  flex-shrink:     0;
}

.lang-toggle-btn:hover {
  background:   rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
}

.sidebar.collapsed .lang-toggle-btn {
  width:   48px;
  padding: 0;
}

/* ── HEADER ───────────────────────────────────────────────── */
.header-left {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            0;
}

.header-title {
  font-size:   24px;
  font-weight: 700;
  line-height: 1.2;
  margin:      0;
}

.breadcrumb {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12px;
  color:       var(--text-secondary);
  margin-top:  2px;
}

/* ── HAMBURGER (mobile only) ──────────────────────────────── */
.hamburger {
  display:         none;
  background:      none;
  border:          none;
  font-size:       24px;
  cursor:          pointer;
  color:           var(--text-primary);
  padding:         8px;
  align-items:     center;
  justify-content: center;
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    transform:  translateX(-100%);
    transition: transform 0.3s ease;
    width:      var(--sidebar-width) !important;
    padding:    20px 16px !important;
    align-items: flex-start !important;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar.collapsed .nav-label {
    display: block;
  }

  .sidebar.collapsed .logo-icon .nav-label {
    display: block;
  }

  .sidebar.collapsed .nav-icon {
    width:           100%;
    padding:         10px 12px;
    justify-content: flex-start;
  }

  .hamburger {
    display: flex;
  }

  .sidebar-toggle {
    display: none;
  }
}

/* ── PAGE TITLE BAR ───────────────────────────────────────── */
.page-title-bar {
  padding:       24px 40px 8px;
}

.page-title {
  font-size:   28px;
  font-weight: 700;
  color:       var(--text-primary, #2C3E50);
  margin:      0 0 4px 0;
  line-height: 1.2;
}

.page-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   13px;
  color:       var(--text-secondary, #7F8C8D);
}

/* ── MAIN CONTENT AREA ────────────────────────────────────── */
.main {
  padding: 0 40px 40px;
  min-height: calc(100vh - 60px);
}

@media (max-width: 768px) {
  .page-title-bar { padding: 16px 20px 8px; }
  .page-title { font-size: 22px; }
  .main { grid-column: 1; padding: 0 20px 20px; }
}